React 项目调试技巧

前端开发的调试方式

1. 借助以下插件进行调试。
   • Redux DevTools
   • React Developer Tools
   • React Perf
2. F12 之后，在源代码处打断点。
3. 像用 IDEA 调试 Java 代码一样，用 WebStorm 调试 react 代码，直接在 WebStorm 源代码上打断点，调试起来有点象在 IDEA 下调试 Java 程序，很爽！

Redux DevTools

1. 安装插件

   • 以 qq 浏览器为例，搜索：Redux DevTools

     
     
     

     image
2. 添加相应代码以支持在浏览器上使用 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__());
   

3. 使用插件
   • npm start 之后，在 chrome 或者 qq 浏览器，按 F12，点击【Redux】，可跟踪 Action 以及 state 的变化。
     
     

     image

React Developer Tools

1. 安装插件

   • 以 qq 浏览器为例，搜索：React Developer Tools

     
     
     

     image
2. 使用插件
   
   

   image

React Perf

性能插件，具体使用可参考《深入浅出React和Redux》，P101-102，【4.6.3 工具应用】章节。

扩展阅读

• 介绍 React 性能分析器
• React 的慢与快：优化 React 应用实战

F12 之后，在源代码处打断点

可 F12 之后，点击【Sources】，在想要监控变量的地方打断点，这种方式还是非常方便的。

image

关于作者

• github: https://github.com/uncleAndyChen
• gitee: https://gitee.com/uncleAndyChen
• 个人博客：https://www.lovesofttech.com
• CSDN博客：https://blog.csdn.net/runAndRun
• 邮箱：[email protected]