typescript - 如何在 vs 代码中调试捆绑的打字稿？

问题描述

TLDR：如何为带有源映射的捆绑代码库配置 launch.json？

我正在尝试在 VS 代码中调试打字稿代码库。该代码使用模块，我将它捆绑到一个/dist文件夹中。我不清楚如何设置能够找到和之间映射的启动src配置dist。

关于在 vs 代码中调试 typescript 存在许多问题。但到目前为止，我还没有发现这个确切的问题。

这是一个带有工作代码的最小示例。这使我可以很好地调试。我将在第二步中介绍这个问题。
此外，这个 launch.json 使用的是 Firefox。但我会很高兴使用 Chrome。事实上，我已经尝试过并遇到了完全相同的问题。

索引.html：

<!DOCTYPE html>
<html>
<head>
    <script src='main.js'></script>
</head>
<body></body>
</html>

main.ts：

console.log('hello from typescript');

tsconfig.json设置为输出源映射：

{
    "compilerOptions": {
        "sourceMap": true
    },
}

并且launch.json:包含一个路径映射到src：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "pathMappings": [
                {
                    "url": "http://localhost:8080",
                    "path": "${workspaceFolder}/src"
                }
            ]
        }
    ]

我正在运行tsc编译代码，并serve . -p 8080在 src/ 文件夹中使用来托管代码。现在，如果我在main.ts和 select中设置断点run/start debugging，执行将在断点处停止。一切正常。

但我想在我的代码中导入模块。运行后yarn add uuid，假设main.ts现在看起来像这样：

import {v4} from 'uuid';

console.log(v4());

此时，需要一个捆绑器来处理依赖项。我正在使用包裹，但我认为这个问题与特定的捆绑器无关。我已经修改index.html，链接到main.ts而不是.js：

<!DOCTYPE html>
<html>
<head>
    <script src='main.ts'></script>
</head>
<body></body>
</html>

该代码与parcel src/index.html.

现在我可以serve . -p 8080从dist/文件夹中运行了。该代码有效，在我浏览器的调试控制台中，我可以看到输出。并且浏览器正确识别源地图：

但是在 vs code 中，我所有的断点都被标记为“未验证”，并且代码不再停止：

我试过用不同的方式调整我的launch.json pathMappings：

"pathMappings": [
    {
        "url": "http://localhost:8080",
        "path": "${workspaceFolder}/dist"
    }
],

并通过指定 outFiles：

"outFiles": [
    "${workspaceFolder}/**/*.js",
    "!**/node_modules/**"
]

上面显示的启动配置使用 Firefox，我也尝试过 chrome。而不是serve，我试过了parcel serve。

这些都不起作用。在浏览器（Chrome 和 Firefox）内部，我可以很好地调试我的代码。但是在 vs code 中，断点总是被标记为未验证。

标签： typescriptvisual-studio-codebundlersource-mapsparceljs

If you use parcel serve -p 8080 src/index.html to run parcel's development server, you'll see a source directory __parcel_source_root in the browser devtools:

As far as I can tell, this isn't a directory on disk, but it should let you do this in your launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html",
            "type": "pwa-msedge",
            "request": "launch",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "pathMapping": {
                "__parcel_source_root": "${webRoot}"
            },
            "skipFiles": [
                "${webRoot}/node_modules/**",
                "<node_internals>/**"
            ]
        }
    ]
}

Then just make sure you launch the debug session from inside vscode. Then you should be able to use breakpoints from within vscode. This doesn't seem to sync breakpoints between vscode and the browser though. There may be a better solution that does.

Note that the dist/ folder here is generated by parcel, but it's not directly visible in the browser devtools.

I didn't test using firefox, but I imagine it should work the same way.

A more in-depth example here.

typescript - 如何在 vs 代码中调试捆绑的打字稿？

问题描述

解决方案

推荐阅读