在开发过程中，尤其是当我们面对一个陌生的模块或需要修改他人编写的项目时，往往会遇到理解代码逻辑困难、定位问题耗时等挑战，那今天推荐的这个工具可以帮助我们高效应对，短时间内快速定位到关键代码，辅助我们迅速搞清楚代码的结构与流程，从而节省我们在理解代码和定位问题上的时间。 # 工具介绍 code-inspector-plugin 是一款开源的基于 webpack/vite/rspack/nextjs/nuxt/umijs plugin 的提升开发效率的工具，点击页面上的 DOM，它能够自动打开你的 IDE 并将光标定位到 DOM 对应的源代码位置。 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fa093abb75844e5ca9a779f37ff66aef~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6L2s6L2s5oqA5pyv5Zui6Zif:q75.awebp?rk3s=f64ab15b&x-expires=1774300968&x-signature=nkaYZgJ5QvuvsJ2xVAmcsXiCxhg%3D) ## 优点 ### 开发提效只需点击页面上的 DOM 元素，IDE 自动打开并精准定位到对应的源码位置，让开发、调试效率成倍提升！ ### 简单易用无需侵入源码，仅需引入打包工具即可轻松启用，接入过程快如闪电。 ### 适配性强 * **全面兼容构建工具**：支持 webpack、vite、rspack、rsbuild、esbuild、farm、nextjs、nuxt、umijs 等主流工具。 * **多框架支持**：完美适配 vue、react、preact、solid、qwik、svelte、astro 等前端框架。 * **智能 IDE 识别**：兼容 vscode、webstorm、atom、hbuilderX、PhpStorm、Pycharm、IntelliJ IDEA 等多款 IDE。 * **环境自动识别**：仅在开发环境中生效，不影响生产环境，安全又高效。用它，开发工作从此快人一步！ ## 使用 ### 安装 npm install code-inspector-plugin -D yarn add code-inspector-plugin -D pnpm add code-inspector-plugin -D ### 配置以 webpack 项目为例 const { codeInspectorPlugin } = require('code-inspector-plugin'); module.exports = () => ({ plugins: [ codeInspectorPlugin({ bundler: 'webpack', }), ], }); ### 使用目前使用 DOM 源码定位功能的方式有两种: #### 方式一（推荐）按住快捷键（Mac 默认 `Option + Shift`，Windows `Alt + Shift` ）可以查看控制台提示： 1. 鼠标悬停时页面元素会被高亮遮罩，并显示信息。 2. 点击元素，IDE 自动打开并定位到对应代码位置。 #### 方式二启用页面上的 **代码审查开关按钮**（需配置 `showSwitch: true`）：点击按钮切换模式： * **彩色开关**：代码审查模式开启，操作同方式一。 * **黑白开关**：模式关闭详见官网： # 实现原理 ## 实现思路 1. 参与源码编译： * 在使用如 Webpack、Vite 或 Rspack 等打包工具进行编译时，code-inspector-plugin 插件会加入编译流程。 * 插件会对 Vue 或 JSX 代码进行 AST 分析，从中提取出 DOM 元素的源代码信息（包括文件路径、行号和列号），并将这些信息作为额外的属性添加到 DOM 元素中。 2. 前端交互逻辑 * 一旦编译完成，插件会将一些交互功能嵌入网页，监听用户点击事件。 * 当用户点击某个 DOM 元素时，插件会从该元素的属性中提取文件路径、行号和列号，并通过 HTTP 请求将这些信息发送到后端服务器。 3. 后台服务处理请求 * 后端启动一个 Node.js 服务，接收前端发送的 HTTP 请求。 * 接收到请求后，服务会根据文件路径、行号和列号打开相关的 IDE，并将光标定位到正确的位置。 4. 自动打开 IDE 并定位源代码 * 后端服务利用 Node.js 的 spawn 或 exec 方法，启动 IDE，并将其定位到相应的源代码位置，帮助开发者快速修复或查看代码。 ## 源码解析接下来，根据作者的实现思路，来看看代码是如何实现的吧！ ### 参与源码编译 #### 入口根据 `bundler`配置的打包工具参数（Vite、Webpack、Rspack、Esbuild）加载相应插件，并通过 `.env.local` 文件和 `CODE_INSPECTOR` 环境变量控制是否启用。 import { ViteCodeInspectorPlugin } from 'vite-code-inspector-plugin'; import WebpackCodeInspectorPlugin from 'webpack-code-inspector-plugin'; import { EsbuildCodeInspectorPlugin } from 'esbuild-code-inspector-plugin'; export function CodeInspectorPlugin(options: CodeInspectorPluginOptions): any { // 没有 bundler 参数，报错 if (!options?.bundler) { console.log( chalk.red( 'Please specify the bundler in the options of code-inspector-plugin.' ) ); return; } ... if (options.bundler === 'webpack' || options.bundler === 'rspack') { // 使用 webpack 插件 return new WebpackCodeInspectorPlugin(params); } else if (options.bundler === 'esbuild') { return EsbuildCodeInspectorPlugin(params); } else { // 使用 vite 插件 return ViteCodeInspectorPlugin(params); } } export const codeInspectorPlugin = CodeInspectorPlugin; #### 插件内部逻辑以 webpack-plugin 为例，在 Webpack 构建中通过自定义 `loader.js` 和 `inject-loader.js` 来注入源代码信息： `applyLoader`：添加自定义 loader 和 inject-loader 到 Webpack 配置。 `WebpackCodeInspectorPlugin`：检查是否处于开发环境，在开发模式下注册 loader，这里判断了仅在开发环境下生效，有效降低用户接入的心智。 const applyLoader = (options: LoaderOptions, compiler: any) => { if (!isFirstLoad) { return; } isFirstLoad = false; // 适配 webpack 各个版本 const _compiler = compiler?.compiler || compiler; const module = _compiler?.options?.module; const rules = module?.rules || module?.loaders || []; rules.push( { test: options?.match ?? /.(vue|jsx|tsx|js|ts|mjs|mts)$/, exclude: /node_modules/, use: [ { loader: path.resolve(compatibleDirname, `./loader.js`), options, }, ], ...(options.enforcePre === false ? {} : { enforce: 'pre' }), // 默认指定当前插件优先执行 }, { ...(options?.injectTo ? { resource: options?.injectTo } : { test: /.(jsx|tsx|js|ts|mjs|mts)$/, exclude: /node_modules/, }), use: [ { loader: path.resolve(compatibleDirname, `./inject-loader.js`), options, }, ], enforce: 'post', } ); } class WebpackCodeInspectorPlugin { options: Options; constructor(options: Options) { this.options = options; } apply(compiler) { // 自定义 dev 环境判断 let isDev: boolean; if (typeof this.options?.dev === 'function') { isDev = this.options?.dev(); } else { isDev = this.options?.dev; } if (isDev === false) { return; } // 仅在开发环境下使用 if ( !isDev && compiler?.options?.mode !== 'development' && process.env.NODE_ENV !== 'development' ) { return; } ... applyLoader({ ...this.options, record }, compiler); } } export default WebpackCodeInspectorPlugin; #### 两个 loader 内部逻辑 ##### 第一个 loader 处理不同类型的文件（Vue、JSX、Svelte），使用 `transformCode` 方法根据文件类型对内容进行转换。`transformCode` 会调用不同的转换函数（`transformVue`、`transformJsx`、`transformSvelte`）处理不同的语法。 ``` export default async function WebpackCodeInspectorLoader(content: string) { // jsx 语法 const isJSX = isJsTypeFile(filePath) || (filePath.endsWith('.vue') && jsxParamList.some((param) => params.get(param) !== null)); if (isJSX) { return transformCode({ content, filePath, fileType: 'jsx', escapeTags }); } // vue jsx const isJsxWithScript = filePath.endsWith('.vue') && (params.get('lang') === 'tsx' || params.get('lang') === 'jsx'); if (isJsxWithScript) { const { descriptor } = parseSFC(content, { sourceMap: false, }); // 处理