一键跳转组件所在的文件与具体行数，提升排查效率，分享几个 React Developer Tools 使用小技巧

壹 ❀ 引

React Developer Tools对于很多开发同学可能就是一个检查组件props传递对不对的工具，但事实上它的功能比我们想象的强大。比如我们日常排查问题，常常会遇到想知道某个页面某个组件是在哪个文件的第几行定义的。常规做法自然是搜索组件名，结合文件名称粗略定位，但其实React Developer Tools就能非常方便做到这一点，先看一眼效果图：

上图我选择了select组件，点击插件的open in editor后插件自动帮我打开了vscode且定位到了使用这个组件的具体行数（注意找的是使用这个组件的地方，而不是定义这个组件的地方），大概效果就是如此，在对于复杂且庞大的项目，这个操作真的能省去不少时间。

贰 ❀ 简单配置

有同学可能打开插件，然后发现为啥自己没open in editor这个按钮。对此我们只需要做两个操作，第一保证你的插件版本够新，目前我的版本是4.22.0，大家可以在管理扩展程序找到此插件，点击详情进行更新。

之后我们只需要在插件的设置中找到Components下的Open in Editor Url填入vscode://file/{path}:{line}即可（没错，就是它的placehoder），这时候你再选择组件，就会发现多了open in editor的按钮。

注意，目前此功能只能结合vscode使用，使用其它编辑器的同学可能需要等后续更新。

叁 ❀ 其它小技巧

叁 ❀ 壹 快速定位组件所在的DOM节点

介绍完跳组件的功能，简单说说其余几个也非常实用的功能，比如那个小眼睛的按钮，点击一下能帮你直接跳转所选中组价的DOM节点，在有时候修改组件样式做定位时，这个功能找DOM非常方便。

叁 ❀ 贰 控制台查看完整的组件信息

其实除了上面跳转编辑器快速定位使用组件的地方，还有一种笨方法，也能让我们知道这个组件是在哪个使用的，如下图：

选择组件，点击那个像蟑螂一样的图标，你会发现组件的props，当前功能使用这个组件的的文件位置信息，第几行第几列其实也能看到，肯定没有上面直接跳转方便，但也能提供部分帮助。

叁 ❀ 叁 查看某个组件在哪创建

上面说了我们想看这个组件是在哪用的，其实有时候我们也需要知道这个组件在哪个文件创建的。常规做法肯定是直接搜组件名，找同名的文件即可，但其实借用插件也能很方便做到，如下图：

上图我想知道Count组价是在哪个文件创建的，通过< >这个按钮直接跳转Source就是这个组件，然后复制绝对路径或者文件名，再去编辑器搜索即可。

除此之外还能根据$0.__来找到FiberNode，从而帮助我们获取组件的props以及组件创建、使用的文件，前提是你得选中组件对应的DOM，而正好小眼睛按钮已经能做到这一点。

在输入$0.__之后会有智能提示，大家可以看到下面的输出，选择输出FiberNode的回车即可，然后在_debugOwner中可以看到使用这个组价使用的位置信息，在_debugSource中可以看到这个组件定义的位置信息。

叁 ❀ 肆 控制台执行组件的props

我们排查客户问题，常遇到因为代码压缩不好定位代码具体位置，不方便断点，但是又想知道当前上下文情况下某个组件的方法到底是什么代码，以及执行这个方法得到的结果对不对，插件依旧能做到这一点：

比如Count组件接受了一个名为sayName的方法，通过这种做法我们能看到这个方法代码的全貌，以及在控制台调用它。某些时候，我们也能根据这个操作，比如函数内部的特殊的代码反向去定位代码所在的文件，总之也非常使用。

另外，本文展示所使用的项目来源自create react app，如果做了相同的配置但依旧没出现跳编辑器的按钮，可能跟打包工具配置有关，比如_debugSource输出为null也跟这个有一定关系等，关于插件一些小技巧就介绍到这，本文结束。