Vite-plugin-dev-inspector

简体中文 | English

介绍

一个Vite插件，点击页面元素，IDE直接打开对应代码文件。支持 Vue2, Vue3, React, Svelte,Angular, SSR等任何前端工程。

安装

1
2# vite-plugin-dev-inspector
3
4npm install vite-plugin-dev-inspector -D

使用

快捷键

• Mac: Command(⌘) + Shift(⇧)
• Windows: Ctrl + Shift(⇧)

Vite 配置

1// for Vue2
2
3import { defineConfig, } from 'vite'
4import { createVuePlugin, } from 'vite-plugin-vue2'
5import inspector from 'vite-plugin-dev-inspector'
6
7export default defineConfig({
8  plugins: [
9    createVuePlugin(),
10    inspector(),
11  ],
12})

1// for Vue3
2
3import { defineConfig } from 'vite'
4import Vue from '@vitejs/plugin-vue'
5import inspector from 'vite-plugin-dev-inspector'
6
7export default defineConfig({
8  plugins: [
9    Vue(),
10    inspector()
11  ],
12})

1// for react
2import { defineConfig } from 'vite'
3import react from '@vitejs/plugin-react'
4import inspector from 'vite-plugin-dev-inspector'
5
6// https://vitejs.dev/config/
7export default defineConfig({
8  plugins: [
9    react(),
10    inspector(),
11  ],
12})

1// for preact
2import { defineConfig } from 'vite'
3import preact from '@preact/preset-vite'
4import inspector from 'vite-plugin-dev-inspector'
5
6// https://vitejs.dev/config/
7export default defineConfig({
8  plugins: [
9    preact(),
10    inspector(),
11  ],
12})

1// for preact
2import { defineConfig } from 'vite'
3import { svelte } from '@sveltejs/vite-plugin-svelte'
4import inspector from 'vite-plugin-dev-inspector'
5
6// https://vitejs.dev/config/
7export default defineConfig({
8  plugins: [
9    svelte(),
10    inspector(),
11  ],
12})

Options

1inspector({
2  /**
3   * Toggle button visibility / 切换按钮隐藏展示
4   * @default 'active'
5   */
6  toggleButtonVisibility?: 'always' | 'active' | 'never'
7
8  /**
9   * Default enable state
10   * @default false
11   */
12  enabled?: boolean
13
14  /**
15   * Define a combo key to toggle inspector
16   * @default 'control-shift' on windows, 'meta-shift' on other os
17   *
18   * any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
19   * examples: control-shift, control-o, control-alt-s  meta-x control-meta
20   * Some keys have native behavior (e.g. alt-s opens history menu on firefox).
21   * To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
22   * You can also disable it by setting `false`.
23   */
24  toggleComboKey?: string | false
25
26
27  /**
28   * append an import to the module id ending with `appendTo` instead of adding a script into body
29   * useful for frameworks that do not support trannsformIndexHtml hook (e.g. Nuxt3)
30   *
31   * WARNING: only set this if you know exactly what it does.
32   */
33  appendTo?: string | RegExp
34
35  /**
36   * Customize openInEditor host (e.g. http://localhost:3000)
37   * @default false
38   * @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.
39   */
40  openInEditorHost?: string | false
41
42  /**
43   * lazy load inspector times (ms)
44   * @default false
45   */
46  lazyLoad?: number | false
47
48  /**
49   * disable inspector on editor open
50   * @default false
51   */
52  disableInspectorOnEditorOpen?: boolean
53
54  /**
55   * Hide information in VNode and produce clean html in DevTools
56   *
57   * Currently, it only works for Vue 3
58   *
59   * @default true
60   */
61  cleanHtml?: boolean
62
63  /**
64   * Target editor when open in editor
65   *
66   * @default code (Visual Studio Code)
67   */
68  launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm'
69})

Notes

Vite-plugin-dev-inspector is fork from 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