React 开发者工具

通过 React 开发者工具（React Developer Tools）可以检查 React components、编辑 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 开发者工具也可用于检查基于 React Native 构建的应用程序。

将 React 开发者工具安装到全局环境中是最简单的方式：

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

接下来打开终端（命令行）就可以使用开发者工具了。

react-devtools

该工具就可以连接到任何运行在本地机器上的 React Native 应用程序了。

如果开发者工具经过几秒后仍无法连接，请尝试重启应用程序。