typescript - 使用 Asp.Net Core 3.1 在 VSCode 中调试 TypeScript
问题描述
我正在尝试这个问题的方法,但它只有在我在打字稿代码中使用“调试器”命令时才有效,而不是断点。
这是我的 lauch.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"
}
]
}
更新 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"
}
}
解决方案,经过 tHeSiD 回答:
lauch.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"
}
}
解决方案
要让 VSCode 在您的应用程序中捕获断点,您需要使用内联源映射或设置正确的源映射路径。
对我来说最好的设置是
//TSCONFIG SETTINGS
"inlineSourceMap": true /* Emit a single file with source maps instead of having a separate file. */,
"inlineSources": true /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */,
如果你想使用NOT FROM LAUNCH.JSON ,你需要删除"sourceMap": true,
你的!tsconfig
"inlineSourceMap": true
//LAUNCH.JSON Settings
"sourceMaps": true,
"outFiles": ["${workspaceFolder}/dist/**/*.js"], // you need to set this according to your project config
这修复了与 VSCode 调试 TS 文件所依赖的源映射相关的大多数问题。
推荐阅读
- python - 如何在标题/标签中获取非斜体希腊字符(matplotlib)
- excel - 使用 VBA 在 Excel 范围内查找第一个公式的最快方法是什么?
- python - 如何在“alembic 升级头”上启用详细程度?
- java - 避免 if 对于链式对象
- sql - 如何在Oracle中的case语句中添加两个用逗号分隔的引号的字符
- botframework - Bot Framework - 将成员添加到 Teams 群聊
- android - 线程/多个 TCP 客户端和用户管理
- ms-access - 根据另一个字段使 Access 报告中的字段(不)可见
- apache-spark - 在不安装 Spark 的情况下编写 Spark 单元测试
- python-3.x - 试图弄清楚如何使用python中的循环获取下一个值