前几天推荐的 react-dev-inspector
可以说是深受大家喜爱,但是它的配置比较繁琐,需要三个部分:babelmidwareidea
的配置比较繁琐!
今天推荐一个只需要一步配置就可以搞定的插件:Code Inspector
!
Code Inspector
是一款通过点击页面 DOM
元素,自动打开 IDE
并定位到源代码位置的开发辅助工具。它的特点是:零侵入、开发专用、兼容广、配置简单。
执行:
npm install code-inspector-plugin -D
在打包工具配置文件中引入插件(支持 vite、webpack、rspack、esbuild
等):
// vite.config.ts
import { codeInspectorPlugin } from 'code-inspector-plugin';
export default {
plugins: [
codeInspectorPlugin({
bundler: 'vite',
editor: 'code',
showSwitch: true,
}),
],
}
方法一:快捷键模式
Option + Shift
Alt + Shift
方法二:页面按钮切换
showSwitch: true
后页面会出现按钮vite、webpack、rspack、esbuild、farm、nextjs、nuxt、umijs、rsbuild
vue、react、preact、solid、qwik、svelte、astro
如果你是 微前端, 那么主应用 + 子应用都要加插件,另外如果无法打开编辑器,
在根目录下新建 .env.local
文件,设置 CODE_EDITOR=xxx
,如:
CODE_EDITOR=/home/xxx/.vscode-server/bin/xxx/remote-cli/code
这个值是应用的启动地址,具体看这里:https://inspector.fe-dev.cn/guide/ide.html#%E5%85%B6%E4%BB%96-ide
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有