gpt4 book ai didi

debugging - VSCode Chrome 调试器未在 Typescript 文件中停止

转载 作者:行者123 更新时间:2023-12-04 16:07:31 25 4
gpt4 key购买 nike

我正在尝试使用 VS Code Chrome 调试器来调试 Angular2 (2.0.0-beta.9) 和 Typescript (v1.8.7)。我正在 ts 文件中设置断点,但调试器正在显示 js。当整个应用程序都在一个文件夹中时,调试器确实会显示 ts,但是当应用程序由子文件夹组成时,它的行为不正确。起初我认为它无法解析映射,但我打开了诊断,可以看到路径正在被正确解析。

以下是诊断窗口中的示例:

›Paths.scriptParsed: resolved http://localhost:3000/bin/hero/hero.service.js to c:\MyDev\ng2\bin\hero\hero.service.js. webRoot: c:\MyDev\ng2
›SourceMaps.createSourceMap: Reading local sourcemap file from c:\MyDev\ng2\bin\hero\hero.service.js.map
›SourceMap: creating SM for c:\MyDev\ng2\bin\app.component.js
›SourceMap: no sourceRoot specified, using script dirname: c:\MyDev\ng2\bin
›SourceMaps.scriptParsed: c:\MyDev\ng2\bin\app.component.js was just loaded and has mapped sources: ["c:\\MyDev\\ng2\\app\\app.component.ts"]
›SourceMaps.scriptParsed: Resolving pending breakpoints for c:\MyDev\ng2\app\app.component.ts

tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "bin"
},
"exclude": [
"node_modules",
"typings"
]
}

来自launch.json的部分:
{
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000/index.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true
}

最佳答案

不幸的是,源代码到 Webpack 文件的正确映射已经改变了几次。

您已经拥有 diagnosticLogging在您的 launch.json 中打开,这意味着您的 JavaScript 控制台中应该有这样的行:

SourceMap: mapping webpack:///./src/main.ts => C:\Whatever\The\Path\main.ts

这应该让您清楚地知道它试图在哪里搜索您的源代码。

然后你添加一个 sourceMapPathOverrides进入 launch.json以帮助它找到您的文件。它应该是这样的:
"sourceMapPathOverrides": {
"webpack:///./*": "${workspaceRoot}/SourceFolder/*"
},

显然,用实际路径替换 SourceFolder。

编辑:
在 2019 年,这仍然有效,但您启用它的方式已经改变。 diagnosticLogging已被 trace 取代,它只有一个有效值,即 trace .

因此,您的设置将如下所示:
{
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000/index.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"trace": "verbose"
}

这将为您提供大量输出,仍然包括以 SourceMap: mapping 开头的行,您可以使用它来构建正确的 sourceMapPathOverrides 集如前所述。

关于debugging - VSCode Chrome 调试器未在 Typescript 文件中停止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36046331/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com