使用 React 开发者工具检查 React 组件，编辑 属性 和 状态，并识别性能问题。
🌐 Use React Developer Tools to inspect React components, edit props and state, and identify performance problems.
你将学习到
- 如何安装 React 开发者工具
浏览器扩展
🌐 Browser extension
调试使用 React 构建的网站最简单的方法是安装 React 开发者工具浏览器扩展。它可用于几种流行的浏览器：
🌐 The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers:
现在，如果你访问一个用 React 构建的网站，你会看到_组件_和_分析器_面板。
🌐 Now, if you visit a website built with React, you will see the Components and Profiler panels.
Safari 和其他浏览器
🌐 Safari and other browsers
对于其他浏览器（例如 Safari），请安装 react-devtools npm 包：
🌐 For other browsers (for example, Safari), install the react-devtools npm package:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools接下来从终端打开开发者工具：
🌐 Next open the developer tools from the terminal:
react-devtools然后通过将以下 <script> 标签添加到你网站的 <head> 开头来连接你的网站：
🌐 Then connect your website by adding the following <script> tag to the beginning of your website’s <head>:
<html>
<head>
<script src="http://localhost:8097"></script>现在在浏览器中重新加载你的网站，以便在开发者工具中查看它。
🌐 Reload your website in the browser now to view it in developer tools.
移动端（React Native）
🌐 Mobile (React Native)
要检查使用 React Native 构建的应用，你可以使用 React Native 开发工具，这是内置的调试器，深度集成了 React 开发者工具。所有功能的工作方式与浏览器扩展完全相同，包括原生元素高亮和选择。
🌐 To inspect apps built with React Native, you can use React Native DevTools, the built-in debugger that deeply integrates React Developer Tools. All features work identically to the browser extension, including native element highlighting and selection.
对于早于 0.76 版本的 React Native，请通过遵循上面的 Safari 和其他浏览器 指南使用 React DevTools 独立版本。