Increase code font size in firefox developer tool

问题:

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.

回答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.

回答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.

回答3:

Open Firefox and type about:support. In Application Basics section chose Profile Directory - Open Directory. 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.

回答4:

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

回答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\

回答6:

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.

回答7:

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.

回答8:

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