Chrome浏览器安装 React Developer Tools和Redux DevTools插件

时间:2024-03-23 20:29:47

 

正文:

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扩展程序页,选择 加载已解压的扩展程序,选择到自己解压好的文件即可。如下:

Chrome浏览器安装 React Developer Tools和Redux DevTools插件

Chrome浏览器安装 React Developer Tools和Redux DevTools插件

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

Chrome浏览器安装 React Developer Tools和Redux DevTools插件

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

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

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

Chrome浏览器安装 React Developer Tools和Redux DevTools插件

Chrome浏览器安装 React Developer Tools和Redux DevTools插件 Chrome右上角 就出现了Chrome浏览器安装 React Developer Tools和Redux DevTools插件,具体使用过程中,还需要在store里配置,这里就不多说了。

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