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

文章插图
贰 ? 肆 props 在线交互我们常常遇到某个组件的 props 传递没达到预期的情况，你需要排查某个属性是否达到了你想要的效果，这个时候在线修改 props 比你去改代码然后触发构建要快得多，比如我直接修改 Button 的 type 类型，然后你发现按钮背景色变了。

文章插图
类似的场景非常多，比如我们需要看遮罩层显示隐藏，让 list 下拉默认展示出来等等，我们都能通过此方法达到效果。
除了直接修改 props，我们还能把 props 保存到控制台操作，比如有时候我们没办法查看源码，但你又希望知晓某个方法的执行是否符合你的预期，这时候你能这么做：

文章插图
比如上图我并未点击按钮，单纯通过控制台执行了 setState 让数字增1 。
贰 ? 伍 2 种方式快速定位组件在哪个文件被创建。针对于找一个组件在哪，常见有两种场景：

某个组件可能有 bug，因此我想知道这个组件在哪定义方便去修改。
某个页面的组件有bug，怀疑是 props 传递有问题，因此我想知道在这个组件在哪里被使用。

我们先说怎么知道一个组件被定义在哪，方法 1 非常简单：

文章插图
第二种办法稍微麻烦点，我们能在控制台直接输出组件完整的信息，其中就包含组件声明的文件路径，具体操作如下：

文章插图
点击控制台输出组件信息的图标，点开 nodes ，点开__reactFiber 前缀，找到_debugSource即可。
贰 ? 陆 4 种方式快速定位组件在哪个文件被使用（精确到行）方式一，直接看 source 信息，它会直接告诉你在哪个文件的多少行：

文章插图

文章插图
方式二，一键自动打开 vscode 并跳转到对应行数，先看效果：

文章插图
有同学就说了，我怎么没这个图标按钮，其实只需要一个简单的配置就好了，大家复制 vscode://file/{path}:{line} 到下图位置即可：

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