源码快速定位工具 source-ref

背景

source-ref 是一款通过网页点击快速定位到源码的工具，用于解决从视觉上快速定位到所在源码具体位置。与现有的devtools(vue-devtools/react-developer-tools)的源码定位互补

UI 框架支持 React, Vue框架
打包工具支持 webpack,rollup, vite
跳转方式支持 vscode 打开, Github 打开

官方网站: https://sourceref.moonrailgun.com/
开源地址: https://github.com/moonrailgun/source-ref

演示

定位到 Github 源码

使用 vscode 打开源码

快速接入

以 react + webpack 为例:

npm install source-ref-runtime
npm install -D source-ref-loader

在 webpack.config.json 中, 处理 jsx 文件的 loader 的最下面插入source-ref-loader:

{
  test: /.tsx?$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'esbuild-loader',
      options: {
        loader: 'tsx',
        target: 'es2015',
      },
    },
    {
      loader: 'source-ref-loader',
    },
  ],
}

在入口文件处，插入:

import('source-ref-runtime').then(({ start }) => start())

打开项目，Alt(option in mac) + LMB(鼠标左键点击) 即可弹出选择框

更多示例见官网: https://sourceref.moonrailgun.com/

原理

打包阶段:

解析源码到 AST, 找到组件节点的开头部分插入当前所在位置信息
将处理好的 AST 转换回原来的代码形式

渲染阶段:

优化提示路径, 减少长路径带来的视觉污染(在 devtools)
快捷键点击 DOM 元素，弹出选择框。
点击选择节点，通过打开 vscode 注册的 URI Scheme 从网页打开一个文件并定位到具体行号和列号