Increase code font size in firefox developer tool
Solution 1
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.
Solution 2
- Open 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.
Solution 3
Maybe an easier way will be to open about:config
and set
devtools.toolbox.zoomValue
to bigger value.
Solution 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.
Solution 5
So sure, as stated before, the short answer is cmd++.
But the + sign might not be directly accessible on your keyboard (no numeric key pad, laptop, strange layout).
You then have to press maj
first to access the + sign, like, for example on the american keyboard layout: maj+=.
Unfortunately, even if you are correctly focused on the dev tool pane, cmd+maj+= increases the font of the web view pane, while cmd+- decreases the font on the dev tool pane.
And you end-up with a web tool pane with a font size so small that it is unreadable, and no way to increase it.
Then @Thal's answer comes handy, once focused to the dev tool pane cmd+0 resets the dev tool's font size to the original.
If you want to answer the question like @Timothy_Truckle is asking for, here are a couple of them (still focus on the dev tool pane, of course):
- switch to the US keyboard layout and press cmd+=
- find a keyboard layout with the + directly accessible, switch to it, and press cmd++
That's for you guys wondering why some find it hard to simply press cmd++ or why some find it hard to focus on the dev tool pane (because they actually focus on the dev tool pane, but the result is as if they were focused on the web view pane).
Related videos on Youtube
![LDMdev](https://i.stack.imgur.com/1j5jx.jpg?s=256&g=1)
LDMdev
Updated on August 28, 2021Comments
-
LDMdev almost 3 years
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.
-
Mikhail V about 4 yearsA note for those who seeks for an answer: at the current date, don't waste your time trying the answers with
userChrome.css
tweaking, none of those work.
-
-
LDMdev over 9 yearsIt works! :] chome/userChrome.css was missing in my profile but after I created it, boom! It works! :]
-
Mike Ratcliffe over 9 yearsThis will also style the Markup view: /* Styles for Web developer tools */ @namespace url(w3.org/1999/xhtml); .CodeMirror, body.theme-body.devtools-monospace { font-family: "Ubuntu Mono", monospace !important; font-size: 15pt !important; }
-
ingredient_15939 about 9 yearsYou can also edit the developer tools styles using the Stylish addon. No need to edit userChrome, and results are instant. :) See the last comments on this page: forum.userstyles.org/discussion/40767/…
-
Matthew Wilcoxson about 9 yearsAnd is there any easy way to ensure devtools has focus? It seems very hard to select it!
-
Michael Cole over 8 yearsClick the console tab, then any console message, so it's highlighted. Then Ctrl +
-
Toby Speight almost 8 yearsWelcome to Stack Overflow! Although this code may help to solve the problem, it doesn't explain why and/or how it answers the question. Providing this additional context would significantly improve its long-term educational value. Please edit your answer to add explanation, including what limitations and assumptions apply.
-
Timothy Truckle over 7 yearsWelcome to Stack Overflow! This does not really answer the question. Take a minute to read through How to Answer
-
Tobia over 7 years@TobySpeight what are you talking about? Joschi's answer is the only one that works in the current version of Firefox. +1
-
Toby Speight over 7 years@Tobia, the answer has been edited since I made that comment. It's noticeably better now (although it does lean towards recipe rather than explanation).
-
loic.jaouen over 7 yearswell, that was the answer I was looking for :) But you are right, this answer is not the answer to "how to increase font size?" but "how to get font size to the original size?".
-
exebook about 6 yearsGreat it works, but isn't it strange that Control+mouse wheel does not?
-
Combine about 6 yearsThis should be the Accepted answer!
-
LDMdev about 6 years@Combine, in my question I say "I want to set the font size only for the code", so this is not the correct answer as CTRL + increase the size of the whole window, also the controls, not only the code...
-
Combine about 6 yearsI see... Still this is more easy and sexy answer.
-
Vitaliy Terziev over 5 yearsThis should be selected as answer.
-
John Karahalis over 5 yearsI agree with @LDMdev. This is not the best solution. They asked how to increase the font size of only the code; this increases the font size of all text. That said, I'm glad people find it useful.
-
daGo almost 5 yearsSince snap became popular a give it a try to install Firefox through it. The drowback is: it looks like the answer I gave doesn't work in this case (I created chrome folder at ~/snap/firefox/common/.mozilla/firefox/myProfile.default/).
-
Eje over 4 yearsFinally, I've found how to easily do it. Like what others say, this should be the accepted answer.
-
alexpotato about 4 yearsWorked perfectly!
-
Amarok24 about 4 yearsThis should be the best solution now! Because simple zooming with Ctrl and [+] or Ctrl and [-] affects the fontsize of devtools only for the current session! A permanent solution is like described here. No need to mess with additional CSS files like most of the answers suggest! That's why we have about:config in FF.
-
Hartmut Pfarr almost 4 yearsthis is the solution!! Thanks buddy!! e.g. 1.5 is a nice value!
-
KERR over 3 yearsNote that newer versions of Firefox no longer support userChrome out of the box (it's been deprecated) - therefore the most valid answer now is to use Ctrl + Plus (+) key combo.
-
enchance almost 3 yearsThis should be the answer. Simple and precise. Don't forget to restart firefox everytime you change the value. I set mine to 1.4.
-
ArchNoob almost 3 yearsThis works even when the devtools is detached from the main FF window! Will go with 1.4 and I've also experienced that I don't need a FF restart to have it working.
-
Shautieh over 2 yearsThank you for being clear, because I always used the MAJ key and it wouldn't work..!
-
Shautieh over 2 yearsThe difference with a web page is that it doesn't work when the MAJ key is pressed (on French keyboards for example you need to press MAJ to get the "+"). Doing it without pressing MAJ does work in both cases.
-
A.W. over 2 yearsThis works, can the setting be fixed? On my ubuntu machine the setting resets after relaunching firefox.
-
lxxxvi over 2 yearsApparently on some keyboard layouts (German...?), inreasing the font size has no impact for the DevTools panel (decreasing works, however 🤷). In order to increase the font size you have to set
devtools.toolbox.zoomValue
inabout:config
. -
Piliponful about 2 yearsit does not work, it increases size of website and not dev tools