利用vscode调试编译后的js代码详解


Posted in Javascript onMay 14, 2018

前言

在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求。

vscode 是一个非常棒的编辑器,内置功能强大的调试能力。经过简单的设定,就可以对 js 文件进行调试。但有时我们想要调试的内容是经过编译的,当然我们可以直接调试编译后的代码。但经过编译压缩以后的代码,可读性很差,且也可能无法分模块查看了,有什么方法进行编译前的代码调试么?答案当然是肯定的。

下面话不多说了,来一起看看详细的介绍吧。

vscode 的常规调试

vscode 的调试界面在窗口最左边:

利用vscode调试编译后的js代码详解

最新版本的vscode,该选项默认隐藏了,需要自己打开。

首次打开调试界面时,当前没有任何调试配置,我们可以点击齿轮 icon 添加一个:

利用vscode调试编译后的js代码详解

选择 nodejs 后,会自动在当前工程目录下添加 .vscode/launch.json 文件,这个文件就是 vscode 调试配置文件。

一个简易的配置文件内容为:

{
 // 使用 IntelliSense 了解相关属性。 
 // 悬停以查看现有属性的描述。
 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
 {
 "type": "node",
 "request": "launch",
 "name": "启动程序",
 "program": "${workspaceFolder}/index.js"
 }
 ]
}

上面这个配置所做的工作是启动当前目录下的 index.js 文件进行调试。

我们也可以设置每次摁 F5 时自动调试当前打开的文件,只需要修改 program:

{
 "program": "${file}"
}

调试编译后的文件

想要调试编译后的文件,需要对 launch.json 文件进行设置。

vscode 要想调试编译后的代码,他需要知道哪些代码是经过编译的,且需要知道编译后的代码与编译前代码的对应关系。

其实理论上 vscode 是可以把每个要执行的文件都认为是编译后的文件,进行源文件的查找?我猜是因为性能原因,我们需要自己指定哪些文件是编译后的文件。在 launch.json 中,使用outFiles属性来指定编译后的产出文件:

{
 "version": "0.2.0",
 "configurations": [
 {
 // 省略其他设置...
 "outFiles": [
 "${workspaceFolder}/lib/*.js",
 ]
 // ...
 }
 ]
}

虽然有些麻烦,但好在我们可以使用通配符。

现在有了编译后的文件,vscode 还需要知道源文件,以及编译后文件与源文件的对应关系,听着有没有很熟悉?这个过程就是通过 sourcemap 来进行实现的。

我们需要在编译 js 文件时生成相应的 .map 文件,并在产出 js 文件后面附加 .map 文件的地址:

//@ sourceMappingURL=./index.js.map

ok,现在 vscode 在执行 js 文件时,会从 outFile 中查找是否是编译后的代码,如果是,就通过 sourcemap 映射到源代码,方便我们进行调试。

自动执行编译

现在我们的开发流程变成了:修改源代码 -> 编译源代码 -> 调试。

为了方便,我们可以设置preLaunchTask属性,该属性的作用是每次调试前执行一个前置任务,我们可以把编译过程放在前置任务里。

首先我们需要来配置一个task,task的配置文件在 .vscode/tasks.json,可以打开 command palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 选择“任务:配置任务”自动生成一个:

{
 // See https://go.microsoft.com/fwlink/?LinkId=733558
 // for the documentation about the tasks.json format
 "version": "2.0.0",
 "tasks": [
 {
 "label": "build",
 "type": "npm",
 "script": "build",
 "problemMatcher": []
 }
 ]
}

这里我们配置了npm run build作为前置任务,每次执行调试时都会先进行 build。

示例配置文件

{
 // 使用 IntelliSense 了解相关属性。 
 // 悬停以查看现有属性的描述。
 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
 {
 "type": "node",
 "request": "launch",
 "name": "example",
 "program": "${workspaceFolder}/index.js",
 "preLaunchTask": "build",
 "cwd": "${workspaceFolder}",
 "outFiles": [
 "${workspaceFolder}/lib/*.js"
 ]
 }

相关文档

  • Debugging in Visual Studio Code
  • Tasks in Visual Studio Code

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
浅析JavaScript基本类型与引用类型
May 28 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
js实现进度条的方法
Feb 13 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
vue的toast弹窗组件实例详解
May 14 #Javascript
Vue页面骨架屏注入方法
May 13 #Javascript
浅谈在node.js进入文件目录的问题
May 13 #Javascript
解决node修改后需频繁手动重启的问题
May 13 #Javascript
垃圾回收器的相关知识点总结
May 13 #Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 #Javascript
深入理解js 中async 函数的含义和用法
May 13 #Javascript
You might like
php debug 安装技巧
2011/04/30 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
js友好的时间返回函数
2016/08/24 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
基于js中document.cookie全面解析
2017/09/14 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
python 实时遍历日志文件
2016/04/12 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
如何使用Pytorch搭建模型
2020/10/26 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
策划主管的工作职责
2013/11/24 职场文书
干部对照检查材料范文
2014/08/26 职场文书
刑事代理授权委托书
2014/09/17 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers
详细了解MVC+proxy
2021/07/09 Java/Android
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js