利用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 相关文章推荐
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
JavaScript Date对象详解
Mar 01 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 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
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
前端性能优化及技巧
2016/05/06 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
浅析Git版本控制器使用
2017/12/10 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
《油菜花开了》教学反思
2014/02/22 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
保安辞职信范文
2015/02/28 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python