LocatorJS ：一键跳转源码，极致提升前端调试效率LocatorJS一键跳转源码，极致提升前端调试效率 Locat

LocatorJS一键跳转源码，极致提升前端调试效率

在日常前端开发中，随着项目规模的不断增大，组件数量日益庞多，如何快速定位某个页面元素对应的源码，成为开发效率的关键痛点。今天我们重点推荐一款优秀的工具 —— LocatorJS，它能够让你在浏览器中通过简单的点击，直接跳转至 IDE 中对应的源码位置，从而大幅缩短查找时间，提高调试效率。

LocatorJS 介绍

LocatorJS 主要以浏览器插件的形式呈现，支持 Chrome、基于 Chromium 的 Edge、Opera 以及 Firefox 等浏览器。安装插件后，只需在开发环境下启动对应项目，再通过简单的鼠标操作（例如按住特定的修饰键后点击页面元素），即可自动触发跳转，快速在本地编辑器（如 VS Code）中打开该组件的源码文件。

其核心优势包括：

跨框架支持：不仅支持 React，还兼容 Solid、Preact、Vue 和 Svelte；
零代码侵入：作为浏览器插件使用，无需修改项目源代码；
高效跳转：利用组件内部的调试信息（如 Babel 插件注入的 _debugSource），实现精准定位；
便捷易用：简单的操作方式和直观的用户体验，降低了调试门槛。

使用参考

项目中使用 vscode + React + babel(其它配置参考官网)

安装浏览器插件
在 Chrome 应用商店搜索“LocatorJS”，下载安装对应的插件。

插件下载地址：LocatorJS – Chrome 网上应用店

配置 Babel 插件
为确保调试信息正确注入，在开发环境下建议在 Babel 配置中启用 @babel/plugin-transform-react-jsx-source，@babel/plugin-transform-react-jsx-self" 插件。如果使用的是 Create React App 等脚手架，通常默认已经启用。示例配置（若需要手动配置时）：

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "development": true
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-react-jsx-self",  // pnpm,npm安装，这里就不再赘述
    "@babel/plugin-transform-react-jsx-source" 
  ]
}

Alt + 鼠标左键选中网页元素，弹出对话框，跳转代码对应位置

速速体验，节约的时间猛猛摸鱼！！