react调试工具与调试方法

本是古典何须时尚 2021-09-02 06:28 758阅读 0赞

# react开发的调试方式 #

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

## Redux DevTools ##

1.  安装插件 
    
     *  以 qq 浏览器为例，搜索：Redux DevTools  
        ![format_png][]
2.  添加相应代码以支持在浏览器上使用 Redux DevTools 插件。 
    
     *  [参考][Link 1]
     *  如果要用 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 的变化。  
        ![format_png 1][]

## React Developer Tools ##

1.  安装插件 
    
     *  以 qq 浏览器为例，搜索：React Developer Tools  
        ![format_png 2][]
2.  使用插件  
    ![format_png 3][]

## React Perf ##

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

### 扩展阅读 ###

*  [介绍 React 性能分析器][React]
 *  [React 的慢与快：优化 React 应用实战][React _ React]

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

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

[IDEA _ Java _ WebStorm _ react]: https://blog.csdn.net/runAndRun/article/details/84500990
[format_png]: /images/20210813/a6dfb87a497b42beab3b98adaa7cad43.png
[Link 1]: https://github.com/zalmoxisus/redux-devtools-extension#usage
[format_png 1]: /images/20210813/044243251cd1402d9de92a786c18e168.png
[format_png 2]: /images/20210813/b6e77b6a20ac4898bb670740645892ea.png
[format_png 3]: /images/20210813/03c0110810ee42088f56963678b1f56e.png
[React]: http://react.css88.com/blog/2018/09/10/introducing-the-react-profiler.html
[React _ React]: https://www.jianshu.com/p/04583fca939b
[format_png 4]: /images/20210813/18df9ce1d62642ea96ea8e30d705e44d.png