使用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 相关文章推荐
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
vue引入ueditor及node后台配置详解
Jan 03 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
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
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
javascript 闭包详解
2015/02/15 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
Python 开发Activex组件方法
2009/11/08 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
python中执行shell的两种方法总结
2017/01/10 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
书法培训心得体会
2014/01/05 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技