目录
- 前言
- 插件介绍
- 具体使用
- Vue2.6 Vue Cli Webpack5项目
- 总结
前言
大家好，我是喵喵侠。在现代化的前端开发过程中，我们通常会选用市面上流行的前端框架（如Vue、React之类），快速实现各种功能。与传统的原生JavaScript和jQuery开发不同的是，我们编写的是框架模板代码，而并非原生的HTML、CSS、JavaScript，这样就会导致页面最终在控制台审查元素看到的代码，与实际编写的代码是不一样的。就拿Vue的项目来说，通常会使用脚手架工具进行编译打包成HTML、CSS、JavaScript，你只需要编写Vue语法的代码即可完成开发。
这时候问题来了，如果我想要找到页面上的某个DOM元素，对应Vue文件的某一行怎么办？
按照以往的做法，只能通过Vue官方提供的Devtools插件，来看页面上引用的哪些组件，但这只能看个大概，并不能具体定位到具体行列的位置。
今天我将带来一款好用的插件，彻底解决浏览器页面元素定位到IDE对应代码行号的痛点。
插件介绍
code-inspector-plugin是快手前端团队一位大佬开发的一款页面开发提交神器。这款插件的具体功能是，当你点击页面上的 DOM 元素，它能自动打开 IDE 并将光标定位至 DOM 的源代码位置。
根据官方介绍，它具备以下特点：
- 开发提效： 点击页面上的 DOM 元素，它能自动打开 IDE 并将光标定位至 DOM 的源代码位置，大幅提升开发体验和效率；
- 简单易用： 对源代码无任何侵入，只需要在打包工具中引入就能够生效，整个接入过程如喝水般一样简单；
- 适配性强： 支持在
webpack/vite/rspack/nextjs/nuxt/umijs中使用，支持vue/react/preact/solid/qwik/svelte/astro等多个框架。
可以说这款插件十分强大，支持市面上主流的各种框架和开发工具。
具体使用
Vue2.6 Vue Cli Webpack5项目
这里我拿目前开发的一个项目举例，技术栈用的是Vue2.6 Vue Cli Webpack5。
我个人习惯用pnpm，这里用pnpm安装一下插件：
代码语言：bash复制pnpm add code-inspector-plugin -D接着打开vue.config.js文件，引入插件和插件配置操作。下面是configureWebpack的写法：
// 这里省略原有其他配置...
const { codeInspectorPlugin } = require('code-inspector-plugin'); // 引入插件
module.exports = defineConfig({
// 这里省略原有其他配置...
configureWebpack: {
// 这里省略原有其他配置...
plugins: [
// 这里省略原有其他配置...
codeInspectorPlugin({
bundler: 'webpack', // 配置插件
})
]
}
});Webpack的插件配置，还有一种chainWebpack写法是这样的：
const { codeInspectorPlugin } = require('code-inspector-plugin');
module.exports = {
// 这里省略原有其他配置...
chainWebpack: (config) => {
config.plugin('code-inspector-plugin').use(
codeInspectorPlugin({
bundler: 'webpack',
})
);
},
};这样就配置好了！
启动项目后，会发现控制台里面，会有这样的提示：
同时按住 shift ⌥option 时启用 inspector 功能(点击页面元素可定位至编辑器源代码)
由于我是macOS系统，提示是shift ⌥option。如果你是Windows用户，对应的应该是shift alt键。
按住快捷键，鼠标移动你想要定位的对应DOM元素，会发现鼠标样式会改变，按住快捷键不松手，点击鼠标左键，就能定位到VSCode对应文件的代码行了！
总结
这款代码定位神器，我是无意间逛技术社区发现的，使用了一下后发现非常好用，特此分享给大家！希望各位能够在前端开发的过程中，效率越来越高。工作早早做完，早早下班！
