最近在折腾一个大型React项目时，频繁需要找到某个组件的具体代码位置。平时用React Developer Tools只能看组件树和props，真要修改代码还得去搜索文件名，效率很低。偶然发现了React Inspector这款Chrome插件，简直像给开发流程装了火箭助推器——按下Ctrl+Shift+X（Mac用Command+Shift+X），鼠标悬停在哪，它就自动帮你打开对应的源文件并跳转到组件定义行。

核心原理与门槛

它底层利用了React Developer Tools挂在window上的__REACT_DEVTOOLS_GLOBAL_HOOK__，直接读取React Fiber中的源码位置信息。这意味着你必须：

  • 已安装React Developer Tools（必备依赖）
  • 页面必须是development build（生产环境被压缩的代码不包含源码映射）
  • 源码存储在本地磁盘（远程文件目前不支持）

一旦满足条件，使用体验丝滑得不像一个第三方插件。对比之前尝试过的React Sight（只能可视化组件树）或者手动Ctrl+Shift+F全局搜索，React Inspector的“悬浮即开”大大缩短了从页面元素到IDE的距离。

配置与高级玩法

默认打开编辑器是VSCode（通过vscode://协议），但你可以在扩展选项页面自定义Open in Editor URL，换成WebStorm、Sublime甚至terminal命令都行。我把它改成了webstorm://open?file={file}&line={line}，配合WebStorm的远程开发功能也完美兼容。

注意它只能定位类组件和函数组件的定义行，如果是通过高阶组件或HOC包装过的组件，它会跳到包装函数而非实际业务代码。不过瑕不掩瑜，对于80%的日常开发场景已经足够。

开源与社区

项目在GitHub上完全开源（仓库名hand-dot/react-inspector），代码写得相当清晰。如果你遇到bug或想添加新特性，可以直接提PR。相比另一个同类插件React DevTools Source Panel（已年久失修），React Inspector保持了足够活跃的维护。

如果你也是在React开发中频繁穿梭于浏览器和编辑器之间，这款插件绝对值得收入囊中——它不抢眼，但用过的都回不去。