React.js的任何好的调试教程

Question

我想知道是否有人可以建议一步一步的初学者教程如何调试React.js应用程序？我对React很新，现在最烦人的事情是控制台中出现了很多错误，但我不知道如何追溯它们。

Answer 1

很难描述调试“出现很多错误”的一般策略，因此我将引导您完成调试组件级错误的过程：

1. 为您选择的浏览器安装React dev工具扩展程序：

   • Chrome
   • Firefox

2. 找到组件

   我建议使用以下任一路径：

   2.A。从浏览器开发工具中打开React tab，然后输入底部搜索栏以按名称查找组件。

   2.b中。打开Elements tab，选择一些元素，然后切换回React。组件层次结构将被扩展，直到React组件与您在Elements中选择的DOM节点匹配。

3. 检查行为不正确的组件的状态和道具。

如果由于某种原因你不喜欢安装浏览器扩展，你可以抛出一个或多个debugger;语句来设置断点，这些断点将“暂停”你的应用程序的执行并让你检查调用堆栈，范围，以及这些方面的错误。

Answer 2

React在chrome dev工具中安装了自己的调试工具。它是目前调试反应应用程序的最合适的工具。它允许您添加断点，在开发工具中编辑道具并查看即时结果。一个很好的教程是https://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html，这是调试React的官方教程。您还可以下载扩展“React Developer Tools”，它将在chrome中为您的开发人员工具安装反应依赖项。

你也可以使用没有React依赖的标准chrome调试器，这也很有效。在Chrome中进行调试的一个很好的教程是：https://developers.google.com/web/tools/javascript/index?hl=en

主要问题是学习如何通过开发工具在代码中添加断点，并学习如何通过从中获得的响应来识别问题。最后一个教程向您展示了如何做到这一点。

我希望这有助于编写一些快乐的代码！