快速开始
code-inspector-plugin
支持在以 webpack
、rspack
或 vite
作为打包器的项目中使用,支持 vue2/vue3/react/preact/solid
等框架,请参考如下的接入教程。
安装
- 使用 npm 安装:
perl
npm install code-inspector-plugin -D
- 使用 yarn 安装:
perl
yarn add code-inspector-plugin -D
- 使用 pnpm 安装:
perl
pnpm add code-inspector-plugin -D
配置
1. 配置打包工具
在 webpack 中使用:
js
// webpack.config.js
const { CodeInspectorPlugin } = require('code-inspector-plugin');
module.exports = () => ({
plugins: [
CodeInspectorPlugin({
bundler: 'webpack',
}),
],
});
在 vite 中使用:
js
// vite.config.js
import { defineConfig } from 'vite';
import { CodeInspectorPlugin } from 'code-inspector-plugin';
export default defineConfig({
plugins: [
CodeInspectorPlugin({
bundler: 'vite',
}),
],
});
在 rspack 中使用:
js
// rspack.config.js
const { CodeInspectorPlugin } = require('code-inspector-plugin');
module.exports = = {
// other config...
plugins: [
CodeInspectorPlugin({
bundler: 'rspack',
}),
// other plugins...
],
};
2. 配置 vscode 命令行工具
Windows 或者其他 IDE 可跳过
仅当你的电脑为 Mac 且使用 vscode 作为 IDE 时需要配置此步,电脑为 Windows 或者使用其他 IDE 可以跳过此步。
在 VSCode 中执行
command + shift + p
(mac) 或ctrl + shift + p
(windows) 命令, 搜索 指令并点击Shell Command: Install 'code' command in PATH
:如果出现如下弹窗,说明配置成功了:
使用
目前使用 DOM 源码定位功能的方式有两种:
方式一(推荐)
在页面上按住组合键时,鼠标在页面移动即会在 DOM 上出现蓝色半透明遮罩层并显示相关信息,点击一下将自动打开 IDE 并将光标定位到元素对应的代码位置。 (Mac 系统默认组合键是 Option + Shift
;Window 的默认组合键是 Alt + Shift
,浏览器控制台会输出相关组合键提示)
方式二
当插件参数中配置 showSwitch: true
时,会在页面显示一个代码审查开关按钮
,点击可切换代码审查模式
开启/关闭,代码审查模式
开启后使用方式同方式一中按住组合键。当开关的颜色为彩色时,表示代码审查模式
开启 ;当开关颜色为黑白时,表示
代码审查模式
关闭 。