如何在VS Code中调试打包后的TypeScript代码并配置launch.json

核心配置修正 #

导致断点未验证的根本原因是VS Code无法匹配打包工具生成的sourcemap路径与本地源码路径，按以下配置修正launch.json即可：

// Firefox 版本
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Firefox 调试",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "pathMappings": [
                // Parcel打包的sourcemap默认前缀为parcel:///，其他打包工具替换为对应前缀即可
                {
                    "url": "parcel:///",
                    "path": "${workspaceFolder}/"
                }
            ],
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js",
                "!**/node_modules/**"
            ]
        }
    ]
}

// Chrome 版本
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome 调试",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "parcel:///*": "${workspaceFolder}/*"
            },
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js",
                "!**/node_modules/**"
            ]
        }
    ]
}

适配其他打包工具 #

如果你使用Webpack/Vite等其他打包工具，只需要将配置中的sourcemap前缀替换为对应工具的前缀即可：

• Webpack：webpack:///
• Vite：/@fs/（本地开发模式）或者/（生产打包模式）

如果不确定当前打包工具的sourcemap前缀，可以启动调试后在VS Code调试控制台执行.scripts命令，查看加载脚本的sourcemap路径前缀，替换到配置中即可。

前置校验项 #

1. 确保打包配置开启了sourcemap输出：Parcel默认开启，生产环境打包时需添加--sourcemap参数；其他打包工具按官方配置开启sourcemap即可
2. 调试前先完成打包，确认dist目录下存在对应的.js和.js.map文件
3. 静态服务启动目录为dist目录，端口与launch.json的url配置保持一致

内容的提问来源于stack exchange，提问作者lhk