Skip to main content

One post tagged with "Webpack"

View All Tags

Code inspector 代码定位的插件原理是什么？

· 4 min read

Code Inspector 是一款 IDE 自动跳转插件，让你在浏览器中点击元素就能直接跳转到对应的源码位置。核心原理分为 3 步：

  1. 编译期插桩：打包时用 AST 解析，给每个 DOM 元素注入源码位置属性

  2. 运行时监听：浏览器端监听快捷键+点击，从 DOM 取出埋点信息

  3. 本地服务调度：向本地服务发送请求，调用 IDE 命令打开文件并定位

纯编译层实现，零业务代码侵入，兼容 Vue/React/原生，适配主流编辑器。