mac从零开始安装react-devtools

LiaoJIE210

已于 2022-09-08 18:36:17 修改

阅读量607

点赞数

分类专栏： React 文章标签： react

于 2022-09-06 23:23:54 首次发布

本文链接：https://blog.csdn.net/LiaoJIE210/article/details/126731194

版权

本文详细介绍了在Mac上从零开始安装react-devtools的步骤，包括注册GitHub账号、安装brew、npm、yarn，从GitHub获取react，并解决在安装过程中遇到的electron相关问题，最后讲解如何将react-devtools添加到Google浏览器中。

摘要由CSDN通过智能技术生成

mac从零开始安装react-devtools

1.GitHub账号注册
2.安装brew
3.安装npm
4.安装yarn
5.GitHub上的react
6.添加到google浏览器
我生成的插件链接

1.GitHub账号注册

GitHub账号和添加了SSH key（这个百度一下哈）

2.安装brew

直接使用brew官网命令行报错，好奇自己去试～
换国内源，不说就是最香，过程中文提示找到亲妈的感觉！

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

3.安装npm

brew install node
#Error: Command failed with exit 128: git
#出现上面问题 brew -v 查看问题
#To add an exception for this directory, ca

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LiaoJIE210

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mac从零开始安装react-devtools

安装react-devtools
复制链接

扫一扫

专栏目录

MAC上安装React教程

rookieniche的博客

04-17

745

React是由Facebook开发的用于构建用户界面的JavaScript库，采用组件化开发模式和基于声明式编程的方式来描述UI，可以提高代码可维护性和重用性。同时，React使用Virtual DOM技术来优化DOM操作的性能，适用于开发大规模的Web应用程序。

react-devtools.zip

06-05

这个“react-devtools.zip”文件包含了手动编译版的React DevTools，适用于离线安装在Chrome浏览器的扩展程序上。在详细解释React DevTools之前，首先需要了解React，这是一个由Facebook开发并维护的JavaScript库...

参与评论您还未登录，请先登录后发表或查看评论

React-devtools-3.6.0.zip（最新版chrome的React插件）

07-28

chrome谷歌浏览器，打开空白页，地址栏chrome://extensions/打开扩展程序页面（开发者模式），将下载的React-devtools-3.6.0.zip拖拽到该页面，安装成功。

Mac安装react devtools调试工具

月下lk山人的博客

03-10

907

1、下载react-devtools包，地址： https://github.com/facebook/react-devtools/tree/v3 2、进入react-devtools-3目录，安装依赖： npm install 打包扩展程序： npm run build:extension:chrome 3、Chrome添加扩展程序 chrome://extensions/ 打开Chrom...

ReactNative进阶（三十三）：Mac 下 homebrew 的安装和 brew 命令的使用_wget 未指定 url 用法 wget [选项]

最新发布

2401_84438488的博客

05-08

697

函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；它提倡着纯函数 / 函数复合 / 数据不可变，谨慎对待函数内的状态共享 / 依赖外部 / 副作用；

MACOS安装react-devtools和固定常用工具栏

weixin_72459962的博客

05-20

310

react开发工具安装详细过程

【React-DevTools】MAC 版浏览器开发者调试工具 React-DevTools插件的安装

qiqizgl777的博客

03-24

1305

打开react-devtools-3/shells/chrome/build/unpacked直接添加unpacked文件夹。注意：这两个命令一定要在react-devtools-3的根目录下使用，不然会出现错误。在根目录下找到package.json文件。可以看到打包扩展程序的命令。

安装 react-devtools

AvrilML的博客

03-05

386

去git上下载react-devtools文件到本地，下载地址： https://github.com/facebook/react-devtools ；可以直接下载zip安装包解压，或者通过git clone来将项目拷贝到本地git clone https://github.com/facebook/react-devtools.git 进入react-devtools文件夹，用npm...

react-devtools 最新插件

03-12

react-devtools-3.zip

11-25

在这个“react-devtools-3.zip”压缩包中，包含的是React DevTools的某个版本，可能是通过Git下载的方式获取的，以解决2019年11月期间部分用户遇到的下载问题。安装React DevTools是每个React开发者必须掌握的技能...

React devtools最新

01-11

eact React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。

MAC上安装react DevTools调试工具

baidu_25292801的博客

05-12

204

下载安装包：https://github.com/facebook/react-devtools/tree/v3 解压后，进入到react-devtools-3文件夹下，进行npm install 安装然后打包扩展程序：npm run build:extension:chrome chrome添加扩展程序打开链接：chrome://extensions/ 打开开发者模式选择加载已解压的程序选择本地文件react-devtools-3/shells/chrome/build/unp

Mac系统Chrome浏览器安装React DevTools调试工具

Appleyk的专栏

11-10

1361

一、下载官网地址：https://github.com/facebook/react-devtools 使用Sourcetree克隆react-devtools-master文件夹到本地二、npm安装依赖 shift+command+G --》（快捷键）定位到master所在的目录 ...

react devtools 插件安装

sdaulee的博客

10-28

6654

react devtools 插件下载好后，打开谷歌浏览器的扩展程序，把解压的crx文件拖进来，确认添加即可

在mac系统的Chrome中安装React Devtools调试工具

艾瑞-Arin

11-13

2590

这里写自定义目录标题1、下载React Devtools2、安装依赖包3、添加扩展程序 1、下载React Devtools 首先到github上下载react-devtools文件到本地，地址https://github.com/facebook/react-devtools 使用v3分支 2、安装依赖包进入到react-devtools-3目录，进行安装依赖 3、添加扩展程序安装成功...

Mac下react安装

weixin_45996866的博客

12-04

1713

检查node是否安装没有安装可到官网进行下载 Node.js 安装完成后在终端输入npm -v检查是否安装完成安装react 设置npm源 npm config set registry https://registry.npm.taobao.org --global npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/etc npm ERR! errno -13 npm ERR! Error: EAC..

React Native Mac环境搭建

热门推荐

空杯子

06-03

1万+

这里只介绍Mac 上的环境搭建，其他环境搭建请参考： http://facebook.github.io/react-native/docs/getting-started.html 。上面有所有环境搭建。1、安装Homebrew安装Homebrew是为安装Node.js做前提准备。安装命令:/usr/bin/ruby -e "$(curl -fsSL https://raw.github

使用React构建简单项目步骤(Mac 环境)

张伯毅的专栏

10-16

1480

1.准备安装环境 2.create-react-app 工具 3.目录说明 4.增加一个新的 React组件 5.弹出配置文件 React是一个 JavaScript语言的工具库，在这个 JavaScript工具铺天盖地的时代，没有意外，你需要安装 Node.js, React 本身并不依赖于 Node.js，但是我们开发中用到的诸多工具需要 Node.js 的支持。 ...

react-devtools安装教程

06-28

### 回答1： 1. 首先，你需要在你的项目中安装 React 开发工具。你可以通过运行以下命令来安装它： ``` npm install -g react-devtools ``` 2. 安装完成后，你可以通过以下命令来启动 React 开发工具： ``` react-devtools ``` 3. 如果你使用的是 Chrome 浏览器，你还可以通过以下步骤来安装 React 开发工具的 Chrome 扩展程序： - 打开 Chrome 浏览器，进入 Chrome 网上应用店。 - 在搜索框中输入“React Developer Tools”。 - 点击“添加至 Chrome”按钮，等待安装完成。 - 安装完成后，你可以在 Chrome 浏览器的开发者工具中找到 React 开发工具的选项卡。 4. 安装完成后，你可以在你的 React 应用程序中使用 React 开发工具来调试和分析你的组件。 ### 回答2： React DevTools是React官方推出的调试工具，它可以帮助开发人员更方便地调试React应用程序。安装React DevTools非常简单，下面是安装步骤。第一步：准备工作首先，我们需要在项目中安装React，由于React是通过npm包被安装，因此需要在项目中运行以下命令进行安装： ``` npm install react ``` 接着，我们需要在项目中安装React DevTools。React DevTools是一个Chrome浏览器的扩展程序，因此需要在Chrome浏览器中进行安装。第二步：安装React DevTools 在Chrome浏览器中搜索React DevTools，然后找到它的官方扩展程序页面。在页面中，我们可以看到添加到Chrome的按钮。点击这个按钮，Chrome浏览器就会自动下载并安装React DevTools。安装完成后，我们可以在Chrome浏览器的扩展程序中看到React DevTools的图标。这个图标就是我们调试React应用程序的入口。第三步：调试React应用程序要使用React DevTools调试React应用程序，我们需要先启动React应用程序。在应用程序中，点击浏览器地址栏左侧的React图标，就可以打开React DevTools面板。在面板中，我们可以看到所有React组件的结构和状态。我们可以查看组件的props、state、context、refs，也可以在控制台中进行组件的调试。总之，使用React DevTools可以给React开发带来很大的便利，可以帮助开发人员更好地调试React应用程序。 ### 回答3： React DevTools是React开发中重要的调试工具之一，它能够帮助开发者快速诊断和调试React代码。在本篇文章中，我们将会提供React DevTools的安装教程，帮助大家快速上手。安装流程： 1. 打开Chrome浏览器 2. 进入Chrome Web Store，搜索React DevTools 3. 安装React DevTools插件 4. 安装完成后，在Chrome浏览器工具栏中找到“React DevTools”图标。 5. 点击“React DevTools”图标，打开开发者工具。安装完成后，我们可以采用以下步骤测试是否成功安装React DevTools： 1. 打开一个React应用程序，例如一个React页面。 2. 打开Chrome浏览器开发者工具 3. 点击“React”选项卡，在“React DevTools”中可以看到React组件的树形结构，并可以针对每个组件进行诊断和调试。 React DevTools的优点： 1.可视化组件树形结构，快速定位React组件的问题。 2.元素检查器，可快速查看组件的属性值。 3. 支持多种React版本，包括React Native。 4. 支持调试React Hoc、Context、组件性能等问题。 5. 增强了调试效率，提高了工作效率。总结： React DevTools是一个非常强大的React调试工具，为React开发提供了很大的便利性。我们可以通过以上步骤轻松安装React DevTools，并在React开发中快速诊断和调试React代码。同时，我们也需要注意安全性，只在开发阶段安装使用，不要滥用浏览器插件，避免数据泄露。