React 开发者工具

React指南-教程：其他主题

使用 React 开发者工具检查 React 组件，编辑 props 和 state，并识别性能问题。

你将学习到

调试 React 构建的网站最简单的办法就是安装 React 开发者工具浏览器扩展。它可用于几种流行的浏览器：

现在，如果你访问一个用 React 构建 的网站，你将看到 Components 和 Profiler 面板。

为其他浏览器（比如，Safari），安装 react-devtools npm 包：

bash 复制代码

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

接下来从终端打开开发者工具：

bash 复制代码

react-devtools

然后通过将以下 <script> 标签添加到网站 <head> 的开头来连接你的网站：

html 复制代码

<html>
  <head>
    <script src="http://localhost:8097"></script>

现在在浏览器里刷新你的网站，你可以在开发者工具里查看它。

你可以使用 React Native DevTools 来检查 React Native 应用程序，它的内置调试器与 React Developer Tools 进行了深度集成。所有功能与浏览器扩展的工作方式相同，包括本机元素突出显示和选择。

对于 React Native 0.76 之前的版本，请按照上面的 Safari 和其他浏览器指南独立构建 React DevTools。

发现翻译问题或内容错误？请告诉我们。