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.

A 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. — Mikhail V, Jun 18 '20 at 21:13

John Karahalis · Answer 1 · 2023-06-12T17:25:53.810

263

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. On most keyboards, you don't need to hold the Shift key while doing it.

edited Jun 12 '23 at 17:25

answered Dec 03 '14 at 20:21

John Karahalis

3,369
2
15
20

14

Great it works, but isn't it strange that Control+mouse wheel does not? – exebook May 04 '18 at 11:10
8

@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... – LDMdev Jun 19 '18 at 15:23
2

I 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. – John Karahalis Feb 15 '19 at 02:44
Thank you for being clear, because I always used the MAJ key and it wouldn't work..! – Shautieh Nov 08 '21 at 01:42
This works, can the setting be fixed? On my ubuntu machine the setting resets after relaunching firefox. – A.W. Jan 04 '22 at 16:38
1

Apparently 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` in `about:config`. – lxxxvi Feb 04 '22 at 08:46
it does not work, it increases size of website and not dev tools – Piliponful Apr 22 '22 at 16:56
@Piliponful If Firefox Developer Tools is already open, be sure to click somewhere within Firefox Developer Tools before pressing `CTRL` + `+`. I've updated the instructions to clarify this. – John Karahalis Jul 13 '22 at 16:31
On Swiss keyboards, this does not work, since the `+` requires pressing `SHIFT` invariably. – ikaerom Dec 29 '22 at 08:47
@exebook, `CTRL`+`mouse` now works, at least on my machine. – John Karahalis Jun 12 '23 at 17:24
@ ikaerom you need to click somewhere inside the devtools window first. – arana Jun 23 '23 at 00:22

score 67 · Answer 2 · answered Apr 05 '20 at 17:16

67

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

answered Apr 05 '20 at 17:16

vaklinzi

1,913
2
18
30

3

Worked perfectly! – alexpotato Apr 15 '20 at 15:06
4

This 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. – Amarok24 Jul 01 '20 at 14:45
2

this is the solution!! Thanks buddy!! e.g. 1.5 is a nice value! – Hartmut Pfarr Sep 11 '20 at 20:11
1

This should be the answer. Simple and precise. Don't forget to restart firefox everytime you change the value. I set mine to 1.4. – enchance Jul 14 '21 at 01:23
This 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. – ArchNoob Aug 04 '21 at 09:47
The only solution that worked for me. This answer is underrated. – DarkTrick Feb 06 '23 at 02:59
Except... the OP asked for increasing the font size of the code *only*, not the other UI element. Which desire is what brought me here also. – Lawrence Dol Jun 13 '23 at 21:19
Thanks! This is the correct answer, I certainly don't want to be adjusting it every single time I open – Abram Jul 13 '23 at 20:20

score 25 · Accepted Answer · edited Dec 07 '18 at 20:54

25

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.

edited Dec 07 '18 at 20:54

the

21,007
11
68
101

answered Dec 04 '14 at 17:45

Nan Zou

319
2
5

It works! :] chome/userChrome.css was missing in my profile but after I created it, boom! It works! :] – LDMdev Dec 05 '14 at 07:54
This will also style the Markup view: /* Styles for Web developer tools */ @namespace url(http://www.w3.org/1999/xhtml); .CodeMirror, body.theme-body.devtools-monospace { font-family: "Ubuntu Mono", monospace !important; font-size: 15pt !important; } – Mike Ratcliffe Dec 06 '14 at 01:13
You 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: https://forum.userstyles.org/discussion/40767/how-do-i-increase-stylish-editor-fonts-size – ingredient_15939 Apr 24 '15 at 03:34
2

Note 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. – KERR Nov 06 '20 at 04:53

score 17 · Answer 4 · edited Oct 11 '19 at 21:17

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.

Since 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/). — daGo, Sep 23 '19 at 08:31

score 10 · Answer 5 · edited Mar 29 '18 at 07:57

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).

Good overview, however, let's not forget that inside Firefox, the `+` on keyboards with `SHIFT` or `MAJ`works for the main window/tab. It just does not work for the dev tools section inside the same browser. To me, this sounds like an issue which should/could be easily addressed by Firefox dev team. — ikaerom, Dec 29 '22 at 10:33

score 5 · Answer 6 · edited Jan 10 '17 at 16:03

5

You can specify a style for the devtools-monospace class selector. To do so, edit userChrome.css in your mozilla profile's chrome directory, and specify the CSS properties you want. For example:

.devtools-monospace {
    font-family: "Source Code Pro",monospace !important;
    font-size: 16px !important;
}

The userChrome.css needs to be in the chrome folder of your Firefox profile. If the folder don't exist, create it. Your userChrome.css will then override the CSS from Firefox dev tools after you restart the browser.

To find your profile in Windows OS type: Strg + R and then enter:

%APPDATA%\Mozilla\Firefox\Profiles\

edited Jan 10 '17 at 16:03

Toby Speight

27,591
48
66
103

answered Sep 29 '16 at 13:51

Joschi

51
1
2

1

Welcome 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. – Toby Speight Sep 29 '16 at 14:12
1

@TobySpeight what are you talking about? Joschi's answer is the only one that works in the current version of Firefox. +1 – Tobia Jan 10 '17 at 15:49
1

@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). – Toby Speight Jan 10 '17 at 15:58

ovichiro · Answer 7 · 2019-07-06T09:16:50.323

Some elements of Firefox can be styled in the userChrome.css file situated in your Firefox profile's chrome folder.
As of 2018, modify/create ~/.mozilla/firefox/[profile-name]/chrome/userChrome.css with something similar to:

@-moz-document url-prefix("chrome://devtools/content/") {
    * { font-size: 13px !important; }
}

Then restart Firefox.

The solution on the Mozilla forums almost has it right: https://support.mozilla.org/en-US/questions/1198481

Using Ctrl+= or Cmd+= was not ideal for me since it increased fonts for all the elements of the window, including the tab names.

Using .devtools-monospace { font-size: 13px !important;} was almost ok, but it did not affect the Debugger and Network tabs.

Using @bohag_bihu's solution had side effects for the address bar and some other text inputs.

Thal · Answer 8 · 2017-01-05T19:10:38.713

3

I accidentally had my firefox developer window resized to the minimum (couldn't even read it anymore), "CMD +" (mac) didn't work for me, well only for the main web page even if the console was focused, I just hit: "CMD 0" and it came back to normal, if it can be a good alternative to anyone else ;)

edited Jan 05 '17 at 19:10

answered Jan 05 '17 at 18:59

Thal

41
2

Welcome to Stack Overflow! This does not really answer the question. Take a minute to read through [How to Answer](http://stackoverflow.com/questions/how-to-answer) – Timothy Truckle Jan 05 '17 at 22:28
1

well, 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?". – loic.jaouen Mar 09 '17 at 23:08

score 2 · Answer 9 · answered Dec 04 '14 at 15:29

2

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.

answered Dec 04 '14 at 15:29

pbrosset

729
3
5

And is there any easy way to ensure devtools has focus? It seems very hard to select it! – Matthew Wilcoxson Apr 30 '15 at 10:56
Click the console tab, then any console message, so it's highlighted. Then Ctrl + – Michael Cole Nov 02 '15 at 13:55
The 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. – Shautieh Nov 08 '21 at 01:45

score 1 · Answer 10 · answered Oct 24 '19 at 14:30

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;
}

anithegregorian · Answer 11 · 2021-07-03T07:26:05.840

This one works on FF => 68.0 Linux with userChrome.css. Inspector tools are now using CSS variables and the inspector tree itself is loaded in an iframe so none of the tweaks actually worked esp. with .CodeMirror classes.

You can find all the variables in this file (just copy paste below URL in FF to view source)

resource://devtools/client/themes/variables.css

For the userChrome.css part here's what solved it for me.

/* @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); */

:root {
  /* Text sizes */
  --theme-code-font-size: 13px !important;
}

If userChrome.css is not loaded create userContent.css and add the same rulesets. Tried and tested on FF Mac/Linux 89

Increase code font size in firefox developer tool

11 Answers11

Linked