Increase code font size in firefox developer tool

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.


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

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


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


You need to modify userChrome.css under ~/.mozilla/firefox/[profile-name]/chrome with this:

/*  Styles for Web developer tools */
@namespace url(http://www.w3.org/1999/xhtml);
.CodeMirror {
    font-family:    "Ubuntu Mono", monospace !important;
    font-size:      15pt !important;
}

The result looks like this:

firefox

This only changes the debugger and style editor. There's a different selector for the html inspector. Not sure what that is yet.