官网

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，浏览器控制台会输出相关组合键提示)