[React] react && redux debugging tool

A, React debugging tool

1, the installation react-developer-tools, download the chrome app store, because the network limitations reasons, we can use the Firefox browser to install download

a, open the Firefox browser addon

b, search react-developer-tools for installation

React Developer Tools automatically detects React assembly, but in webpack-dev-server mode, WebPACK automatically placed in the assembly React iframe, resulting in failure detection assembly React, workaround is webpack-dev-server disposed --inline to mode.

 

Two, Redux debugging tools

In the process vue medium-sized project development, this usually use to vuex state management tools, so you can easily manage our global status, while, in the development process in order to more easily view real-time status of the state, we vue-devtool will use the tool, so you can see the changes in real time as well as state and so trigger mutations in the browser. In the development process, react in the same is true, redux similar vue in vuex, also state management tools, and today we want to introduce is a redux-devtools can choose to use the tool in your browser to use development project redux the chrome plugin, by redux-devtools, we can clearly see the current state of the warehouse store is kind of how, in the left visual tools, we can also see a change in action triggered. In this way, the development process allows us to easily debug.

Reference react installation debugging

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中的数据进行修改的时候我们就可以通过调试工具进行查看