Code Inspector快速定位代码-摩杜云开发者社区

Code Inspector

点击页面上的 DOM 元素，它能自动打开 IDE 并定位到 DOM 对应源代码位置（网站：https://inspector.fe-dev.cn/）

1.安装

#npm
npm install code-inspector-plugin -D

#yarn
yarn add code-inspector-plugin -D

#pnpm
pnpm add code-inspector-plugin -D

Code Inspector快速定位代码_Code Inspector

2.配置

1. 配置打包工具

在 vite 中使用：

// vite.config.js
import { defineConfig } from 'vite';
import { CodeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  plugins: [
    CodeInspectorPlugin({
      bundler: 'vite',
    }),
  ],
});

在 webpack 中使用：

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

module.exports = () => ({
  plugins: [
    CodeInspectorPlugin({
      bundler: 'webpack',
    }),
  ],
});

2.配置 vscode 命令行工具

Windows 或者其他 IDE 可跳过，仅当你的电脑为 Mac 且使用 vscode 作为 IDE 时需要配置此步

在 VSCode 中执行 command + shift + p(mac) 或 ctrl + shift + p(windows) 命令, 搜索指令并点击 Shell Command: Install 'code' command in PATH

3.使用

方式一（推荐）

在页面上长按组合键时，鼠标在页面移动即会在 DOM 上出现蓝色半透明遮罩层并显示相关信息，点击一下将自动打开 IDE 并将光标定位到元素对应的代码位置。 (Mac 系统默认组合键是 Option + Shift；Window 的默认组合键是 Alt + Shift，浏览器控制台会输出相关组合键提示)

Code Inspector快速定位代码_Code Inspector_02

方式二

当插件参数中配置 showSwitch: true 时，会在页面显示一个代码审查开关按钮，点击可切换代码审查模式开启/关闭，代码审查模式开启后使用方式同方式一中按住组合键。当开关的颜色为彩色时，表示代码审查模式开启 Code Inspector快速定位代码_Code Inspector_03 ；当开关颜色为黑白时，表示代码审查模式关闭。

Code Inspector快速定位代码_Code Inspector_04

4.指定 IDE

支持自动识别的 IDE

Code Inspector快速定位代码_Code Inspector_05

5.API

import { CodeInspectorPlugin } from 'code-inspector-plugin';

CodeInspectorPlugin({
  bundler: 'vite',   //必传项，指定的打包工具类型，可选值有 vite / webpack / rspack
  showSwitch: false,//可选项,默认值为 false,是否在页面展示一个控制源码定位功能的开关
  hotKeys: ['altKey', 'shiftKey'],//可选项。默认值为 ['altKey', 'shiftKey'],触发源码定位功能的组合键
  autoToggle: true,//可选项。默认值为 true,点击触发源码定位功能跳转 IDE 后是否自动关闭开关
  needEnvInspector: false,//可选项。默认值为 false为 true 时，仅当 .env.local 文件存在且其包含 CODE_INSPECTOR=true 时插件生效。（主要是解决团队内有部分成员不想使用该插件的需求）
  hideConsole: false,//可选项。默认值为 false,默认情况下，插件在项目首次启动时在控制台打印一行按键提示，设置此项为 true 可禁用打印
});