正文:
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插件安装时出现的“程序包无效”问题