看了网上好多在vscode上调试javascript的代码，总是出现问题，索性自己写一个，下面这篇文章主要给大家介绍了关于如何利用vscode调试编译后的js代码的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们一起来看看吧
在开发JavaScript应用时，调试是不可或缺的一环。Visual Studio Code（VSCode）作为一个强大的源代码编辑器，提供了丰富的调试功能。本文将详细讲解如何在VSCode中调试编译后的JavaScript代码。
让我们了解一下VSCode的基本调试配置。当你在VSCode中启动调试模式时，调试控制台通常位于左侧。如果未显示，可以通过菜单或快捷键打开它。在初次使用时，VSCode可能没有预设的调试配置。你可以通过点击调试视图中的齿轮图标，选择"添加配置"来创建一个。对于Node.js项目，VSCode会自动生成一个`.vscode/launch.json`文件，这是调试配置文件。
一个简单的`launch.json`配置示例如下：
```json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"program": "${workspaceFolder}/index.js"
}
]
}
```
这段配置告诉VSCode使用Node.js运行器启动`index.js`文件。如果你想调试当前打开的文件，只需将`program`属性改为`${file}`。
然而，当代码经过编译，如Babel、Webpack等工具转换后，原始的源代码会被转换成压缩且难以阅读的形式。为了调试编译后的代码，我们需要告诉VSCode哪些是编译产出的文件。这通过`outFiles`属性实现，它是一个文件路径的数组，通常使用通配符来匹配所有编译产出的JS文件，例如：
```json
{
"version": "0.2.0",
"configurations": [
{
// ...
"outFiles": [
"${workspaceFolder}/lib/*.js"
]
}
]
}
```
此外，为了让VSCode能够映射编译后的代码回源代码，你需要确保编译过程中生成了Source Map（`.map`文件）。Source Map是编译工具的输出，它记录了源代码和编译后代码之间的对应关系。在编译脚本时，确保添加了`sourceMap`选项，使得编译器生成对应的`.map`文件，例如在Webpack配置中：
```javascript
module.exports = {
// ...
devtool: 'source-map',
// ...
};
```
这样，当VSCode运行编译后的JS文件时，会根据`outFiles`找到编译产出，并通过Source Map映射回源代码，从而实现调试。
为了提高开发效率，我们还可以设置`preLaunchTask`属性，使VSCode在调试前自动执行编译任务。需要配置一个名为`build`的任务，这通常是一个`npm`脚本，如`npm run build`，在`.vscode/tasks.json`文件中：
```json
{
"version": "2.0.0",
"tasks": [
{
"label": "build",
"type": "npm",
"script": "build",
"problemMatcher": []
}
]
}
```
现在，每次按F5调试时，VSCode会先执行`build`任务，编译源代码，然后进入调试模式。
总结一下，调试编译后的JavaScript代码需要以下步骤：
1. 配置`launch.json`文件，指定`outFiles`以识别编译产出。
2. 确保编译过程生成Source Map。
3. 可选地，配置`preLaunchTask`自动化编译流程。
通过这些设置，开发者可以在VSCode中高效地调试经过编译的JavaScript代码，从而更轻松地定位和修复问题，提升开发效率。
