如何调试React应用程序

遇到问题时可以用来调试React应用的一些工具

您可以用来调试React应用程序的最佳工具是利用React开发人员工具。这是一个浏览器扩展，使检查和分析React应用程序变得轻而易举。

我写了一篇专门针对他们的博客文章，请查看：React开发人员工具。

除了对构建Next.js应用程序必不可少的React Developer Tools之外，我还要强调两种调试Next.js应用程序的方法。

首先很明显console.log()和所有其他控制台API工具。 Next应用程序的工作方式将使日志语句在浏览器控制台中或在您启动Next的终端中使用以下方式工作：npm run dev。

特别是，如果页面是从服务器加载的，则将URL指向服务器时，或者单击刷新按钮（cmd / ctrl-R），则任何控制台日志记录都会在终端中发生。

通过单击鼠标进行的后续页面转换将使所有控制台日志记录都发生在浏览器内部。

请记住，如果您对丢失日志感到惊讶。

另一个必不可少的工具是debugger陈述。将此语句添加到组件将使浏览器暂停呈现页面：

我的最佳建议是学习如何使用这些工具。调试JavaScript的权威指南。

真的很棒，因为现在您可以使用浏览器调试器检查值并一次一行运行您的应用程序。

如果使用的是Next.js，则还可以使用VS Code调试器来调试服务器端代码。我提到了这项技术，本教程进行设置。

免费下载我的反应手册