如何在VS Code中调试TypeScript版Preact应用？

问题背景 #

通过官方脚手架创建TypeScript版Preact项目：

preact create typescript preactTS

修改了package.json的dev脚本：

"dev": "preact watch -H localhost -p 3001 --clear false",

配置VS Code的launch文件和tsconfig后，应用能正常启动，但调试时存在异常：断点标记显示验证通过却无法触发，debugger语句可生效且能单步执行，但新增断点始终无效。

推荐调试配置及修复步骤 #

1. 修正launch.json的sourceMap路径映射 #

原配置的路径映射覆盖不全，更新为更精准的规则，确保webpack打包后的源码路径能正确映射到本地src目录：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch preactTS on Chrome",
            "url": "http://localhost:3001",
            "webRoot": "${workspaceFolder}/src",
            "userDataDir": "${workspaceFolder}/.vscode/chrome",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "${webRoot}/*",
                "webpack:///./~/*": "${workspaceFolder}/node_modules/*"
            },
            "showAsyncStacks": true
        }
    ]
}

重点调整：

• 将webRoot直接指向${workspaceFolder}/src，缩小映射范围
• 补充针对webpack:///./src/*和webpack:///src/*的映射规则，覆盖preact-cli打包时的不同路径生成情况

2. 确保preact-cli生成正确的sourcemap #

在dev脚本中显式指定sourcemap类型，避免默认配置可能的缺失：

"dev": "preact watch -H localhost -p 3001 --clear false --sourcemap inline",

--sourcemap inline会将sourcemap嵌入到打包后的js文件中，提升VS Code识别源码的准确性。

3. 优化tsconfig.json的sourceMap相关配置 #

确保TypeScript编译生成的sourcemap路径正确，调整以下配置项：

{
    "compilerOptions": {
        // 保留原有其他配置...
        "sourceMap": true,
        "sourceRoot": "", // 清空sourceRoot，让工具自动推导路径
        "noEmit": false, // 改为false，确保TypeScript生成对应的sourcemap文件
        "outDir": "./dist" // 新增输出目录，明确编译产物位置
    },
    "include": [
        "src/**/*"
    ],
    "exclude": []
}

注意：修改noEmit后，需在.gitignore中添加dist/目录，避免编译产物提交到版本库。

4. 调试前的必要步骤 #

• 先执行npm run dev启动开发服务，确保应用正常运行
• 在VS Code中选择对应的launch配置（Launch preactTS on Chrome），点击启动调试
• 若仍有问题，可尝试清除浏览器缓存和项目的node_modules/.cache目录，重新启动服务

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