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.
- Open Firefox Developer Tools
- Click anywhere within Firefox Developer Tools
- 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:
This only changes the debugger and style editor. There's a different selector for the html inspector. Not sure what that is yet.