Chrome瀏覽器安裝 React Developer Tools和Redux DevTools插件

 

正文:

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章