正文:
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插件安裝時出現的“程序包無效”問題