Need clarification on vs code debug

user_1556194 0
Viewed 109

Can anyone explain these three debug symbols on VSCode I have found on the internet?

My vs code has the one with the play icon.

All demos online on debugging have the one in the middle. How do I get that?

Also, node js debugging is installed but I think it shows as disabled, with no option I can find to enable it.

enter image description here

vscode-debugger visual-studio-code
1 Answers

To answer your question directly [TL;DR]: you already have it if you are using the latest version of vscode. It will take you to the same view as the one on the right

If you look at the codicon libray ref the middle one you pointed out is not present.

Visual Studio Code made changes in February 2020 ref that incorporates running and debugging to be something more harmonious:

User studies revealed that new users have difficulties finding how to run their programs in VS Code. One reason is that the existing "Debugging" functionality is not something that they relate to "Running" a program. For that reason, we are making "Run" more prominent in the UI.

  • The main menu Debug has become the Run menu.
  • The Run and Debug view has become the Run view and the corresponding Activity Bar icon now shows a large "Play" icon with a small "bug" decoration.

So in other words, there is no difference. The 'Run' and 'Debug' view is synonymous and the icon reflects those changes. As they noted, the Debug view is now called the 'Run' view, but it still offers debugging and breakpoints.

There are 2 possibilities you are running into however:

  1. The tutorials and guides you are using are out-dated (showing an outdated version of vscode)

  2. The tutorial or guide is using an extension that offers debugging capabilities. Extensions have some control over the icon you see

    • The extension is for single file debugging, according to the June 2020 ref notes, vscode recommends the following:

    For debug extensions that want to improve the single file debug experience by adding a "Run" and/or "Debug" button to the editor, we recommend following these guidelines for a consistent look and feel:

    • Contribute Run and/or Debug commands in the package.json (see Mock Debug):
      • Use the command titles "Run File"/"Debug File" or "Run Python File"/"Debug Python File".
      • Use the $(play) icon for Run and $(debug-alt-small) for Debug.

Where their codicon library was updated in June to reflect the following:

debug codicon library

As you can see, none of them are prefixed with verbiage like 'run', but they all represent the same functionality.

Additionally, you may see this icon as well: debug console

This represents the panel (view) where the output of your debug will go.

user_23535230
Related