利用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编程起步(第七课)
Jan 10 Javascript
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
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与SQL注入攻击[二]
2007/04/17 PHP
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
JS常见算法详解
2017/02/28 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
python实现俄罗斯方块
2018/06/26 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
python小白切忌乱用表达式
2020/05/29 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
年度献血先进个人事迹材料
2014/02/14 职场文书
2015年共青团工作总结
2015/05/15 职场文书
门面租赁合同范文
2019/08/06 职场文书
Python竟然能剪辑视频
2021/05/25 Python