React调试

React Developer Tools

React Developer Tools是一个开源的Chrome开发者工具的插件，使用这个插件可以在浏览器中查看组件的层级、属性等信息。

使用步骤：

添加Chrome插件
添加完成后Chrome的开发者工具栏中会出现React标签，选中相应组件，左侧为组件层级结构，右侧可查看组件状态。
点击选中左上角Trace React updates，可监控组件更新。

选中某一组件右键，有4个选项

Show all **：单独显示所有选中同类组件；
Scroll to Node： 页面滚动到该组件；
Show Source：在Source面板中查看；
Show in Elements Pane： 在Elements中查看元素。

性能分析工具

Perf 更多工具列表

Redux调试

在采用React+Redux框架的项目中，页面中有复杂的action逻辑，React调试已经不能满足需要。

Redux Devtools

Redux Devtools是一个为Redux提供actions查看历史，撤销和重复的开发者工具。

使用方法：

下载Chrome插件

修改configureStore.js文件：

export default function configureStore(initialState) {
  const store = createStore(reducer, initialState, compose(
    applyMiddleware(...middleware),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  ));
  return store;
}

如果没有任何store enhancers和middlewares的话：

export default function configureStore(initialState) {
  const store = createStore(reducer, initialState, 
    window.devToolsExtension && window.devToolsExtension()
  );
  return store;
}