安装React developer tool避坑

本文档记录了在安装React Developer Tools过程中遇到的两个问题及其解决方案。首先,通过gitee下载并尝试npm安装时出现错误,删除node_modules后重试无效。其次,使用npm安装新下载的包时遇到URL类型不支持的错误。最后,通过切换到yarn进行安装和构建,成功打包并加载到Chrome扩展程序。总结建议:避免从gitee下载,使用yarn安装依赖,并提供了淘宝源切换步骤。


时间有限的童鞋直接看标题3 总结即可

问题1.This is probably not a problem with npm. There is likely additional logging output above.

我是使用gitee下载可扩展程序的包.

npm install # 安装所有的依赖插件没问题
npm run build:extension:chrome #打包项目生成扩展程序这就报标题中的错

科学搜索了一下说吧node_module文件夹删除,重新npm install一下就好了,然而我这没卵用。

问题2.npm ERR! code EUNSUPPORTEDPROTOCOL npm ERR! Unsupported URL Type “link:”: link:./scripts/eslint-rules

问题一解决不了,就放着。使用github下载可扩展程序的包.

npm install # 第一步都搞不定了

试了一推解决方案都不行,
找不出原因,然后我发现yarn是facebook的

yarn instll #嗯,可以了。能怎么办,没办法。
yarn build:extension #也没问题

这个时候github下载目录下多了shells -> chrome -> build -> unpacked文件夹。在google-更多-扩展程序中加载这个打包好的扩展程序即可。

3.总结

  • 不要从gitee下载React devtools
  • 不要使用npm安装依赖
  • 安装步骤
    1 下载包
    2 进入包,从包的文件目录中cmd【打开终端】
    3 安装项目依赖:yarn install
    4 打包项目:yarn build:extension
    5.在google浏览器中添加扩展程序:在扩展程序中安装打包好的项目
    6 验证react开发工具是否安装完毕:打开google控制台,多了Components、Profiler两个菜单项,说明插件安装好了

注意点:为保证能成功安装所有依赖,可切换为淘宝镜像做尝试。
1、查看一下当前源:yarn config get registry
2、切换为淘宝源:yarn config set registry https://registry.npm.taobao.org
3、还原仓库地址:yarn config set registry https://registry.yarnpkg.com

以上是我安装时遇到的问题,不一定准确哈,网上教程一堆堆,都可以试试。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值