[译]Visual Studio Code文档其4—调试

Visual Studio Code之调试

全文翻译自官方Docs，更新至1.3版本。

VS Code一个重要特性是它有很好的调试支持，内置的调试器能够加速你的"编写-编译-调试"工做流。

调试器扩展

VS Code内置调试器支持调试Node.js运行时，同时也能够调试JavaScript、TypeScript以及其余JS转译语言。

如需调试其余语言与运行时(包括PHP, Ruby, Go, C#, Python等)，请前往VS Code市场寻找相应的Debuggers(调试器)扩展程序。

开始调试

下文将基于内置的Node.js调试来进行相关的说明，大部分的说明一样适用于其余调试器。

一则建议：开始阅读本文以前你能够尝试去建立一个简单的Node.js应用程序，而后一遍阅读本文一遍动手实验(这里有一篇文章能够教你如何安装Node.js并建立一个的"Hello World"程序Node.js Applications with VS Code)。

调试视图

单击VS Code左侧视图栏的调试图标便可打开调试视图。

调试视图顶部栏是调试相关的命令与配置，其下方是全部调试信息的展现。

启动配置

想要在VS Code中调试程序，须要先调整好调试的启动配置——launch.json。单击调试视图顶部栏中的齿轮图标，并选择好调试环境，VS Code会在.vscode目录下为你生成一份launch.json。

调试Node.js示例：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/app.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        }
    ]
}

VS Code支持以调试模式启动应用，或调试一个已运行的应用。这取决于当前配置中request 的取值(attach仍是launch)，这个属性是必需的，若是你忘记了如何赋值也不要紧，填写时VS Code会提示你的。

上例configurations中编写了name为Launch和Attach的两种配置，视图顶部栏的下拉菜单能够指定须要以哪一个配置运行，若是选择的是Launch，那么接着按下F5就能够启动调试了。

如需在启动调试前执行某个特定任务(task)，为preLaunchTask设置tasks.json中的任务名便可。

断点

单击编辑器侧边缘便可为所在行添加断点，调试时BREAKPOINTS区域中也可对断点进行操做(enable/disable/reapply)。

• 断点正常显示为红色的圆

• 被取消的断点是灰色的圆

• 调试启动后，不能被注册的断点显示为灰色的圆圈

Reapply All Breakpoints命令可让断点重置至其初始位置，这对于调试环境是lazy模式以及还没被执行的误置断点来讲十分有帮助。

数据审查

调试视图的VARIABLES区域能够审查变量，也能够直接在源码上悬停鼠标来查看。变量和表达式的演算则显示在CALL STACK区域中。

在调试视图的WATCH区域也能够看到变量和表达式的演算。

调试控制台

在调试控制台能够计算表达式。打开调试控制台须要Open Console，该命令能够在调试视图顶部栏和命令面板中被找到(Ctrl+Shift+P)。

调试命令

调试一旦启动，编辑器顶部就会显示出调试命令栏。

• 继续 / 暂停 F5

• 跳过 F10

• 进入 F11

• 退出 Shift+F11

• 从新开始 unassigned

• 中止调试 Shift+F5

调试Node

Node控制台

调试Node时，默认启用的是VS Code内置的控制台。内置的调试控制台不支持输入，若是你须要从控制台输入，那么你应该使用外部控制台，在启动配置中设置externalConsole为true便可。

断点验证

出于性能的考虑，Node.js解析js文件中的函数时采用了“懒加载”模式。其结果是，未被Node.js解析的源码中的断点不会起做用。

这一点对于调试工做来讲天然是不理想的，因此在调试时VS Code自动添加了--nolazy选项。这样就能够阻止延迟解析，并确保断点能够在代码运行前被正常地触发了。

--nolazy选项会致使启动时间大大增长，若是你不但愿如此，添加--lazy来做为runtimeArgs的属性便可。

实际调试工做中，你可能会发现一些你设置的断点没有在预期位置被触发，而是跳到了下一个可执行行。为了不混淆，VS Code将实时显示断点的位置（Node.js判断的）。在BREAKPOINTS区域，断点将显示出其被触发的位置以及其实际所在行：

启动一个已添加好断点的调试，或者在一个已运行的调试中添加了一个新的断点，断点都有可能会跳至其余位置。在Node.js解析完全部代码以后，使用BREAKPOINTS区域顶部的Reapply按钮可重置断点，可让断点从新跳回到触发位置。

函数断点

除了能在源码内直接标记断点外，Node.js的调试如今还能够经过一个函数的名字来建立断点，这尤为适用于未翻阅源码但知道函数名的状况。

BREAKPOINTS区域的+能够添加函数断点，具体请看下图：

注意：函数断点的函数只能是已被定义的全局且non-native函数。

JavaScript源码关联

VS Code的Node.js调试器支持JavaScript源码映射关联，这将有助于调试一些转译语言，好比TypeScript和已被压缩过的JavaScript。有了源码关联，就能够直接在源码上标记断点了。若是源码映射被破坏或者源码没能成功映射到已生成的JS代码上，断点将显示为灰色的圆圈。

设置启动配置中的sourceMaps属性为true能够开启源码关联，关联的源码将容许单步调试以及在其中添加断点。另外，你可使用program属性来指定源码文件（如：app.ts）。若是被生成的js文件并非和源码在同一目录，而是分散放在了其余的路径中，你可使用outDir属性来帮助调试器找到这些文件。不管什么时候你在转译语言源码中设置了断点，VS Code都会尝试在outDir目录下生成的JavaScript源码中找到相应位置去映射关联。

源码映射关联并非自动建立的，你必须经过配置TypeScript编译器来完成：

tsc --sourceMap --outDir bin app.ts

TypeScript调试配置示例：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch TypeScript",
            "type": "node",
            "request": "attach",
            "program": "app.ts",
            "sourceMaps": true,
            "outDir": "bin"
        }
    ]
}

调试外部Node

若是想要使用VS Code的调试器来调试外部Node.js程序，在命令行以下操做：

node --debug program.js
node --debug-brk program.js

--debug-brk选项用于让程序中止在程序源码的第一行。

相应的启动配置示例：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Node",
            "type": "node",
            "request": "attach",
            "address": "localhost",
            "port": 5858,
            "restart": false
        }
    ]
}

restart属性用来控制Node.js调试器是否在调试结束后自动重启。若是你使用nodemon在文件改动时重启Node，restart属性就会显得颇有用了。设置restart为true可让node-debug自动在Node被终止时重连Node。

使用nodemon启动Node程序(server.js)

nodemon --debug server.js

提示：按下Stop按钮能够中止调试任务并断开与Node.js的链接，但nodemon(以及Node.js)仍会继续运行，如需中止nodemon，你须要在命令行中手动中止它。

提示：若是程序有语法错误，nodemon将不能正常启动Node，直到全部错误都被改正。若是发生了这种状况，VS Code将继续尝试链接Node，但会在10秒后放弃重试，固然，你能够经过timeout属性(毫秒值)来增长这个时间。

远程调试

经过address属性来指定远程主机(host)就能够用Node调试器远程调试了(Node.js版本 >= 4.x)。

默认地，VS Code会将远程的Node目录链接至本地VS Code，并将代码显示到一个只读的编辑器上。你能够单步调试这些代码，但不能修改它们。若是想去编辑源码，那么你须要映射远程和本地。attach启动配置中设置localRoot和remoteRoot属性能够映射远程和本地(支持不一样操做系统之间的映射)。

常见问题

Q: 都支持哪些调试场景？

A: Linux、OS X以及Windows下支持调试Node.js程序。Linux、OS X下支持调试运行在Mono上的C#程序。ASP.NET 5应用程序的编译使用的是Roslyn而不是Mono，其调试能够经过VS Code扩展程序进行。

Q: 调试视图的下拉菜单里我并无看到可选的启动配置啊？

A: 颇有多是由于launch.json文件尚未被生成，抑或是该文件中存在语法错误。

Q: Node调试须要什么版本的Node呢？

A: 推荐Node.js的LTS版。