正文:

1. 首先,下载react-developer-tools开发调试工具插件。(下面还要安装redux插件,一并给出)

react插件: 链接: https://pan.baidu.com/s/1xUuVvnvGIlcs3LLq9j7oig 提取码: 8n34

redux插件:链接: https://pan.baidu.com/s/16kMr4q4xT-osUABTEfr7UA 提取码: f8p3 

2. 插件安装(以谷歌为例)

打开谷歌浏览器,在路劲栏输入:chrome://extensions/

方式1):直接将下载的文件拖进去(如果失败按第二种方法,可能会提示下载的插件无效什么的,)

方式2):将下载的.crx文件后缀改为.rar文件,然后进行解压。在Chrome扩展程序页,选择 加载已解压的扩展程序,选择到自己解压好的文件即可。如下:

如上就说明安装好了,在浏览器右上角会出现一个小插件logo,以后在react开发的网页浏览时,小图标会变黑,如打开知乎首页

在以后开发工作中  调试页面也会多出react栏。

##################################  分隔符   ####################################

晚上在看redux这块的时候准备在Chrome上再安装一个redux的调试工具插件,叫Redux DevTools 。也是按照上面,安装react 插件的方式,直接拖拽不好使,改文件属性为rar,加载已解压的方式也不好使,在网上看到有网友说,将解压后文件_metadate改名为metadate,重新选择 已解压加载文件方式   就可以了。如下:

 Chrome右上角 就出现了,具体使用过程中,还需要在store里配置,这里就不多说了。

问题解决参考:解决Chrome插件安装时出现的“程序包无效”问题

 

GitHub 加速计划 / de / devtools
62
6
下载
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
最近提交(Master分支:4 个月前 )
79116147 - 1 年前
f0359002 - 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐