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

• 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,

Answer 2

I have 1.55.1 on Linux and still don't see an option for font size in the debug variables panel (which, as originally asked, is not the debug console). So to adjust the font size in the debug variables panel independently, use the Zoom feature to adjust the entire VS code application, and then use the available font size settings for Editor, IntegratedTerminal and DebugConsole to unzoom those three back to the desired smaller fontsize.