chrome瀏覽器插件react devtools、redux devtools,無需安裝、解壓便可用

react devtools用於調試react代碼,能夠查看到props、state的值,以及定義的hooks,而redux devtools能夠追蹤到action的派發、store的變化,兩個都是react開發過程當中很是好用的工具!
react

下面是附上兩個開發者工具下載地址redux

react devtools 
連接:https://pan.baidu.com/s/1gLF1Bw9vn6CRiWnFayfJYA 提取碼:shsk
redux devtools
連接:https://pan.baidu.com/s/1FI7RU3vQ1raEXpmQ-fwXUA  提取碼:in0n

下載文件後解壓
工具

打開拓展程序,選擇 加載已解壓的拓展程序,導入上面的文件夾spa

導入文件夾後就能夠在拓展程序裏看到 react 和redux的開發者工具調試

點擊右上角的用戶旁相似於 拼圖 的按鈕,將react、redux開發者工具固定在導航欄處,若是該頁面使用了react / redux,對應的圖標會變亮,生產環境和開發環境亮的顏色不同,若是沒有使用則置灰code

而後經過 ctrl + shift + i,檢查/審查元素,當該頁面有使用react / redux 時,才能找到 react / redux 的開發者工具,選擇便可進行相關的調試開發

以上就是react/redux的開發者工具安裝步驟it