How to debug Visual Studio Code extensions?

Question

What are the best ways to troubleshoot and debug Visual Studio Code?

I have encountered conflicts in some snippet/suggestion extensions while editing in Visual Studio Code and want to try to find the root cause.

^{P.S. I would appreciate any experience in resolving conflicts between extensions. Feel free to chime in if you have encountered this issue before (built-in suggestions completely overwriting extension suggestions after a couple of seconds)}

Answer 1

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.

~ 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

Answer 2

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