使用 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.