React开发者工具
使用 React Developer Tools 检查 React 组件、编辑 props 和状态,并识别性能问题。
内容预告
- 如何安装React开发者工具
浏览器插件
调试使用 React 构建的网站的最简单方法是安装 React Developer Tools 浏览器扩展。 它适用于多种流行的浏览器:
现在,如果您访问一个使用 React 构建的网站,您将看到组件和分析器面板。

Safari和其他浏览器
对于其他浏览器(例如 Safari),安装 react-devtools npm 包:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools
接下来从终端打开开发者工具:
react-devtools
然后通过将以下 <script> 标记添加到您网站的 <head> 开头来连接您的网站:
<html>
<head>
<script src="http://localhost:8097"></script>
现在在浏览器中重新加载您的网站,以便在开发者工具中查看。

手机端 (React Native)
React Developer Tools 也可用于检查使用 React Native 构建的应用程序。
使用 React Developer Tools 最简单的方法是全局安装它:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools
接下来从终端打开开发者工具:
react-devtools
它应该连接到任何正在运行的本地 React Native 应用程序。
如果开发人员工具在几秒钟后仍未连接,请尝试重新加载应用程序。
网友评论