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.