官網
文檔
安裝
- 使用 npm 安裝
npm install code-inspector-plugin -D
- 使用 yarn 安裝s
yarn add code-inspector-plugin -D
- 使用 pnpm 安裝
pnpm add code-inspector-plugin -D
工程中引用
- 在 webpack 中使用：
// webpack.config.js
const { CodeInspectorPlugin } = require('code-inspector-plugin');
module.exports = () => ({
plugins: [
CodeInspectorPlugin({
bundler: 'webpack',
}),
],
});
- 在 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 = {
configureWebpack: {
plugins: [
CodeInspectorPlugin({
bundler: 'webpack'
})
]
}
}
頁面使用
在頁面上按住組合鍵時，鼠標在頁面移動即會在 DOM 上出現藍色半透明遮罩層并顯示相關信息，點擊一下將自動打開 IDE 并將光標定位到元素對應的代碼位置魏保。 (Mac 系統(tǒng)默認組合鍵是
Option + Shift；Window 的默認組合鍵是Alt + Shift摸屠，瀏覽器控制臺會輸出相關組合鍵提示)
演示.png
注意
僅當你的電腦為 Mac 且使用 vscode 作為 IDE 時需要配置此步谓罗，電腦為 Windows 或者使用其他 IDE 可以跳過此步。
在 VSCode 中執(zhí)行
command + shift + p命令, 搜索 指令并點擊Shell Command: Install 'code' command in PATH
vscode 配置.png
vscode 配置成功.png
