vscode调试webpack-dev-server项目

最新推荐文章于 2025-07-04 23:56:08 发布

one.dream

最新推荐文章于 2025-07-04 23:56:08 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：工具使用

本文链接：https://blog.youkuaiyun.com/qq_44472722/article/details/119566679

工具使用专栏收录该内容

33 篇文章

订阅专栏

本文介绍了如何在Visual Studio Code (VSCode) 中安装并配置Debugger for Chrome插件，创建launch.json和task.json文件以实现Chrome的调试。通过设置'preLaunchTask'为'debug'，并在task.json中配置npm任务，启动webpack-dev-server并启用'source-map'，可以在Chrome中命中断点后回跳到VSCode进行源码调试。详细步骤包括添加debug任务、配置webpack配置文件等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上结果

在这里插入图片描述

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