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__());

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

React Developer Tools

安装插件
- 以 qq 浏览器为例，搜索：React Developer Tools
使用插件

React Perf

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

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

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

react调试工具与调试方法相关推荐

分享嵌入式软件调试方法和几个工具
关注+星标公众号,不错过精彩内容作者 | 杂烩君转自 | 嵌入式大杂烩我们常常说,软件三分写七分调.实际开发中,确实也是这样子的.我工作这几年了,对这体会也越来越深.每当需求一下来,我代码很快就 ...
全网最优雅的 React 源码调试方式
什么?调试 React 源码还有优雅和不优雅之分? 别着急,我们先来听个故事: 东东是一名前端工程师,主要用 React 技术栈,用了多年之后想深入一下,所以最近开始看 React 源码. 他把 re ...
Web开发常规调试方法与常见问题分析
一.Web项目基本原理现在的web项目大都已经前后端独立开发与部署. 前后端独立开发,一般是前端与后端通过web接口(常见的有RESTful与websocket)文档进行交流.前端开发人员先更具业务 ...
7 php程序的调试方法_php程序调试方法总结
相信很多朋友们都有调试程序的经历,然而很多时候调试程序是痛苦而又漫长的过程:它不仅需要细心,更需要耐心,切忌心浮气躁.但是当找出问题并顺利解决它时,又会给人无比激动的喜悦.这里总结一下笔者在程序调试 ...
linux下gdb调试方法和技巧详解
linux下gdb调试方法和技巧整理简介 UNIX或者UNIX-like下调试工具启动gdb # 1. 在可执行程序不需要输入参数时,我们可以使用 gdb + 可执行程序 gdb ./typeid ...
微信小程序开发系列教程三：微信小程序的调试方法
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...
Jquery下的Ajax调试方法
Jquery下的Ajax调试方法介绍本文介绍Jquery下的Ajax调试方法:很多调试方法,就是一点就通,但是,在还没有通之前,会让人困惑,不知所以然: Ajax 可以为用户提供更为丰富的用户体验 ...
运行php程序cpu 100%,php 应用 cpu 100% 调试方法
找出进程占用cpu高的原因. 进程占用cpu高,一般是由于进程长时间占用cpu,又没有主动释放占用.如果想主动释放cpu,可以调用sleep.在写程序的时候,尤其要注意while 等循环的地方. 找出 ...
Linux内核调试方法总结【转】
转自:http://my.oschina.net/fgq611/blog/113249 内核开发比用户空间开发更难的一个因素就是内核调试艰难.内核错误往往会导致系统宕机,很难保留出错时的现场.调试内核 ...

react调试工具与调试方法

react开发的调试方式

Redux DevTools

React Developer Tools

React Perf

扩展阅读

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

react调试工具与调试方法相关推荐

最新文章

热门文章