react调试工具与调试方法

最新推荐文章于 2025-06-30 09:16:51 发布

承蒙时光不弃1769203735

最新推荐文章于 2025-06-30 09:16:51 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React.js 文章标签： react

原文链接：https://blog.youkuaiyun.com/runAndRun/article/details/84500958?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.channel_pa

React.js 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了React项目的调试方法，包括使用ReduxDevTools跟踪Action及State变化、利用ReactDeveloperTools检查组件渲染情况，以及通过ReactPerf进行性能分析等。还介绍了如何在浏览器中设置断点进行调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react开发的调试方式

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

Redux DevTools

安装插件
- 以 qq 浏览器为例，搜索：Redux DevTools

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