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

Question

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

Answer 1

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

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

   • 铬
   • 火狐

2. 找到组件

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

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

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

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中为您的开发人员工具安装反应依赖项.

您也可以使用标准的chrome调试器而不使用React依赖项,这也很有效.一个很好的Chrome调试教程是这样的:https://developers.google.com/web/tools/javascript/index？hl = en

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

我希望这有助于一点点快乐的编码!