前端开发的调试方式
- 借助以下插件进行调试。
- Redux DevTools
- React Developer Tools
- React Perf
- F12 之后，在源代码处打断点。
- 像用 IDEA 调试 Java 代码一样，用 WebStorm 调试 react 代码，直接在 WebStorm 源代码上打断点，调试起来有点象在 IDEA 下调试 Java 程序，很爽！
Redux DevTools
- 安装插件
-
以 qq 浏览器为例，搜索：Redux DevTools
image
-
- 添加相应代码以支持在浏览器上使用 Redux DevTools 插件。
- 参考
- 如果要用 redux，需要加扩展：redux-devtools-extension，只需要作如下调整:
// 将 window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 作为 createStore 方法的第三个参数，如下： const store = createStore(reducer, initValues, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); - 使用插件
- npm start 之后，在 chrome 或者 qq 浏览器，按 F12，点击【Redux】，可跟踪 Action 以及 state 的变化。
image
- npm start 之后，在 chrome 或者 qq 浏览器，按 F12，点击【Redux】，可跟踪 Action 以及 state 的变化。
React Developer Tools
- 安装插件
-
以 qq 浏览器为例，搜索：React Developer Tools
image
-
- 使用插件
image
React Perf
性能插件，具体使用可参考《深入浅出React和Redux》，P101-102，【4.6.3 工具应用】章节。
扩展阅读
F12 之后，在源代码处打断点
可 F12 之后，点击【Sources】，在想要监控变量的地方打断点，这种方式还是非常方便的。
image
