VS Code Debugger: How to Attach to Chrome Tab served by browser-sync?

user_2609810 0
Viewed 821

I am having trouble finding a solution for running the VS Code integrated Debugger with Browser-Sync. Instead of launching chrome with the VS Code Debugger, my current launch.json looks like this:

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome",
            "port": 9222,
            "request": "attach",
            "type": "pwa-chrome",
            "url": "http://localhost:3002",
            "webRoot": "${workspaceFolder}/dist"
        }
    ]
}

This solution let's me launch browser-sync via my taskrunner ("gulp") in my terminal, however, it does not let me set breakpoints within VS Code:

As soon as I pause the debugger, I will end up somewhere in the depths of the browsersync.js files (see Screenshot here)

Is there a better way of debugging within VS Code whilst using gulp and retaining automatic browser reload?

npm gulp browser-sync visual-studio-code node.js
1 Answers

Ok, after making the comment I decided to give another try and it seems that everything is working finally!

My case is a little bit special because I have a browser-sync setup mapping to several other folders + typescript compilation + rollup + multi-root workspace + an in-house made framework + other things to handle. But in the end, a simple solution was the one that worked for me:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "pathMapping": {
                "/": "${workspaceFolder}/dist",
            }
        }
    ]
}

The thing here is the pathMapping property that helps the debugger find the source map files. In my case, these files are mapped (with browser-sync) to the '/' path but they are inside the '/dist' folder inside my project root.

Keep in mind that if you have typescript source files like I do, you absolutelly need to generate source map files setting "sourceMap": true inside your tsconfig.json file.

EDIT Another thing that I forgot to mention is that the browser-sync server must be running in another terminal before you start the debug.

user_5267150
Related