美文网首页
第六篇 安装-React开发者工具

第六篇 安装-React开发者工具

作者: 深圳都这么冷 | 来源:发表于2023-02-03 08:54 被阅读0次

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 应用程序。

如果开发人员工具在几秒钟后仍未连接,请尝试重新加载应用程序。

学习更多关于React Native调试.

相关文章

网友评论

      本文标题:第六篇 安装-React开发者工具

      本文链接:https://www.haomeiwen.com/subject/albihdtx.html