vite-inspector
TypeScript icon, indicating that this package has built-in type declarations

0.1.4 • Public • Published

vite-inspector

NPM version

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

  • [x] Support Vue
  • [x] Support React
  • [x] Support PReact
  • [x] Support Solid
  • [x] Support Svelte

Examples

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

Install

pnpm install vite-inspector -D
Vue2
// 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(),
  ],
})


Vue3
// 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(),
  ],
})


React
// 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(),
  ],
})


PReact
// 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(),
  ],
})


Solid
// 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',
  },
})


Svelte
// 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'
    }),
  ]
})

Credits

Thanks to:

License

MIT License © 2023 Elone Hoo

Package Sidebar

Install

npm i vite-inspector

Weekly Downloads

51

Version

0.1.4

License

MIT

Unpacked Size

50.9 kB

Total Files

7

Last publish

Collaborators

  • elonehoo