vscode调试webpack-dev-server项目

先上结果

vscode下载debugger for chrome 插件

创建launch.json

添加的时候选择Chrome: Launch会自动生成chrome调试模板，主要是要加上

"preLaunchTask": "debug"

意思是在开始debug之前添加一个叫做’debug‘的任务

新建debug任务

此时我们按F5调试是找不到debug任务的

所以直接点配置任务
会在项目根目录下创建task.json,配置如下

{
    "version": "2.0.0",
    "command": "npm",  // Task 要运行的命令
    "tasks": [
        {
            "label": "debug",  // Task 名称，在命令面板中显示
            "isBackground": true,
            "type": "npm",
            "script": "dev",  // npm 要执行的 script 名称，对应 package.json 中的定义
            // "path": "fe/",  // 执行命令所在的目录，相当于 cd 命令
            "detail": "编译至开发环境",  // Task 的描述，在命令面板中显示
            "group": "test",
            "problemMatcher": {
                "owner": "typescript",
                "fileLocation": "relative",
                "pattern": {
                    "regexp": "^([^\\s].*)\\((\\d+|\\,\\d+|\\d+,\\d+,\\d+,\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
                    "file": 1,
                    "location": 2,
                    "severity": 3,
                    "code": 4,
                    "message": 5
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": ".",
                    "endsPattern": "Version: webpack.+"
                }
            }
        }
    ]
}

这里的label字段对应刚才的preLaunchTask

配置webpack-dev-server

加上 devtool: “eval-source-map” 开启源码映射
然后在vscode里打断点，chrome命中断点之后就会跳回vscode了
done！