Debugging with Visual Studio Code

Prysm can be controlled remotely through Visual Studio Code’s built-in debugger.

Setup #

To use the debugger you need to:

1. Configure DevTools as explained here.
2. Open VS Code in a directory - root.
3. Create a root/.vscode folder.
4. Create a root/.vscode/launch.json file.
   • How to configure a launch.json is described here.
5. In Visual Studio go to Run -> Start Debugging (F5).

Following those steps, you should be attached to Prysm and you can use all features of the VS Code debugger as described here.

Configuring launch.json #

You can find a list of options for browser-based debugging in VS Code here and here.

There are two ways that you can go about configuring launch.json.

1. For a workflow where VS Code spawns Prysm at the start of the debug session and kills it at the end - let’s call that the launch workflow.
2. For a workflow where VS Code attaches to Prysm - lets call that the attach workflow.

Common configuration #

Both configurations have a few required common keys.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "name": "COHTML",
            "port": 9444
        }
    ]
}

• version - the version of the VS Code debugger.
• type - the type of debugger chrome should always be used.
• name - the name of the session visible in Visual Studio Code.
• port - the DevTools port configured in Prysm.

There is also the optional "url": "<URL_TO_INSPECT>" that is the URL of an HTML page that the debugger will attach to. The value should match one of the "url" values listed in localhost:9444/json.

Launch workflow #

To launch Prysm you need to add the following to the configuration.

• "request": "launch"
• "runtimeExecutable": "<PATH_TO_COHTML>" - The executable to spawn.

With those on Start Debugging the runtimeExecutable will be spawned. The debugger will attach to localhost:9444 and through DevTools it will attach to the initially opened HTML page. When the debugging session is stopped, the executable will be killed.

It is also useful to specify "runtimeArgs": [<ARGS>] that are arguments passed to the spawned executable.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch COHTML",
            "url": "<URL_TO_INSPECT>",
            "port": 9444,
            "runtimeExecutable": "<PATH_TO_COHTML>",
            "runtimeArgs": [
                "<COHTML_ARGUMENT>",
                "<COHTML_ARGUMENT>"
            ]
        }
    ]
}

Attach workflow #

To attach to Prysm you need to add the following to the configuration.

• "request": "attach"

With this on Start Debugging the debugger will attach to localhost:9444 and through DevTools it will attach to the initially opened HTML page.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to COHTML",
            "url": "<URL_TO_INSPECT>",
            "port": 9444
        }
    ]
}