vscode使用技巧——webpack项目的断点调试

为了方便调试，我研究了一下如何使用vscode进行断点调试。本次尝试已在html-template项目中测试通过。

安装插件

在vscode的插件商店安装必要的插件“Debugger for Chrome”。

调整webpack配置

在webpack.dev.config.js文件中，增加source map的配置。

module.exports = webpackMerge.merge(webpackBase, {
  devtool: 'eval-source-map'
});

配置启动项

点击“菜单运行-启动调试”，选择“chrome”。会自动生成配置文件launch.js。

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:8888", // 配置成项目对应路径
    "webRoot": "${workspaceFolder}",
    "preLaunchTask": "debug", // 添加的配置，在执行之前需要启动项目，这个是启动项目用的任务。
    "sourceMapPathOverrides": {
      "webpack:///./*": "${webRoot}/*"
    }, // 添加的配置，为了找到打包文件和源代码之间的关联，使断点生效。
  }]
}

配置任务

当你按F5启动调试的时候，会提示你debug任务配置找不到，选择配置任务，选择你需要配置的npm脚本就会自动生成tasks.js文件。

下面必须添加的配置是需要手动添加的，其他配置系统会自动生成。

{
  "version": "2.0.0",
  "tasks": [{
    "type": "npm",
    "script": "dev",
    "problemMatcher": {
     // 必须添加的配置，编辑器从命令输出提取警告/错误/提示消息使用的pattern
      "pattern": {
        "regexp": "^([^\\s].*)\\((\\d+|\\,\\d+|\\d+,\\d+,\\d+,\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$"
      },
      // 必须添加的配置，指示Task后台运行时，VSCode如何跟踪Task运行状态，具体是依靠Task所执行命令的输出来判断的，两个pattern属性分别表示Task启动或结束时输出的消息特征（注意特征不惟一，可以从TERMINAL面板的输出自行确定），VSCode在接收到符合pattern的消息后开始或停止对Task的跟踪。当跟踪停止后，VSCode按launch.json配置启动调试会话（如不指定pattern，VSCode不会对tasks.json报错，但运行Task 10秒后将提示The specified task cannot be tracked. 并中止调试）。
      "background": {
        "activeOnStart": true,
        "beginsPattern": ".",
        "endsPattern": "Version: webpack.+"
      }
    },
    "label": "debug", // 配置成你需要的任务名
    "detail": "webpack-dev-server --config webpack.dev.config.js",
    // 必须添加的配置,指示Task是否在后台运行，必须为true，告诉VSCode可以在Task运行时启动调试会话，具体的启动时机由后面的background.endsPattern指定
    "isBackground": true 
  }]
}

启动调试

按F5再次启动调试，配置成功。

断点调试

在需要的代码行处添加断点，当执行到该行，浏览器会自动切回vscode。

参考：
在VSCode中调试webpack-dev-server项目 - 用我双手乾坤转过的文章 - 知乎