Vite-inspector NPM

vite-inspector

Jump to the local IDE source code while clicking the element of the browser automatically.

https://user-images.githubusercontent.com/43719490/223932417-35b4195a-71cd-4df1-a448-2d269ecbddcf.mp4

TODO

Support Vue
Support React
Support PReact
Support Solid
Support Svelte

Examples

Framework	Example
Vue2	Example
Vue3	Example
React	Example
PReact	Example
Solid	Example
Svelte	Example

Install

pnpm install vite-inspector -D

// vite.config.ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue2'
import OpenIde from 'vite-inspector'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    OpenIde({
      framework: 'vue'
    }),
    Vue(),
  ],
})

// vite.config.ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import OpenIde from 'vite-inspector'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    OpenIde({
      framework: 'vue'
    }),
    Vue(),
  ],
})

// vite.config.ts
import { defineConfig } from 'vite'
import React from '@vitejs/plugin-react'
import OpenIde from 'vite-inspector'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    OpenIde({
      framework: 'react'
    }),
    React(),
  ],
})

// vite.config.ts
import { defineConfig } from 'vite'
import Preact from '@preact/preset-vite'
import OpenIde from 'vite-inspector'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    OpenIde({
      framework: 'preact'
    }),
    Preact(),
  ],
})

// vite.config.ts
import { defineConfig } from 'vite'
import SolidPlugin from 'vite-plugin-solid'
import OpenIde from 'vite-inspector'

export default defineConfig({
  plugins: [
    OpenIde({
      framework: 'solid'
    }),
    SolidPlugin(),
  ],
  build: {
    target: 'esnext',
  },
})

// vite.config.ts
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import openIde from 'vite-inspector'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    openIde({
      framework: 'svelte'
    }),
    svelte(),
  ],
})

Config

// vite.config.ts
import { defineConfig } from 'vite'
import OpenIde from 'vite-inspector'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    OpenIde({
      framework: 'react' | 'vue' | 'solid' | 'preact' | 'svelte'
    }),
  ]
})