Vanillacamp

Attaching a VSC debugger to remote browser – the guide you need to start debugging straight away !

Lukas Gaucas's photo
Lukas Gaucas
·

2 min read

NOTE : I am using Git Bash for Windows as my terminal (hence I am Window's user)

PERSONAL VIEW: I found VSC documentation quite "hectic" towards this specific topic, so I decided to do a wee article, so you could just set up and debug out of the box without a hassle. Nevertheless, VSC also gives the simplest "click-and-debug" solution, if you prefer skipping a bit of configuration which is fair enough if you do.

Debugging recipe

  1. User (global) settings.json

The global setting lets us avoid .vscode generated files if the launch setup for the debugger would be set locally instead, in my case it is done globally as follows :

    "launch": {
        "version": "0.2.0",
        "configurations": [
            {
                "type": "msedge",
                "request": "attach",
                "name": "Attach to Edge",
                "port": 9222,
                "url": "http://localhost:5173",
                "webRoot": "${workspaceFolder}"
            }
        ]
    },

Once the first step is done, 2) you have to start a remote profile of your MicrosoftEdge (Edge) using the following command:

start msedge.exe --remote-debugging-port=9222 --user-data-dir="${USERPROFILE}\AppData\Local\Microsoft\Edge\User Data\DebugProfile1"

Just to get the idea for --user-data-dir a real-life example could look like this C:\Users\Vanillacamp\AppData\Local\Microsoft\Edge\User Data\DebugProfile1"

Considerations:

  • Environmental variable $USERPROFILE (%USERPROFILE% in Windows, and, of course, without dollar sign if expanded within string as in our case) will expand by interpolating itself to the remaining path of string to your User's "prefix" – keep it in mind that everyone has different User prefix

  • DebugProfile1 could be changed to any Windows file system allowed character set directory naming-wise e.g. ..\User Data\Unicord_123

To make sure the remote browser is "enabled", make another call as follows:

netstat -na | grep 9222 # if it says "LISTENING" you are half way done !
# 9222 port matches port given as seperate attribute in settings.json
  1. Now launch a debugger based on your launch configuration name, in our case it's called "Attach to Edge" : can be found on VSC debugger section drop-down list of configurations (keybindings, once configuration is selected from the drop-down list is as follows Fn + F5) or follow this guide to see how to launch it via "green Play button".

3.1) Once the debugger launched, go on the recently launched Edge instance (browser's tab), fill in the address matching the url provided in settings.json for an example http://localhost:5173

Happy debugging!

NOTE: Edge, Chrome, Brave et al. are Chromium-based projects so they are more or less consistent in between, especially when it comes to CDP (protocol)

Useful articles:

vscodedebugging