how to debug bundled typescript in vs code?

user_497600 0
Viewed 249

TLDR: How can I configure a launch.json for a bundled codebase with sourcemaps?

I'm trying to debug a typescript codebase in VS code. The code uses modules and I'm bundling it to a /dist folder. It's not clear to me how I can set up a launch configuration that is able to find the mapping between src and dist.

There are many existing questions about debugging typescript in vs code. But so far I haven't found this exact problem.

Here is a minimal sample with working code. This allows me to debug just fine. I'll introduce the problem in a second step.
Also, this launch.json is using Firefox. But I would be just as happy using Chrome. In fact I've tried and ran into the exact same problems.

index.html:

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

main.ts:

console.log('hello from typescript');

tsconfig.json is set up to output sourcemaps:

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

And launch.json: contains a path mapping to 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"
                }
            ]
        }
    ]

I'm running tsc to compile the code and I'm using serve . -p 8080 in the src/ folder to host the code. Now, if I set a breakpoint in main.ts and select run/start debugging, the execution halts at the breakpoint. Everything is working fine.

But I'd like to import modules in my code. After running yarn add uuid, let's say that main.ts now looks like this:

import {v4} from 'uuid';

console.log(v4());

At this point, a bundler is needed to process the dependencies. I'm using parcel, but I think that this question is independent of the specific bundler. I've modified index.html, to link to main.ts instead of .js:

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

The code is bundled with parcel src/index.html.

Now I can run serve . -p 8080 from the dist/ folder. The code works, in the debug console in my browser I can see the output. And the browser correctly recognizes the sourcemaps: main.ts output

But in vs code, all my breakpoints are marked as "unverified", and the code no longer halts: unverified

I've tried adjusting my launch.json, with different pathMappings:

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

And by specifying outFiles:

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

The launch configuration shown above uses Firefox, I've tried chrome as well. And instead of serve, I've tried parcel serve.

None of this is working. Inside of the browser (both Chrome and Firefox) I can debug my code just fine. But in vs code, the breakpoints are always marked unverified.

source-maps parceljs visual-studio-code typescript bundler
1 Answers

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:

Edge devtools viewing page served by parcel dev server

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.

Directory tree for testing the solution.

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.

user_91042830
Related