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

前言

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

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

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

vscode 的常规调试

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

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

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

选择 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"
 ]
 }

相关文档

总结

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

赞 (0)

相关推荐

  • 分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容

    分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容

    问题的产生 在写JS的过程中,为了调试我们常常会写很多 console.log.console.info.console.group.console.warn.console.error代码来查看JS的运行情况,但发布时又因为IE不支持console,又要去掉这些代码,一不小心就会出错. 本文分享自己昨晚写的一个console类来试图解决这一问题.当然,更好的做法是把测试代码分开写,那样就不会有这个问题. 解决思路 如何解决IE下不兼容的问题呢,那就是我们自己定义一个console类来覆盖浏览器

  • 简单实用的js调试logger组件实现代码

    但这两种方式都有它的局限性,alert会有中断,有些时候alert出来的值并不可靠,闭包的时候用alert可能会得到不正确的值.debugger使用起来其实也挺纠结的,只有ie支持.所以最合理的方式是js把运行过程需要调试的值输出到页面,或者写到cookie也可以,这种方式不会有alert中断带来值不正确的问题,也不会受浏览器类型的限制,唯一纠结的是操作起来很麻烦. 于是,有了下面说的这个js组件.这个组件的实现参考了log4net组件的记录方式,我们利用这个js的logger组件,就可以用lo

  • 在vs2010中调试javascript代码方法

    在vs2010中调试javascript代码方法

    操作步骤如下: 1. javascript代码中插入:debugger,如下: <script type="text/javascript"> debugger; </script> 2.将IE浏览器中的"禁止脚本调试"这一项的勾给去掉. 然后在点击vs中的调试即可.

  • 为调试JavaScript添加输出窗口的代码

    为调试JavaScript添加输出窗口的代码

    虽然不是很复杂的实现,但每次都要这样就会很麻烦,所以我写了一小段脚本,用来自动生成这个输出窗口. 代码 复制代码 代码如下: window.Babu = {}; Babu.Debugging = {}; Babu.Debugging.writeLine = function(format, arg1, arg2) { var console = Babu.Debugging._getConsole(); if (console.get_visible()) { var msg = format;

  • JavaScript代码调试方法实例小结

    本文实例讲述了JavaScript代码调试方法.分享给大家供大家参考,具体如下: 1 把消息记录到控制台 IE8.Firefox.Chrome 和 Safari 中可以使用 console 对象向 JavaScript 控制台写入消息,它有这些方法: error(message):错误性消息. info(message):信息性消息. log(message):一般性消息. warn(message):警告性消息. Opera 10.5 之前的版本,是使用 opera.postError() 方

  • javascript代码调试之console.log 用法图文详解

    javascript代码调试之console.log 用法图文详解

    大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上console.log 先的简单介绍一下chrome的控制台,打开chrome浏览器,按f12就可以轻松

  • 调试Javascript代码(浏览器F12及VS中debugger关键字)

    调试Javascript代码(浏览器F12及VS中debugger关键字)

    目前,常用的浏览器IE.Chrome.Firefox都有相应的脚本调试功能.作为我们.NET 阵营,学会如何在IE中调试JS就足够了,在掌握了IE中的调试方法以后,Chrome和Firefox中的调试方法也变得相当简单了. 在F12开发人员工具中进行调试 打开IE浏览器,按下F12键,就会打开开发人员工具,这是IE内置的开发人员开发工具,方便开发人员对HTML.CSS.Javascript等网页资源进行跟踪调试使用的. 如果你打开的时候没有固定在网页底部,可以点击右上角菜单栏中的按钮来完成. 我

  • js调试工具console.log()方法查看js代码的执行情况

    我之前在调试代码的时候,跟砸js代码执行情况,一般都是通过在代码块中使用alert的方式查看js代码的执行情况,今天也是看到有朋友使用console.log函数打印输出函数,变量,对象,下边就console.log的使用情况进行记录,具体的语法是: console.log("值为:",fn); console.log()能够输出变量,函数,数组,对象等等 <html> <head> <title>this关键字_函数调用</title>

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

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

    前言 在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. vscode 是一个非常棒的编辑器,内置功能强大的调试能力.经过简单的设定,就可以对 js 文件进行调试.但有时我们想要调试的内容是经过编译的,当然我们可以直接调试编译后的代码.但经过编译压缩以后的代码,可读性很差,且也可能无法分模块查看了,有什么方法进行编译前的代码调试么?答案当然是肯定的. 下面话不多说了,来一起看看详细的介绍吧. vscode 的常规调试 vscode 的调试界面在窗口最左边: 最

  • centos 7 vscode cmake 编译c++工程的教程详解

    一.环境说明 1)gcc/g++  cmake安装建议 gcc/g++内核自带的即可,如果需要新的自行安装, cmake也一样,如有需要新的版本自行安装. 2)vscode安装插件 必要的插件c/c++ 0.28.1 cmake 0.0.17 cmake tools 1.4  (这几个插件的版本可能会不同,以扩展搜索到的最新的为准) 二.创建项目实验 1)打开项目文件夹 第一步:打开vscode,点击左上角文件,在下拉菜单选择打开文件夹!注意,是打开文件夹,不是工作区,也不是其它的!! 第二步:

  • Spring中利用配置文件和@value注入属性值代码详解

    1 简单属性值注入 package com.xy.test1; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Service; @Service // 需要被注入属性值的类需要被Spring管理 public class PropertiesService1 { // 利用@Value注解,即使没有该属性或者属性文件也不会报错 // @Value输入

  • Jenkins 编译后使用SSH发布详解

    Jenkins 编译后使用SSH发布详解

    前言 想要实现自动发布编译好的apk,我们可以使用官方插件库里的如下插件. 你可以使用FTP SSH等方式自动化发布,当然你也可以写脚本实现复杂的发布操作. 我以Publish Over SSH为例简单讲解下(主要是目前没部署FTP服务 TAT) 因为不知道怎么使用这个插件,所以我查看了下官方文档 https://wiki.jenkins-ci.org/display/JENKINS/Publish+Over+SSH+Plugin 看得懂E文的推荐去看看,比我讲的详细的多了. 这也算是能力的锻炼

  • 比较正宗的验证邮箱的正则表达式js代码详解

    fuchangxi的正则: 复制代码 代码如下: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ 开始必须是一个或者多个单词字符或者是-,加上@,然后又是一个或者多个单词字符或者是-.然后是点"."和单词字符和-的组合,可以有一个或者多个组合. 复制代码 代码如下: <script type="text/javascript"> function isEmail(str){ var reg =

  • Svelte调试模式js级别差异和细化后的体积差异详解

    目录 js级别的差异 ecma ast差异 细化后的体积差异 调试模式 on:事件名 svelte:options setContext js级别的差异 主要来自两个方面:hook系统(不考虑类)和ecma-ast差异hook系统. 钩子系统的api更多地用于纯函数组件注入状态和生命周期.在这两个方面,Svelte提供的解决方案是不同的. 由于预运行编译,Svelte编译器扫描所有与UI相关的状态并注入黑魔法,使得状态的使用与变量声明和赋值一样简单. 基本上,开发人员不需要太在意所谓的副作用:因

  • 如何解决uni-app编译后 vendor.js 文件过大

    目录 uni-app编译后vendor.js文件过大 前景 运行后发现 小程序分包后vendor还是过大 添加以下代码 uni-app编译后vendor.js文件过大 前景 采用uni-app开发的微信小程序,发布时工具提示vendor.js过大,已经跳过es6向es5转换.查看后发现编译后代码中common/vendor.js已超过500k,所以需要体积控制. HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码 使用cli创建的项目,可以在pacakge.jso

  • JS中实现浅拷贝和深拷贝的代码详解

    (一)JS中基本类型和引用类型 JavaScript的变量中包含两种类型的值:基本类型值 和 引用类型值,在内存中的表现形式在于:前者是存储在栈中的一些简单的数据段,后者则是保存在堆内存中的一个对象. 基本类型值 在JavaScript中基本数据类型有 String , Number , Undefined , Null , Boolean ,在ES6中,又定义了一种新的基本数据类型 Symbol ,所以一共有6种. 基本类型是按值访问的,从一个变量复制基本类型的值到另一个变量后,这两个变量的值

  • webpack将js打包后的map文件详解

    类似于这样的map文件 由webpack自动生成 参数: devtool: '#eval-source-map',//映射js到原文件 由于打包后的js调试不方面,所以应用此,自动映射报错到原文件 还是很有用的 同样的css设置如下 { test: /\.css$/, loader: 'style-loader!css-loader?sourceMap' } 以上这篇webpack将js打包后的map文件详解是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴

  • JS动画实现回调地狱promise的实例代码详解

    1. js实现动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animate</title> <style> .ball { width: 40px; height: 40px; margin-bottom: 5px; border-radius: 20px; } .ball1 { ba

随机推荐