你不知道的React Developer Tools，20 分钟带你掌握 9 个 React 组件调试技巧( 三 ) _生活百科

到下图位置即可：

文章插图
注意，此配置因项目复杂度可能有失效的情况，目前我测试了 windows 以及 mac 双环境下 create-react-app 项目均能正常跳转，mac 用户请保证vscode安装目录在application 下，而不是下载目录中，这能减少很多不必要的麻烦。
方式三，同样通过控制台输出组件信息，可以看到使用的文件以及行数都有输出，如下：

文章插图
贰 ? 柒过滤无意义组件层让组件结构更清晰事实上，组件开发因为ref以及context等等的嵌套，会让插件中的组件结构过于臃肿，而这些层级往往是你不需要关注的，因此你可以通过过滤配置来屏蔽一些无意义的层级，比如：

文章插图
贰 ? 捌了解组件无效渲染严重层度虽然目前项目还未对组件无效渲染提出要求，不过我们还是能通过如下配置知晓每个组件的渲染情况，如下：

文章插图
当开启渲染高亮后，之后我们的每次操作，只要涉及到 render 的组件都会有一个颜色的框框标注出来，而渲染的维度涉及两个方面：

颜色，只有绿色或者黄色，绿色表示渲染次数很少，颜色越偏黄说明渲染越多。
框框持续时间，如果高亮迟迟不消失，也说明渲无效渲染持续非常久。

先了解这两点，至于如何排查无效渲染，我们另起一篇文章再说。
叁 ? 总那么到这里，我们基本介绍了 React Developer Tools 你可能会用到的所有场景以及技巧，我相信在掌握这些小技巧之后对于你未来的开发会有极大的帮助，而关于另一个工具Profiler 在性能优化篇我们再单独探讨，敬请期待。
【你不知道的React Developer Tools，20 分钟带你掌握 9 个 React 组件调试技巧】