React 开发者工具

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

React Developer Tools extension

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 Developer Tools standalone

移动端(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.

了解有关在 React Native 中调试的更多信息。

¥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.