React 开发者工具

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

浏览器扩展

调试使用 React 构建的网站的最简单方法是安装 React 开发者工具浏览器扩展。它支持几个流行的浏览器：

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

对于其他浏览器（例如 Safari），请安装 react-devtools npm 包：

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

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

react-devtools

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

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

现在在浏览器中重新加载你的网站，以便在开发者工具中查看它。

要检查使用 React Native 构建的应用，你可以使用 React Native DevTools，这是一个与 React 开发者工具深度集成的内置调试器。所有功能都与浏览器扩展完全相同，包括原生元素的高亮和选择。

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