前言

在开发过程中，一次写出完美无瑕的程序几乎是不可能的。在断点处调试代码是常见的需求。

Vscode是一个很棒的编辑器，内置了强大的调试能力。简单设置后，就可以调试js文件了。但是有时候我们想要调试的是编译的。当然，我们可以直接调试编译后的代码。但是，编译和压缩的代码可读性很差，可能无法在模块中查看。编译前有没有调试代码的方法？答案当然是肯定的。

下面就不多说了。我们来看看详细的介绍。

vscode的常规调试

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

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

第一次打开调试界面时，目前没有调试配置，可以点击齿轮图标添加一个：

选择nodejs将自动添加。当前项目目录中的vscode/launch.json文件，它是vscode调试配置文件。

简单的配置文件如下：

{//使用IntelliSense了解相关属性。//悬停查看现有属性的描述。//更多信息请访问： https://go.microsoft.com/fwlink/? Linkid=830387 ' version ' : ' 0 . 2 . 0 '，' configurations ' :[{ ' type ' : ' node '，' request' 3360' launch '，' name' :' start program '，' Program ' : ' $ { Workspace Folder }/index.js ' }]以上配置的工作是启动当前目录下的index . js文件进行调试。

我们还可以设置为每次按F5时自动调试当前打开的文件，只需修改程序：

{'program': '${file}'}调试已编译的文件

要调试编译后的文件，需要设置launch.json文件。

为了调试编译后的代码，vscode需要知道编译了哪些代码，以及编译后的代码与预编译代码之间的对应关系。

其实从理论上讲，vscode可以把每个要执行的文件看作一个编译文件，搜索源文件？我猜是因为性能的原因，我们需要指定编译哪些文件。在launch.json中，使用outFiles属性指定编译后的输出文件：

{'version' :' 0.2.0 '，' configurations ' :[{//省略其他设置.outfile ' :[' $ { workspace folder }/lib/*。js '，]//.}]}虽然有一些烦恼，但对我们有好处

既然我们已经编译了文件，vscode还需要知道源文件以及编译后的文件和源文件之间的对应关系。你熟悉他们吗？这个过程是通过sourcemap实现的。

我们需要生成相应的。编译js文件时映射文件，并附加。将文件映射到输出js文件：

//@ sourcemappingurl=。/index.js.mapok，现在vscode执行js文件的时候，会从outFile中找出是否是编译代码，如果是，会通过sourcemap映射到源代码，方便我们调试。

自动执行编译

现在我们的开发流程变成了：修改源代码-编译源代码-调试。

为了方便，我们可以设置preLaunchTask属性，用于在每次调试前执行前置任务，我们可以将编译过程放在前置任务中。

首先，我们需要配置一个任务。任务的配置文件在中。你可以打开命令调板(p (Windows，Linux Ctrl Shift p))选择“任务：配置任务”自动生成一个：

{ //关于tasks . JSON format ' version ' : ' 2 . 0 . 0 '，' tasks ' :[{ ' label ' : ' build '，' type': 'npm '，' Script' :' build '，'问题匹配器' : []}]的文档请参见https://go.microsoft.com/fwlink/? LinkId=733558//在这里，我们将npm run build配置为预任务，每次执行调试时都会首先构建。

示例配置文件

{//使用IntelliSense了解相关属性。//悬停查看现有属性的描述。//更多信息，请访问： https://go.microsoft.com/fwlink/? linkid=830387 ' version ' : ' 0 . 2 . 0 '，' configurations ' :[{ ' type ' : ' node '，' request': 'launch '，' name': 'example '，' Program ' : ' $ { Workspace Folder }/index . js '，' PreLaunch Task' :' Build '，' CWD ' 3: ' $ { Workspace Folder } '，' outfjs '

在visual studio代码摘要中调试visual studio代码任务

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。