How to debug Visual Studio Code extensions?

Taken from https://code.visualstudio.com/docs/extensions/developing-extensions:

Running and debugging your extension

You can easily run your extension under the debugger by pressing F5. This opens a new VS Code window with your extension loaded. Output from your extension shows up in the Debug Console. You can set break points, step through your code, and inspect variables either in the Debug view or the Debug Console.

To debug installed Visual Studio Code extensions, first navigate to the installed extension's project folder.

%USERPROFILE%\.vscode\extension\${PublisherName}.${ExtensionName}-${VersionNumber}\

This folder is contained in your user profile or root folder. It may also be called .vscode-insiders depending on the version of Visual Studio Code you have installed.

This project folder should already have the debugger set up and you can just press F5 in a project source file to open the [Extension Development Host] as originally assumed.

For more information you can check the <projectroot>/.vscode/launch.json to find the launch configurations detailing the use of the [Extension Development Host] if you need to fine-tune these settings.

Example taken from auto-generated extension debugger settings launch.json:

// A launch configuration that compiles the extension and then opens it inside a new window

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

From there it's just a simple(~) matter of adding breakpoints and/or console logs to work out the cause of extension-related issues.

Image of extension debugger after launching with <kbd>F5</kbd>~ Edit: I have enough rep to embed images now 😘

For more information on general development of Visual Studio Code extensions see the official docs here: https://code.visualstudio.com/docs/extensions/developing-extensions#_creating-your-own-extension


To view the errors for someone else's extension you installed normally:

  • In the menu, select View > Output
  • Select the extension in a small dropdown at the top right of the output window

enter image description here