当前位置：首页 > news >正文

【前端Skill】点击目标元素定位跳转IDE中的源代码

news 2025/5/14 5:00:22

参考：https://juejin.cn/post/7326002010084311079

快手开源项目：

https://github.com/zh-lx/code-inspector

目前在umi项目中用到

记录一下umi项目中如何使用

安装

npm i code-inspector-plugin -D --registry=https://registry.npmmirror.com/

配置

注意：动态引入时，要用解构的方式

Object [Module] {
CodeInspectorPlugin: [Function: y],
codeInspectorPlugin: [Function: y]
}

export default defineConfig({…..chainWebpack(memo) {if (process.env.NODE_ENV === 'development') {// 调试环境 动态引入code-inspector-pluginconst { codeInspectorPlugin } = require('code-inspector-plugin');memo.plugin('code-inspector-plugin').use(codeInspectorPlugin({bundler: 'webpack',}));}},……
});

使用

按住 shift + option + 点击目标元素

插件实现原理解析

详见：

https://blog.csdn.net/xgangzai/article/details/145526596

https://juejin.cn/post/7288238328381587475#heading-4

code-inspector 源码浅析 - 技术栈

查看全文

http://www.mrgr.cn/news/99326.html