安装

npm i code-inspector-plugin -D
# or
yarn add code-inspector-plugin -D
# or
pnpm add code-inspector-plugin -D

在 vue.config.js 添加如下配置:

vue.config.js：

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

module.exports = {
  // ...other code
  chainWebpack: (config) => {
    config.plugin('code-inspector-plugin').use(
      CodeInspectorPlugin({
        bundler: 'webpack',
      })
    );
  },
};

使用

同时持续按住组合键进行代码审查。Window 的默认组合键是 Alt + Shift

当代码审查模式打开时，点击页面上的元素，将自动打开你的代码编辑器(Vs Code)并将光标定位到元素对应的代码位置。

Tips：运行的项目过大可能会在热更新时导致堆栈溢出报错