How can I debug installed VSCode extensions?

Question

In Atom, I'm able to debug installed extensions by opening the developer tools (Option+Cmd+I) and browsing through JavaScript files in ~/.atom/packages, e.g.

Is it possible to do this in VSCode? After opening the developer tools via Help -> Toggle Developer Tools, the only extension-related files I can find are the icon images:

Answer 1

1. Find the extension host process's PID:

$ PID=$(pgrep -f "^/Applications/Visual Studio Code\.app/.*--type=extensionHost")
$ echo $PID
35791

Argument -f tells pgrep to match the pattern against the full process argument string, not just the process name.

2. Send SIGUSR1 to the extension host Node process to tell it to start listening for debugger connections:

$ kill -SIGUSR1 $PID

(This produces no output.)

3. Find which port the process started listening on using lsof:

$ lsof -p $PID -a -i4tcp
COMMAND     PID        USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
Code\x20H 35791 tim.vergenz   58u  IPv4 0x8af67df8a9aa26a8      0t0  TCP localhost:63767 (LISTEN)

Argument explanations:

• -p means filter by PID
• -i4tcp means filter by Internet address (4tcp means only IPv4 / tcp protocl)
• the -a in between combines the two filters via AND instead of the default OR

In the "NAME" column you'll find the host and port that your VS Code extension host process is listening on -- i.e. in the example above, localhost:63767.

4. Open Chrome Devtools, and add the debug address under Devices > Discover network targets > Configure.

5. Open your new debug target:

You may need to manually add ~/.vscode/extensions to your workspace in order to browse files and add breakpoints:

... and click "Allow" to grant it permission:

Success!

Answer 2

Your code doesn't show in the main developer tools because VSCode unfortunately runs extensions in a separate process called the Extension Host.

You can go to Help > Process Explorer to look up the Extension Host process id, then kill -sigusr1 it to turn on its debugger (like any node process). Then in Chrome, go to chrome://inspect and you should see the process (it won't look very recognizable, the name will be something like /private/var/folders/f3/zmhpprp15zxfd1s3fpp3prm80000gn/T/AppTranslocation/C0D80599-1ECA-4802-A110-A1…)

I'm not 100% sure if all extension code is available in that debugger because it has subprocesses, but so far I've been able to set breakpoints in some of my installed extensions.

Answer 3

Due to how VS Code implements its debugging UI and debug protocol it's not not possible (but I'm not 100% certain about this).

Debug adapters are part of VS Code's extensible architecture: they are contributed as extensions. What sets them apart from other extensions is the fact that the debug adapter code is not running in the extension host, but as a separate standalone program.

You can easily run an extension under the debugger thought. You'll need extension source files and debugger launch configuration.

You can find more about running and debugging extensions in the VS Code documentation.

You can also check the example extension wordcount for launch configuration.

Answer 4

I hope this will help you in vs code extension development you can set up debugging env in this way

1. create folder with the name .vscode
2. in this folder create json file named launch.json
3. in the json file you need this script

    {
        "version": "0.2.0",
        "configurations": [
            {
                "name": "Extension",
                "type": "extensionHost",
                "request": "launch",
                "runtimeExecutable": "${execPath}",
                "args": [
                    "--extensionDevelopmentPath=${workspaceFolder}"
                ]
            }
        ]
    }

4. then you press F5 vs code will launch new window with your extension installed
5. in the new window CTRL+SHIFT+P
6. search for "toggle developer tools "

if the extension is not for you you need just to run steps 5 & 6