页面开发提效的神器：自动打开 IDE 并将光标定位至 DOM 的源代码位置

先看使用效果：
在这里插入图片描述

在webpack使用Code Inspector插件

使用方法

// vue.config.js
const { codeInspectorPlugin } = require('code-inspector-plugin');
chainWebpack(config) {
    config.plugin('code-inspector-plugin').use(
      codeInspectorPlugin({
        bundler: 'webpack',
        hotKeys: ['ctrlKey', 'shiftKey']
      })
    )
}

支持的脚手架工具

在vite使用：vite-plugin-vue-inspector插件

在vue2中的使用方法

// for Vue2
import { defineConfig, } from 'vite'
import { createVuePlugin, } from 'vite-plugin-vue2'

import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector

export default defineConfig({
  plugins: [
    createVuePlugin(),
    Inspector({
      vue: 2
    }),
  ],
})

在vue3中的使用方法

// for Vue3

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Inspector from 'unplugin-vue-inspector/vite'

export default defineConfig({
  plugins: [Vue(), Inspector({
      enabled: true,
      toggleButtonVisibility: 'always',
      launchEditor: 'code',
    })],
})