Code Inspector 页面开发提效的神器！

PBitW
874 阅读3分钟

不知道各位前端有没有这样的烦恼？

修改一个新的程序或者是很久没接触的程序，在界面上找到了对应的地方，但是代码里面是真的隐藏得很深，硬是找不到对应的哪个文件的哪个地方！

一般的做法都是找到 关键文字 / 特殊的css name，然后去 vs code 中搜索关键文字，然后在出来的文件里面去看哪一个是对应的文件，这种方式也还行。但是害怕遇见数据是后端返回的，且界面用的是框架，压根没有特殊的 css name。那么你将无物可搜！

另外的办法就是用很难用的 Vue Devtools 一层一层的点，去寻找对应的组件，然后再去代码里去按对应的层级结构去找到对应的组件界面！

这个方法也不是不好，就是有两点：

  1. Vue Devtools 不是一般的难用，且点来点去，有时候也很难找到对应的组件 image.png

  2. 需要去理解代码，看路由找到主页，然后一层一层的去找

2026/1/16 补充

现在新的vite项目可以直接安装更好用的 Vite Plugin Vue DevTools，直接嵌在代码里，而不是浏览器，可以实现 Code Inspector 的全部功能，所以就不推荐了！

老的项目才推荐！

其次，如果用的新的开发软件，也不是很支持，因为虽然按照 Code Inspector 最下面的配置，也能让其跳转，但是并不是很正确，没有跳转到对应的行、列！

具体原因如下：

image.png

怎么判断有没有CLI功能

image.png

Mac是别的

image.png

Code Inspector 介绍

现在，Code Inspector 将解决你的痛点！

image.png

使用

Code Inspector 官网挺清楚的：inspector.fe-dev.cn/ ，这里就是菜鸟再啰嗦一下了。

菜鸟用的vue，所以只用vue为例子！

安装

npm install code-inspector-plugin -D

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 = {
  // ...other code
  chainWebpack: (config) => {
    config.plugin('code-inspector-plugin').use(
      codeInspectorPlugin({
        bundler: 'webpack',
      })
    );
  },
};

快捷键

1、在页面上按住组合键时，鼠标在页面移动即会在 DOM 上出现遮罩层并显示相关信息，点击一下，编译器就会自动跳转到对应文件，并将光标定位到元素对应的代码位置。 (Mac 系统默认组合键是 Option + Shift；Window 的默认组合键是 Alt + Shift)

注意：

编译器会跳转，并提示你，但是并不会自动打开，别以为没生效。

2、手机端没有快捷键，所以需要给插件参数中配置 showSwitch: true，会在页面显示一个代码审查开关按钮，点击可切换代码审查模式开启/关闭，代码审查模式开启后直接点击Dom即可（只能一次，后续还要再点一下才行）。

注意：

菜鸟只用电脑使用了showSwitch: true，没有使用手机实验过，可能有问题，建议大家官网找答案！

可能的问题

image.png

vite 解决办法

export default defineConfig(({ command, mode }) => {
  return {
    plugins: [
      codeInspectorPlugin({
        bundler: 'vite',
        dev: command === 'serve' // 自己判断是否开启
      })
    ],
  }
})

如果你用的是别的编译器

参考：inspector.fe-dev.cn/guide/ide.h…

假如你使用的是最新的Trae，Code Inspector暂时没有适配这个的editor，那么你可以直接

image.png

路径直接桌面：

右键编译器图标 --> 点击属性 --> 点击快捷方式 --> 复制目标 即可！

avatar
文章
阅读
粉丝