如何利用vscode调试编译后的js代码

这篇“如何利用vscode调试编译后的js代码”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“如何利用vscode调试编译后的js代码”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。

vscode有什么用

Visual Studio Code 是一个运行于 OS X，Windows和 Linux 之上的，针对于编写现代 web 和云应用的跨平台编辑器，它为开发者们提供了对多种编程语言的内置支持，并且正如 Microsoft 在Build 大会的 keynote 中所指出的，这款编辑器也会为这些语言都提供了丰富的代码补全和导航功能。

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

以上是“如何利用vscode调试编译后的js代码”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！