Visual Studio Code: change debug panel's font size and font family and debug console input as well

Question

Is there a way to change the debug panel's font size and appearance in VS Code? I'm referring to the side panel where variables and their values are showed when debugging a program. Note that I want to change only its font size, not that of the entire editor.

I've come across other similar questions here in Stack Overflow, but the solutions provided required to change the zoom level of the entire editor (and thus of the debug panel too), then adjust the editor's font size. However, as I mentioned before, that's not what I'm looking for. I've searched through the settings but couldn't find anything at all. To me, it seems like a very basic feature for a text editor to have, so I can't believe there's no way to do that.

I'm using VS Code 1.40.1 on Linux

Answer 1

I would assume the ability to change the debug's views' font/fontSize is coming as part of the ability to move those views to the Panel (See VS Code move debug tab (left panel) to bottom).

Added:

debug.console.fontSize

debug.console.fontFamily

debug.console.lineHeight

Previously, the size didn't apply to the debug console input. To be fixed in v1.45, see https://github.com/microsoft/vscode/issues/90714 and https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_45.md#notable-fixes.strong text

Answer 2

• Paste these into your settings.json file USER section and change values to your liking.
• Note that there is no fontWeight for debug console, but you can state the weight in the fontFamily, like in the example below.
• lineHeight seems to be 1/3 bigger than fontSize by default, so that might be a good value to start with.

"debug.console.fontFamily": "Cascadia Code Light",
"debug.console.fontSize": 15,
"debug.console.lineHeight": 21,