三分钟学会使用 VSCODE 调试 webpack

简介

话不多说，直接上步骤

Setp1

安装 vscode 插件 Debugger for Chrome

Setp2

点击启动调试，环境选择Chrome，会自动生成launch.json，注意要配置"preLaunchTask": "debug"

{
  // launch.json
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000", // 这里改成项目启动的端口
      "webRoot": "${workspaceFolder}",
      "preLaunchTask": "debug", // 这里配置task
    }
  ]
}
复制代码

再点击启动调试会提示找不到任务“debug”。

选择配置任务，选择你要调试的命令。例如：npm start

然后自动生成tasks.json，注意label需要配置和preLaunchTask一样的值

{
  // tasks.json
	"version": "2.0.0",
	"tasks": [
    {
      "type": "npm",
      "script": "start",
      "problemMatcher": [],
      "label": "debug", // 这里和launch.json的preLaunchTask配置一样的值
      "detail": "node start.js"
    }
  ]
}
复制代码

Setp3

启用webpack调试模式，打断点开始调试

module.exports = {
  devtool: "eval-source-map",
  module: {},
  plugins: [],
}
复制代码

devtool 还支持一些其他模式，详情看这里

选择 调试模式 run script start进入debug