使用 React 开发者工具检查 React 组件，编辑 属性 和 状态，并识别性能问题。
¥Use React Developer Tools to inspect React components, edit props and state, and identify performance problems.
你将学习到
-
如何安装 React 开发者工具
¥How to install React Developer Tools
浏览器扩展
¥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 DevTools，它是深度集成 React Developer Tools 的内置调试器。所有功能与浏览器扩展的工作方式相同，包括原生元素高亮和选择。
¥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.
¥Learn more about debugging in React Native.
对于早于 0.76 的 React Native 版本，请按照上面的 Safari 和其他浏览器 指南使用 React DevTools 的独立版本。
¥For versions of React Native earlier than 0.76, please use the standalone build of React DevTools by following the Safari and other browsers guide above.