【React】react&&redux調試工具

一、React調試工具

1、安裝 react-developer-tools，在chrome應用商店進行下載，因為網絡限制原因，我們可以使用火狐瀏覽器進行安裝下載

a、打開火狐瀏覽器的附加組件

b、搜索react-developer-tools進行安裝

React Developer Tools會自動檢測React組件，不過在webpack-dev-server模式下，webpack會自動將React組件放入到iframe下，導致React組件檢測失敗，變通方法是webpack-dev-server配置在--inline模式下即可。

 

二、Redux調試工具

在vue中型項目開發的過程中，一般都是要用到vuex這個狀態管理工具的，這樣可以方便我們管理全局的狀態，同時，為了在開發的過程中，更加方便地實時查看到state狀態，我們會使用 vue-devtool工具，這樣就可以在瀏覽器中實時看到 state的變化以及觸發的mutations 等等。 在react的開發過程中也是如此，redux類似於vue中的vuex，也是狀態管理工具，而我們今天要介紹的是一款可以在瀏覽器中選擇使用redux-devtools工具來進行使用了redux項目的開發的chrome插件，通過redux-devtools， 我們可以清晰的看到當前 store 倉庫中的 state 是怎么樣的，在可視化工具的左邊，我們還可以看到觸發的action的變化。 這樣，使得我們開發過程中很方便地進行調試。

安裝方法參考react調試

import{createStore,applyMiddleware} from"redux";
importreducersfrom"./reducers/num"
importReduxThunkfrom"redux-thunk";
import{ composeWithDevTools} from'redux-devtools-extension'
conststore= createStore(reducers,composeWithDevTools(applyMiddleware(ReduxThunk)));
​
exportdefaultstore

 

 

當store中的數據進行修改的時候我們就可以通過調試工具進行查看