利用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 防止刷新,后退,关闭
Aug 07 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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对文件进行加锁、解锁实例
2015/01/23 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
Django开发中复选框用法示例
2018/03/20 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
python远程连接MySQL数据库
2019/04/19 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
Python requests接口测试实现代码
2020/09/08 Python
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
美术社团活动总结
2014/06/27 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js
muduo TcpServer模块源码分析
2022/04/26 Redis