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

PBitW
1,013 阅读4分钟

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

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

一般的做法都是找到 关键文字 / 特殊的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 了！

老的项目才推荐 Code Inspector，老的项目配置好后，Code Inspector 也只能跳转到文件，不能跳转到具体行、列，不如 Vite Plugin Vue DevTools b1d60190-46ec-4ae6-8bbf-77338b0b1555.png

Vite Plugin Vue DevTools

如果用的新开发软件，可以按照下面的配置，让vueTools正确跳转！

注意

现在Trae也被支持了，可以访问github.com/zh-lx/launc…，看自己的编译器有没有被支持，不支持才用下面的！

不支持，如何正确跳转？

第一步，在.env.local中加上：

VITE_LAUNCH_EDITOR="f:\proGitLab\bnlims\trae-shim.cmd"

第二步，在项目下创建上面的文件trae-shim.cmd，以Trae为例：

@echo off
setlocal

set "traePath=D:\Users\Administrator\AppData\Local\Programs\Trae CN\bin\trae-cn.cmd"
set "file=%~1"
set "line=%~2"
set "col=%~3"

if "%line%"=="" (
  "%traePath%" "%file%"
) else (
  if "%col%"=="" (
     "%traePath%" -g "%file%:%line%"
  ) else (
     "%traePath%" -g "%file%:%line%:%col%"
  )
)

第三步，修改vite.config.js

import vueDevTools from "vite-plugin-vue-devtools";

export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd());

  return {
    base: env.VITE_APP_ENV === "prod" ? "/" : "/",
    plugins: [
      createVitePlugins(env, command === "build"),
      vueJsx(),
      vueDevTools({
        launchEditor: env.VITE_LAUNCH_EDITOR ?? "code"
      }),
    ],
    build: {
      sourcemap: true
    },
    resolve: {
      alias: {
        // 设置路径
        "~": path.resolve(__dirname, "./"),
        // 设置别名
        "@": path.resolve(__dirname, "./src")
      },
      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]
    },
    // vite 相关配置
    server: {}
  };
});

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
文章
阅读
粉丝