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

allanGold2025-04-23 10:09

参考：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-plugin
            const { 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 源码浅析 - 技术栈