One very useful tool we absolutely need to install when building a React application, like a Next.js application for example, is the React Developer Tools.
我们在构建React应用程序时绝对需要安装的一个非常有用的工具(例如Next.js应用程序)是React Developer Tools。
Available for both Chrome and Firefox, the React Developer Tools are an essential instrument you can use to inspect a React application.
React Developer Tools可同时用于Chrome和Firefox ，是您可以用来检查React应用程序的基本工具。
They provide an inspector that reveals the React components tree that builds your page, and for each component you can go and check the props, the state, hooks, and lots more.
他们提供了一个检查器，该检查器揭示了构建页面的React组件树，对于每个组件，您都可以检查道具，状态，钩子等等。
Once you have installed the React Developer Tools, you can open the regular browser devtools (in Chrome, it’s right-click in the page, then click Inspect) and you’ll find 2 new panels: Components and Profiler.
一旦安装了React Developer Tools，就可以打开常规的浏览器devtools(在Chrome中，右键单击页面，然后单击Inspect )，您会发现2个新面板： Components和Profiler 。
If you move the mouse over the components, you’ll see that in the page, the browser will select the parts that are rendered by that component.
如果将鼠标移到组件上，则会在页面中看到，浏览器将选择该组件渲染的部分。
If you select any component in the tree, the right panel will show you a reference to the parent component, and the props passed to it:
如果您在树中选择任何组件，则右侧面板将显示对父组件的引用以及传递给它的道具：
You can easily navigate by clicking around the component names.
您可以通过单击组件名称轻松浏览。
You can click the eye icon in the Developer Tools toolbar to inspect the DOM element, and also if you use the first icon, the one with the mouse icon (which conveniently sits under the similar regular DevTools icon), you can hover an element in the browser UI to directly select the React component that renders it.
您可以单击“开发人员工具”工具栏中的眼睛图标来检查DOM元素，如果您使用的是第一个图标(带有鼠标图标的图标，该图标通常位于类似的常规DevTools图标下)，则可以将元素悬停在浏览器用户界面以直接选择呈现它的React组件。
You can use the bug icon to log a component data to the console.
您可以使用bug图标将组件数据记录到控制台。
This is pretty awesome because once you have the data printed there, you can right-click any element and press “Store as a global variable”. For example here I did it with the url prop, and I was able to inspect it in the console using the temporary variable assigned to it, temp1:
这非常棒，因为一旦在其中打印了数据，就可以右键单击任何元素，然后按“存储为全局变量”。 例如，在这里我使用url prop做到了这一点，并且我可以使用分配给它的临时变量temp1在控制台中对其进行检查：
Using Source Maps, which are loaded by Next.js automatically in development mode, from the Components panel we can click the <> code and the DevTools will switch to the Source panel, showing us the component source code:
使用由Next.js在开发模式下自动加载的Source Maps ，从Components面板中单击<>代码，DevTools将切换到Source面板，向我们显示组件源代码：
The Profiler tab is even more awesome, if possible. It allows us to record an interaction in the app, and see what happens. I cannot show an example yet, because it needs at least 2 components to create an interaction, and we have just one now. I’ll talk about this later.
如果可能的话，“ 探查器”选项卡更加出色。 它使我们能够在应用程序中记录交互 ，并观察发生了什么。 我还不能显示一个示例，因为它至少需要2个组件才能创建交互，而现在只有一个。 稍后再说。
I showed all screenshots using Chrome, but the React Developer Tools works in the same way in Firefox:
我使用Chrome显示了所有屏幕截图，但是React Developer Tools在Firefox中的工作方式相同：
