使用 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 开发者工具也可用于检查使用 React Native 构建的应用。
¥React Developer Tools can be used to inspect apps built with React Native as well.
使用 React 开发者工具最简单的方法是全局安装它：
¥The easiest way to use React Developer Tools is to install it globally:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools接下来从终端打开开发者工具。
¥Next open the developer tools from the terminal.
react-devtools它应该连接到任何正在运行的本地 React Native 应用。
¥It should connect to any local React Native app that’s running.
如果开发者工具在几秒钟后未连接，请尝试重新加载应用。
¥Try reloading the app if developer tools doesn’t connect after a few seconds.