Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hellof2e/vite-plugin-dev-inspector
极力推荐🚀🚀🚀点击页面元素，编辑器直接打开本地代码文件，适用任何前端框架。A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2, Vue3, React, Svelte,Angular, SSR(All frameworks).
https://github.com/hellof2e/vite-plugin-dev-inspector
inspector react-inspector vue-inspector webcomponents
Last synced: 3 days ago
JSON representation
极力推荐🚀🚀🚀点击页面元素，编辑器直接打开本地代码文件，适用任何前端框架。A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2, Vue3, React, Svelte,Angular, SSR(All frameworks).
- Host: GitHub
- URL: https://github.com/hellof2e/vite-plugin-dev-inspector
- Owner: hellof2e
- License: mit
- Created: 2024-08-12T06:50:20.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-09-04T12:57:11.000Z (6 months ago)
- Last Synced: 2025-02-08T01:41:19.952Z (13 days ago)
- Topics: inspector, react-inspector, vue-inspector, webcomponents
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/vitejs-vite-shxjct?file=src%2FApp.vue
- Size: 12.3 MB
- Stars: 44
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.en-US.md
- License: LICENSE
Awesome Lists containing this project
README
Vite-plugin-dev-inspector
## Introduction
A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2, Vue3, React, Svelte,Angular, SSR(All frameworks).
## Installation
```bash
# vite-plugin-dev-inspector
npm install vite-plugin-dev-inspector -D
```
## Usage
### Keyboard shortcut (快捷键)
* Mac: Command(⌘) + Shift(⇧)
* Windows: Ctrl + Shift(⇧)
### Configuration Vite
```ts
// for Vue2
import { defineConfig, } from 'vite'
import { createVuePlugin, } from 'vite-plugin-vue2'
import inspector from 'vite-plugin-dev-inspector'
export default defineConfig({
plugins: [
createVuePlugin(),
inspector(),
],
})
```
```ts
// for Vue3
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import inspector from 'vite-plugin-dev-inspector'
export default defineConfig({
plugins: [
Vue(),
inspector()
],
})
```
```ts
// for react
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import inspector from 'vite-plugin-dev-inspector'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
inspector(),
],
})
```
```ts
// for preact
import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'
import inspector from 'vite-plugin-dev-inspector'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
preact(),
inspector(),
],
})
```
```ts
// for preact
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import inspector from 'vite-plugin-dev-inspector'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
svelte(),
inspector(),
],
})
```
### Options
```ts
inspector({
/**
* Toggle button visibility
* @default 'active'
*/
toggleButtonVisibility?: 'always' | 'active' | 'never'
/**
* Default enable state
* @default false
*/
enabled?: boolean
/**
* Define a combo key to toggle inspector
* @default 'control-shift' on windows, 'meta-shift' on other os
*
* any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
* examples: control-shift, control-o, control-alt-s meta-x control-meta
* Some keys have native behavior (e.g. alt-s opens history menu on firefox).
* To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
* You can also disable it by setting `false`.
*/
toggleComboKey?: string | false
/**
* append an import to the module id ending with `appendTo` instead of adding a script into body
* useful for frameworks that do not support trannsformIndexHtml hook (e.g. Nuxt3)
*
* WARNING: only set this if you know exactly what it does.
*/
appendTo?: string | RegExp
/**
* Customize openInEditor host (e.g. http://localhost:3000)
* @default false
* @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.
*/
openInEditorHost?: string | false
/**
* lazy load inspector times (ms)
* @default false
*/
lazyLoad?: number | false
/**
* disable inspector on editor open
* @default false
*/
disableInspectorOnEditorOpen?: boolean
/**
* Hide information in VNode and produce clean html in DevTools
*
* Currently, it only works for Vue 3
*
* @default true
*/
cleanHtml?: boolean
/**
* Target editor when open in editor
*
* @default code (Visual Studio Code)
*/
launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm'
})
```
## Notes
Vite-plugin-dev-inspector is inspired by [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector), but it does not repy on front-end frameworks. It can support any front-end technology stack at the same time, such as Vue 2 & 3, React, Angular, Svelte, Nuxt and SSR.
## License
[MIT LICENSE](./LICENSE)