在VSCode中调试Asp.Net Core 3.1项目的TypeScript断点失效问题

我之前也踩过这个坑——在VSCode里调试ASP.NET Core 3.1的TypeScript代码时，手动写debugger语句能触发调试，但设置的断点完全没反应。结合你的配置和实际调试经验，调整launch.json和tsconfig.json这两个文件就能搞定，下面是具体的修改方案：

先看原始配置的问题点 #

原始launch.json #

{ "version": "0.2.0", "compounds": [ { "name": "ASP.Net Core & Browser", "configurations": [ ".NET Core Launch (web)", "Launch Chrome" ] } ], "configurations": [ { "name": ".NET Core Launch (web)", "type": "coreclr", "request": "launch", "preLaunchTask": "build", // If you have changed target frameworks, make sure to update the program path. "program": "${workspaceFolder}/bin/Debug/netcoreapp3.1/MyApp.dll", "args": [], "cwd": "${workspaceFolder}", "stopAtEntry": false, "env": { "ASPNETCORE_ENVIRONMENT": "Development" }, "sourceFileMap": { "/Views": "${workspaceFolder}/Views" } }, { "name": "Launch Chrome", "type": "chrome", "request": "launch", "url": "https://localhost:5001", "webRoot": "${workspaceRoot}/wwwroot" } ] }

这里的核心问题是两个调试配置都没开启sourceMaps支持，导致调试器无法关联TypeScript源码和编译后的JS文件。

原始tsconfig.json #

{ "compileOnSave": false, "preserveWhitespaces": "off", "compilerOptions": { "importHelpers": true, "outDir": "./dist/out-tsc", "baseUrl": "src", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2016", "dom" ], "module": "esnext" } }

虽然开启了sourceMap，但单独生成的源映射文件有时候会因为路径问题，让调试器找不到对应的源码关联关系，换成内嵌式的源映射会更可靠。

修正后的配置（亲测有效） #

核心做了两处关键修改：

• 在launch.json的.NET Core Launch (web)和Launch Chrome配置里都添加"sourceMaps": true，确保调试器启用源映射解析功能
• 在tsconfig.json中把"sourceMap": true替换为"inlineSourceMap": true和"inlineSources": true，把源映射和原始源码直接内嵌到编译后的JS文件中，避免调试器找不到映射文件

修改后的launch.json #

{ "version": "0.2.0", "compounds": [ { "name": "ASP.Net Core & Browser", "configurations": [ ".NET Core Launch (web)", "Launch Chrome" ] } ], "configurations": [ { "name": ".NET Core Launch (web)", "type": "coreclr", "request": "launch", "preLaunchTask": "build", // If you have changed target frameworks, make sure to update the program path. "program": "${workspaceFolder}/bin/Debug/netcoreapp3.1/MyApp.dll", "args": [], "cwd": "${workspaceFolder}", "stopAtEntry": false, "sourceMaps": true, "env": { "ASPNETCORE_ENVIRONMENT": "Development" }, "sourceFileMap": { "/Views": "${workspaceFolder}/Views" }, }, { "name": "Launch Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:5000", "webRoot": "${workspaceRoot}/wwwroot", "sourceMaps": true } ] }

修改后的tsconfig.json #

{ "compileOnSave": false, "preserveWhitespaces": "off", "compilerOptions": { "importHelpers": true, "outDir": "./dist/out-tsc", "baseUrl": "src", "inlineSourceMap": true, "inlineSources": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2016", "dom" ], "module": "esnext" } }

最后验证 #

修改完配置后，先重新构建项目（按Ctrl+Shift+B执行build任务），然后选择复合调试配置ASP.Net Core & Browser启动调试，这时候你在TypeScript代码里设置的断点应该就能正常触发了！

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