利用vscode调试编译后的js代码详解

当我们用VSCode开发JavaScript项目时，调试是一项非常重要的操作。但是，如果我们使用第三方库或框架，我们可能需要调试编译后的JavaScript代码。本篇文章将介绍如何在VSCode中调试编译后的JavaScript代码。

利用source maps调试编译后的JavaScript代码

在使用第三方库或框架时，通常需要使用编译工具将源代码编译成JavaScript代码。在这种情况下，我们需要使用source maps来使编译后的代码映射到原始源代码，以便于调试。

步骤1: 开启source maps

首先，我们需要确保编译工具生成了source maps。在webpack等编译工具中，通常会在配置文件中设置source map选项。

module.exports = {
  //...
  devtool: 'source-map'
  //...
}

步骤2: 配置VSCode

接下来，我们需要告诉VSCode使用source maps来调试编译后的JavaScript代码。在VSCode的“调试”菜单中，选择“添加配置”，并选择“Chrome”或其他支持source maps的浏览器。

{
  "name": "Launch Chrome against localhost, with sourcemaps",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:8080",
  "sourceMaps": true,
  "webRoot": "${workspaceFolder}"
}

步骤3: 调试

现在，我们可以在VSCode中启动调试器，并在编译后的JavaScript代码中设置断点。当你运行应用程序并调用编译后的JavaScript代码时，VSCode将会自动映射到相应的源代码行。

示例1: 使用TypeScript

在TypeScript项目中，我们可以使用tsc命令来编译TypeScript代码。假设我们有一个名为app.ts的TypeScript文件，那么我们可以使用以下命令来编译它：

tsc app.ts --sourcemap

这个命令将生成一个app.js文件和一个app.js.map文件。这个.map文件是我们需要用来调试编译后的代码。

接下来，我们需要在VSCode中设置launch.json文件，来启动应用程序并使用Chrome来调试编译后的JavaScript代码。以下是launch.json文件的内容：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome against localhost with sourcemaps",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

完成以上步骤后，我们可以在app.ts文件中设置断点，并在浏览器中运行应用程序，然后在VSCode中调试编译后的JavaScript代码。

示例2: 使用React

对于React项目，通常会使用Babel将JSX和ES6代码编译成浏览器可识别的JavaScript代码。同样，我们需要使用source maps来调试编译后的代码。

首先，我们需要安装Babel以及相关的插件：

npm install --save-dev @babel/cli @babel/core @babel/preset-react @babel/preset-env @babel/plugin-transform-runtime babel-loader

接下来，在项目根目录下创建一个.babelrc文件，配置Babel的插件：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

然后，我们需要在webpack的配置文件中配置source maps：

module.exports = {
  //...
  devtool: 'source-map'
  //...
}

最后，在VSCode的launch.json文件中添加一项配置来启动Chrome并启用source maps：

{
  "name": "Launch Chrome with sourcemaps",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "sourceMaps": true,
  "webRoot": "${workspaceFolder}"
},

完成以上步骤后，我们可以在React代码中设置断点，并在浏览器中运行应用程序，并在VSCode中调试编译后的JavaScript代码。