创建react应用程序_如何调试React应用程序

创建react应用程序

The best tool you can use to debug a React application is to make use of the React Developer Tools. It’s a browser extensions that makes inspecting and analyzing React apps a breeze.

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

I wrote a blog post entirely dedicated to them, check it out: React Developer Tools.

我写了一篇专门针对他们的博客文章，请查看： React Developer Tools 。

In addition to the React Developer Tools, which are essential to building a Next.js application, I want to emphasize 2 ways to debug Next.js apps.

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

The first is obviously console.log() and all the other Console API tools. The way Next apps work will make a log statement work in the browser console OR in the terminal where you started Next using npm run dev.

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

In particular, if the page loads from the server, when you point the URL to it, or you hit the refresh button (cmd/ctrl-R), any console logging happens in the terminal.

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

Subsequent page transitions that happen by clicking the mouse will make all console logging happen inside the browser.

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

Just remember if you are surprised by missing logging.

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

Another tool that is essential is the debugger statement. Adding this statement to a component will pause the browser rendering the page:

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

My best advice to learn how to use those tools is contained in my definitive guide to debugging JavaScript.

关于如何使用这些工具的最佳建议，包含在我调试JavaScript的权威指南中 。

Really awesome because now you can use the browser debugger to inspect values and run your app one line at a time.

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

If you are using Next.js, you can also use the VS Code debugger to debug server-side code. I mention this technique and this tutorial to set this up.

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

翻译自: https://flaviocopes.com/react-debugging/

创建react应用程序