使用VScode 插件debugger for chrome 调试react源码的方法


Posted in Javascript onSeptember 13, 2019

代码调试,是我们前端日常工作中不可或缺的能力了吧!

在面向dom开发的时代,我们开发时直接在chrome里打断点是很方便的。
但是,当我们面向组件开发时(react),浏览器拿到的是我们编译过后的代码,还想在浏览器里打断点几乎是不可能的了。

场景

那怎么办,方法总是比困难多!愚蠢的我想到了console/debugger!!一直在使用,虽然很不方便(打印太多实在太乱!上线还要配置删除掉),但是我竟然使用了很久(这真是一个糟糕的编码习惯吧)。直到今天,我想研究一下react源码,需要断点的地方有很多,不可能在手动console/debugger了!!我才想到我为什么不用浏览器debugger?

Debugger for Chrome

因为我使用的编译器是VS code,机智的我终于开窍了!找来了 Debugger for Chrome插件。

使用VScode 插件debugger for chrome 调试react源码的方法

但是纯英文的文档不太友好,虽然我英语六级也是搞了很久才弄好,下面就介绍记录一下mac系统下的使用方法吧。完整文档需要可以自己看文档

1、加载插件

使用VScode 插件debugger for chrome 调试react源码的方法

2、配置插件

点击小虫子;选择chrome;

使用VScode 插件debugger for chrome 调试react源码的方法

然后点击小轮子,打开launch.json文件如下:

{
 // 使用 IntelliSense 了解相关属性。 
 // 悬停以查看现有属性的描述。
 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [

  {
   "type": "chrome",
   "request": "launch", //launch / attach 两种方式;这里使用launch
   "name": "Launch Chrome against localhost",//开心的设置个名字
   "url": "http://localhost:9000",//项目地址
   "webRoot": "${workspaceFolder}/react-demo/"
   //这一块设置时要注意!webRoot指定网络服务器根目录的工作区绝对路径。
   ${workspaceFolder}应该时表示编辑器里的根目录,我的项目是react-demo,
   所以选择webRoot修改如上,具体路径还跟webpack配置的资源根目录也有关系

  }
  //还有很多可以配置的属性,可以通过上面文档查看
 ]
}

3、开始调试

点击小按钮,就开始调试模式了;像下面就能在我们的源代码打断点;

使用VScode 插件debugger for chrome 调试react源码的方法

开始调试后,多出来一个小窗,可以控制断点走向,以及结束暂停、调试。下方会显示断点列表。

使用VScode 插件debugger for chrome 调试react源码的方法

同时,会为我们打开我们配置的url页面;

使用VScode 插件debugger for chrome 调试react源码的方法

还可以看到调用堆栈,和打印台,可以说十分方便

使用VScode 插件debugger for chrome 调试react源码的方法

OK到这里我们的react调试配置已经可以使用了,不用在手动写debug了!可以开始愉快的搬砖了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
WebPack基础知识详解
Jan 16 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
jquery实现穿梭框功能
Jan 19 jQuery
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 #Javascript
深入了解JavaScript 防抖和节流
Sep 12 #Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 #Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 #Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 #Javascript
layer iframe 设置关闭按钮的方法
Sep 12 #Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 #Javascript
You might like
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
PHP中的替代语法介绍
2015/01/09 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
异步加载script的代码
2011/01/12 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
JSON格式化输出
2014/11/10 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
python实现录音小程序
2020/10/26 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
python 日志 logging模块详细解析
2020/03/31 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
环保建议书100字
2014/05/14 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
个人收入证明范本
2015/06/12 职场文书
聘任合同书
2015/09/21 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers