Move VSCode "debug-toolbar" to Activity Bar

screen.recording.mp4

Debug Toolbar often blocks file names.
Currently the debug actions pane is always displayed at the top center position. This often blocks the file names.

It would be helpful to find a better place for the pane or add the ability to move the debug actions pane.

So, I write some code to move it. Thanks for the extension Custom CSS and JS Loader, I can inject javascript code into VSCode.

Installation

1. First, download the compiled js file "custom.js" in this page (https://github.com/Krysl/vscode-move-debug-toolbar-to-activitybar/releases/latest) to some place in you computer
2. Next, you will need to install the Custom CSS and JS Loader extension from Visual Studio Code Marketplace. Be sure to carefully follow the instructions provided with the extension, so that VS Code can patch itself properly.
3. Finally, open your VS Code settings.json file and add the following lines.

   "vscode_custom_css.imports": [
       "file:///D:/path/to/the/file/custom.js",
     ],

special thanks

• @n370
  • Original code posted in comments inspired me a lot
• @be5invis
  • An awesome extension makes this idea a reality