Increase code font size in firefox developer tool

Question

How to increase code fonts in Firefox developer tools? I know that there is a zoom function but I want to set the font size only for the code.

Answer 1

For certain Mozilla versions (I was testing on Mozilla SeaMonkey equivalent to Mozilla Firefox 52 ESR), an explicitly set root element is required.

This will work:

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

while this won't:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

Once @namespace rules have been set,

you only need to add selectors and styles:

.devtools-monospace,
.CodeMirror,
.CodeMirror pre {
    font-family: "Courier New", monospace !important;
    font-size: 10pt !important;
}

Answer 2

1. Open Firefox Developer Tools
2. Press Ctrl++ on Unix/Win or Cmd++ on Mac.

To be clear, I mean the + key. You don't need to hold the Shift while doing it.

Answer 3

Maybe an easier way will be to open about:config and set devtools.toolbox.zoomValue to bigger value.

Answer 4

Open Firefox and type about:support. In Application Basics section chose Profile Folder - Open Folder. It will fire your file manager. If there is no chrome folder than create it. After that go to this chrome folder and create an userChrome.css file, open it in a text editor and add : .devtools-monospace {font-size: 12px!important;} Save. Be sure to restart Firefox.

UPDATE: One thing bothered me - while typing in the devtools console the text actually a bit smaller than on output (after pressing Enter). In order to make it the same we need to change font-size for its corresponding css class too. I don't know its class name yet so I just set

* { font-size: 12px !important; } globally and it works.

Answer 5

As John said, the way to increase the font-size in the devtools is to use ctrl/cmd+, just like you would on a web page. In fact the devtools is a webpage. You just need to make sure that the devtools frame is focused first.

I'm afraid there's no way to only increase the font-size for the code right now.