页面开发提效的神器。点击页面上的 DOM 元素，它能自动打开 IDE 并将光标定位至 DOM 的源代码位置_同时按住 [ shift + alt] 时启用 inspector 功能(点击页面元素可定位至编辑器-CSDN博客

插件：code-inspector-plugin

安装：yarn add code-inspector-plugin --dev

插件文档： Code Inspector | Code Inspector

配置制定开发工具教程（win、Mac）： IDE | Code Inspector

快捷键使用：

Mac 系统默认组合键是 Option + Shift；

Window 的默认组合键是 Alt + Shift；

在浏览器控制台会输出相关组合键提示

IDE IDE编码名称

Visual Studio Code（vscode） code

Visual Studio Code - Insiders（vscode 内部版） code_insiders

WebStorm webstorm

Atom atom

HBuilderX hbuilder

PhpStorm phpstorm

Pycharm pycharm

IntelliJ IDEA idea

# 如果设置上面关键字Editor无效，请参考配置制定开发工具教程（win、Mac）

CODE_EDITOR=/Applications/Visual Studio Code.app/Contents/MacOS/Electron

如果项目是vite构建的

1、安装code-inspector-plugin模块

npm install code-inspector-plugin

2、确认安装成功

npm list code-inspector-plugin CopyInsert

如果出现下文则表示安装成功

3、在vite.config.js 文件里加入下方的代码

import { codeInspectorPlugin } from 'code-inspector-plugin'
 
export default defineConfig({
  plugins: [
    codeInspectorPlugin({
      bundler: 'vite',
    }),
  ],
})

4、重新运行项目