宝哥软件园

用vscode调试编译好的js代码的详细说明

编辑:宝哥软件园 来源:互联网 时间:2021-08-31

前言

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

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代码任务

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

更多资讯
游戏推荐
更多+