一、序

工欲善其事,必先利其器。作为一名资深程序员,相信必有一款调试神器相伴左右,帮助你快速发现问题,解决问题。作为前端开发,我还很年轻,也喜欢去捣鼓一些东西,借着文章的标题,先提一个问题:大家目前是怎么调试前端?哈哈,我也大胆的猜测下,可能有这么几种:

不调试,直接看代码找问题

console.log 打印日志

用 Chrome Devtools 的 debugger 来调试

用 VSCode 的 debugger 来调试

以上方式我相信大家基本都用过,不同的调试方式效率和体验是不一样的,我现在基本都是用 VSCode debugger 来调试,效率又高、体验又爽。

今天我就来介绍下怎么用 VSCode调试网页。

二、实践

还是以之前的小demo来做演示,首先我们需要在项目根路径下添加一个

.vscode/launch.json

的配置文件,其内容如下:

{

"configurations": [

{

"name": "Launch",

"request": "launch",

"type": "pwa-chrome",

"url": "http://localhost:8080",

"webRoot": "${workspaceFolder}",

"sourceMapPathOverrides": {

"villiam://src/": "${workspaceFolder}/src/"

}

}

]

}

创建了一个调试配置,类型是 chrome,并指定调试的 url 是开发服务器的地址。

因为 Vue 我们写的是 SFC(single file component) 格式的文件,需要 vue-loader 来把它们分成不同的文件,所以路径单独映射一下,才能对应到源码位置。

所以调试配置里需要加个

sourceMapPathOverrides:

"sourceMapPathOverrides": {

"villiam://src/": "${workspaceFolder}/src/"

}

那么这里面的值是怎么来的呢?首先workspaceRoot 是 vscode 提供的环境变量,就是项目的跟路径,这样一映射之后,地址不就变成本地的文件了么?那么在本地文件中打断点就能生效了。那左边的key值是怎么来的呢?其实这个路径是可以配置的,这其实就是 webpack 生成 sourcemap 的时候的文件路径,可以通过 output.devtoolModuleFilenameTemplate 来配置:

configureWebpack:{

output:{

devtoolModuleFilenameTemplate:'villiam://[resource-path]'

}

}

以上其实我们已经把调试的配置全部完成了,接下来我们就一起来见证下奇迹~

启动:

会先打开浏览器:

点击按钮后,进入断点:

不管你是想调试 Vue 业务代码,还是想看 Vue 源码,体验都会很爽的。

三、小结

今天给大家分享的是一个调试小技巧,方便我们查找定位问题用,希望在工作中提升你的效率。

其实React 的调试相对简单,只要添加一个 chrome 类型的 dubug 配置就行,Vue 的调试要麻烦一些,要做一次路径映射。

有兴趣的可以走一波。

欢迎关注

vue 代码调试神器的更多相关文章

  1. Vue开发调试神器 vue-devtools

    Vue开发调试神器: vue-devtools 1. 下载Chrome扩展插件GitHub下载地址: https://github.com/vuejs/vue-devtools 建议使用npm淘宝镜像 ...

  2. vue-devtools vue开发调试神器

    前言: 由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么. 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试. 一.下载chrome扩展插 ...

  3. vue学习记录(一)—— vue开发调试神器vue-devtools安装

    网上有些贴子少了至关重要的一步导致我一直没装上, 切记!!install后还需build,且install和build都在vue-devtools文件夹内执行 github下载地址 点击跳转 具体步骤 ...

  4. 一分钟搭建 Web 版的 PHP 代码调试利器

    一.背景   俗话说:"工欲善其事,必先利其器".作为一门程序员,我们在工作中,经常需要调试某一片段的代码,但是又不想打开繁重的 IDE (代码编辑器).使用在线工具调试代码有时有 ...

  5. 【转】段错误调试神器 - Core Dump详解

    from:http://www.embeddedlinux.org.cn/html/jishuzixun/201307/08-2594.html 段错误调试神器 - Core Dump详解 来源:互联 ...

  6. Understand:高效代码静态分析神器详解(转)

    之前用Windows系统,一直用source insight查看代码非常方便,但是年前换到mac下面,虽说很多东西都方便了,但是却没有了静态代码分析工具,很幸运,前段时间找到一款比source ins ...

  7. Eruda 一个被人遗忘的调试神器

    Eruda 一个被人遗忘的调试神器 引言   日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于 fiddler.Charles.chro ...

  8. Understand:高效代码静态分析神器详解(一)

    Understand:高效代码静态分析神器详解(一) Understand   之前用Windows系统,一直用source insight查看代码非常方便,但是年前换到mac下面,虽说很多东西都方便 ...

  9. Understand:高效代码静态分析神器详解(一) | 墨香博客 http://www.codemx.cn/2016/04/30/Understand01/

    Understand:高效代码静态分析神器详解(一) | 墨香博客 http://www.codemx.cn/2016/04/30/Understand01/ ===== 之前用Windows系统,一 ...

随机推荐

  1. 解释AOP?

    面向切面的编程,或AOP, 是一种编程技术,允许程序模块化横向切割关注点,或横切典型的责任划分,如日志和事务管理.

  2. 用TLS/SSL保证EMQ的网络传输安全

    作为基于现代密码学公钥算法的安全协议,TLS/SSL能在计算机通讯网络上保证传输安全,EMQ的MQTT broker支持TLS,也可以用这种方式来确保传输安全. 参考官网:https://www.em ...

  3. chubby 是什么,和 zookeeper 比你怎么看?

    chubby 是 google 的,完全实现 paxos 算法,不开源.zookeeper 是 chubby的开源实现,使用 zab 协议,paxos 算法的变种.

  4. 学习MFS(四)

    一.搭建Master Server 1.安装相关编译器.工具包 [root@master ~]# yum -y install gcc gcc-c++ zlib-devel 2.创建进程用户 [roo ...

  5. 企业流程再造(BPR)--系统重构

    企业流程再造(BPR) 企业流程:指生产或服务过程中一连串活动的工作流程 企业流程再造:对企业流程所进行的根本性的在思考和彻底的再设计,以使企业的速度,质量,服务和成本等关键业绩指标获得根本性的改善

  6. 控制算法的划分(自适应控制、预测控制、模糊控制等,PID等;蚁群算法、神经网络,还有机器学习、人工智能中的很多方法)

    一般来说,控制器的设计,分为控制框架的选取,跟参数的优化.自适应控制.预测控制.模糊控制等,跟PID一样,是控制算法(我习惯称为控制框架). 而粒子群.遗传算法(类似的还有蚁群算法.神经网络,还有机器 ...

  7. 一文读懂充电宝usb接口电路及制作原理详细

    转自:http://www.elecfans.com/dianlutu/dianyuandianlu/20180511675801.html USB充电器套件,又名MP3/MP4充电器,输入AC160 ...

  8. 解决使用 swiper 常见的问题

    使用 swiper 的过程中个人总结 1. swiper插件使用方法, 直接查看文档 swiper基础演示 swiper API文档 2.swiper近视初始化时, 其父级元素处于隐藏状态(displ ...

  9. 【uniapp 开发】智能温控开关 (环状图)

    index.vue <template> <view> <view class="qiun-columns"> <uCharts id=& ...

  10. Reflect.has检测对象是否拥有某个属性

    Reflect.has({x: 0}, 'x'); // true Reflect.has({x: 0}, 'y'); // false // returns true for properties ...