Code Inspector 点击页面上的 DOM 元素，它能自

官网

Code Inspector 点击页面上的 DOM 元素，它能自动打开 IDE 并定位到 DOM 对应源代码位置

文档

Code Inspector 开始使用
vue-cli webpack 相关 简单的配置方式

安装

• 使用 npm 安装

npm install code-inspector-plugin -D

• 使用 yarn 安装s

yarn add code-inspector-plugin -D

• 使用 pnpm 安装

pnpm add code-inspector-plugin -D

工程中引用

• 在 webpack 中使用：

// webpack.config.js
const { CodeInspectorPlugin } = require('code-inspector-plugin');

module.exports = () => ({
  plugins: [
    CodeInspectorPlugin({
      bundler: 'webpack',
    }),
  ],
});

• 在 vite 中使用：

// vite.config.js
import { defineConfig } from 'vite';
import { CodeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  plugins: [
    CodeInspectorPlugin({
      bundler: 'vite',
    }),
  ],
});

• 在 vue-cli 中使用

// vue.config.js
const { CodeInspectorPlugin } = require('code-inspector-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      CodeInspectorPlugin({
        bundler: 'webpack'
      })
    ]
  }
}

页面使用

在页面上按住组合键时，鼠标在页面移动即会在 DOM 上出现蓝色半透明遮罩层并显示相关信息，点击一下将自动打开 IDE 并将光标定位到元素对应的代码位置。 (Mac 系统默认组合键是 Option + Shift；Window 的默认组合键是 Alt + Shift，浏览器控制台会输出相关组合键提示)

演示.png

注意

仅当你的电脑为 Mac 且使用 vscode 作为 IDE 时需要配置此步，电脑为 Windows 或者使用其他 IDE 可以跳过此步。

在 VSCode 中执行 command + shift + p 命令, 搜索 指令并点击 Shell Command: Install 'code' command in PATH

vscode 配置.png

vscode 配置成功.png