Increase code font size in firefox developer tool












49















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.










share|improve this question





























    49















    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.










    share|improve this question



























      49












      49








      49


      16






      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.










      share|improve this 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.







      firefox font-size firefox-developer-tools






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Dec 7 '18 at 20:53









      guaka

      10.9k74885




      10.9k74885










      asked Dec 3 '14 at 13:49









      LDMdevLDMdev

      353139




      353139
























          8 Answers
          8






          active

          oldest

          votes


















          13














          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.






          share|improve this answer


























          • It works! :] chome/userChrome.css was missing in my profile but after I created it, boom! It works! :]

            – LDMdev
            Dec 5 '14 at 7:54






          • 1





            Mozilla solution

            – LDMdev
            Dec 5 '14 at 8:33













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

            – Mike Ratcliffe
            Dec 6 '14 at 1: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: forum.userstyles.org/discussion/40767/…

            – ingredient_15939
            Apr 24 '15 at 3:34





















          126















          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.






          share|improve this answer





















          • 5





            Great it works, but isn't it strange that Control+mouse wheel does not?

            – exebook
            May 4 '18 at 11:10






          • 7





            This should be the Accepted answer!

            – Combine
            Jun 4 '18 at 7:15






          • 4





            @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











          • I see... Still this is more easy and sexy answer.

            – Combine
            Jun 22 '18 at 12:49











          • This should be selected as answer.

            – Vitaliy Terziev
            Feb 14 at 22:42



















          8














          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.






          share|improve this answer


























          • As of Sep'18 this works without a glitch.

            – Juan Lanus
            Sep 27 '18 at 18:45



















          6














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






          share|improve this answer

































            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%MozillaFirefoxProfiles





            share|improve this answer


























            • 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











            • @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





















            5














            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.






            share|improve this answer

































              1














              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.






              share|improve this answer
























              • 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 2 '15 at 13:55





















              0














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






              share|improve this answer


























              • Welcome to Stack Overflow! This does not really answer the question. Take a minute to read through How to Answer

                – Timothy Truckle
                Jan 5 '17 at 22:28











              • 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 9 '17 at 23:08













              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f27273389%2fincrease-code-font-size-in-firefox-developer-tool%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              8 Answers
              8






              active

              oldest

              votes








              8 Answers
              8






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              13














              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.






              share|improve this answer


























              • It works! :] chome/userChrome.css was missing in my profile but after I created it, boom! It works! :]

                – LDMdev
                Dec 5 '14 at 7:54






              • 1





                Mozilla solution

                – LDMdev
                Dec 5 '14 at 8:33













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

                – Mike Ratcliffe
                Dec 6 '14 at 1: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: forum.userstyles.org/discussion/40767/…

                – ingredient_15939
                Apr 24 '15 at 3:34


















              13














              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.






              share|improve this answer


























              • It works! :] chome/userChrome.css was missing in my profile but after I created it, boom! It works! :]

                – LDMdev
                Dec 5 '14 at 7:54






              • 1





                Mozilla solution

                – LDMdev
                Dec 5 '14 at 8:33













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

                – Mike Ratcliffe
                Dec 6 '14 at 1: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: forum.userstyles.org/discussion/40767/…

                – ingredient_15939
                Apr 24 '15 at 3:34
















              13












              13








              13







              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.






              share|improve this answer















              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.







              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Dec 7 '18 at 20:54









              guaka

              10.9k74885




              10.9k74885










              answered Dec 4 '14 at 17:45









              Nan ZouNan Zou

              1994




              1994













              • It works! :] chome/userChrome.css was missing in my profile but after I created it, boom! It works! :]

                – LDMdev
                Dec 5 '14 at 7:54






              • 1





                Mozilla solution

                – LDMdev
                Dec 5 '14 at 8:33













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

                – Mike Ratcliffe
                Dec 6 '14 at 1: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: forum.userstyles.org/discussion/40767/…

                – ingredient_15939
                Apr 24 '15 at 3:34





















              • It works! :] chome/userChrome.css was missing in my profile but after I created it, boom! It works! :]

                – LDMdev
                Dec 5 '14 at 7:54






              • 1





                Mozilla solution

                – LDMdev
                Dec 5 '14 at 8:33













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

                – Mike Ratcliffe
                Dec 6 '14 at 1: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: forum.userstyles.org/discussion/40767/…

                – ingredient_15939
                Apr 24 '15 at 3:34



















              It works! :] chome/userChrome.css was missing in my profile but after I created it, boom! It works! :]

              – LDMdev
              Dec 5 '14 at 7:54





              It works! :] chome/userChrome.css was missing in my profile but after I created it, boom! It works! :]

              – LDMdev
              Dec 5 '14 at 7:54




              1




              1





              Mozilla solution

              – LDMdev
              Dec 5 '14 at 8:33







              Mozilla solution

              – LDMdev
              Dec 5 '14 at 8:33















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

              – Mike Ratcliffe
              Dec 6 '14 at 1:13







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

              – Mike Ratcliffe
              Dec 6 '14 at 1: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: forum.userstyles.org/discussion/40767/…

              – ingredient_15939
              Apr 24 '15 at 3:34







              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: forum.userstyles.org/discussion/40767/…

              – ingredient_15939
              Apr 24 '15 at 3:34















              126















              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.






              share|improve this answer





















              • 5





                Great it works, but isn't it strange that Control+mouse wheel does not?

                – exebook
                May 4 '18 at 11:10






              • 7





                This should be the Accepted answer!

                – Combine
                Jun 4 '18 at 7:15






              • 4





                @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











              • I see... Still this is more easy and sexy answer.

                – Combine
                Jun 22 '18 at 12:49











              • This should be selected as answer.

                – Vitaliy Terziev
                Feb 14 at 22:42
















              126















              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.






              share|improve this answer





















              • 5





                Great it works, but isn't it strange that Control+mouse wheel does not?

                – exebook
                May 4 '18 at 11:10






              • 7





                This should be the Accepted answer!

                – Combine
                Jun 4 '18 at 7:15






              • 4





                @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











              • I see... Still this is more easy and sexy answer.

                – Combine
                Jun 22 '18 at 12:49











              • This should be selected as answer.

                – Vitaliy Terziev
                Feb 14 at 22:42














              126












              126








              126








              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.






              share|improve this answer
















              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.







              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Nov 28 '18 at 21:35

























              answered Dec 3 '14 at 20:21









              John KarahalisJohn Karahalis

              1,2162511




              1,2162511








              • 5





                Great it works, but isn't it strange that Control+mouse wheel does not?

                – exebook
                May 4 '18 at 11:10






              • 7





                This should be the Accepted answer!

                – Combine
                Jun 4 '18 at 7:15






              • 4





                @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











              • I see... Still this is more easy and sexy answer.

                – Combine
                Jun 22 '18 at 12:49











              • This should be selected as answer.

                – Vitaliy Terziev
                Feb 14 at 22:42














              • 5





                Great it works, but isn't it strange that Control+mouse wheel does not?

                – exebook
                May 4 '18 at 11:10






              • 7





                This should be the Accepted answer!

                – Combine
                Jun 4 '18 at 7:15






              • 4





                @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











              • I see... Still this is more easy and sexy answer.

                – Combine
                Jun 22 '18 at 12:49











              • This should be selected as answer.

                – Vitaliy Terziev
                Feb 14 at 22:42








              5




              5





              Great it works, but isn't it strange that Control+mouse wheel does not?

              – exebook
              May 4 '18 at 11:10





              Great it works, but isn't it strange that Control+mouse wheel does not?

              – exebook
              May 4 '18 at 11:10




              7




              7





              This should be the Accepted answer!

              – Combine
              Jun 4 '18 at 7:15





              This should be the Accepted answer!

              – Combine
              Jun 4 '18 at 7:15




              4




              4





              @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





              @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













              I see... Still this is more easy and sexy answer.

              – Combine
              Jun 22 '18 at 12:49





              I see... Still this is more easy and sexy answer.

              – Combine
              Jun 22 '18 at 12:49













              This should be selected as answer.

              – Vitaliy Terziev
              Feb 14 at 22:42





              This should be selected as answer.

              – Vitaliy Terziev
              Feb 14 at 22:42











              8














              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.






              share|improve this answer


























              • As of Sep'18 this works without a glitch.

                – Juan Lanus
                Sep 27 '18 at 18:45
















              8














              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.






              share|improve this answer


























              • As of Sep'18 this works without a glitch.

                – Juan Lanus
                Sep 27 '18 at 18:45














              8












              8








              8







              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.






              share|improve this answer















              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.







              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Jan 27 at 7:38

























              answered Dec 18 '16 at 13:01









              daGodaGo

              569613




              569613













              • As of Sep'18 this works without a glitch.

                – Juan Lanus
                Sep 27 '18 at 18:45



















              • As of Sep'18 this works without a glitch.

                – Juan Lanus
                Sep 27 '18 at 18:45

















              As of Sep'18 this works without a glitch.

              – Juan Lanus
              Sep 27 '18 at 18:45





              As of Sep'18 this works without a glitch.

              – Juan Lanus
              Sep 27 '18 at 18:45











              6














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






              share|improve this answer






























                6














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






                share|improve this answer




























                  6












                  6








                  6







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






                  share|improve this answer















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







                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Mar 29 '18 at 7:57









                  Xavier Guihot

                  7,62592636




                  7,62592636










                  answered Mar 9 '17 at 23:46









                  loic.jaouenloic.jaouen

                  29137




                  29137























                      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%MozillaFirefoxProfiles





                      share|improve this answer


























                      • 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











                      • @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


















                      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%MozillaFirefoxProfiles





                      share|improve this answer


























                      • 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











                      • @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
















                      5












                      5








                      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%MozillaFirefoxProfiles





                      share|improve this answer















                      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%MozillaFirefoxProfiles






                      share|improve this answer














                      share|improve this answer



                      share|improve this answer








                      edited Jan 10 '17 at 16:03









                      Toby Speight

                      17.1k134367




                      17.1k134367










                      answered Sep 29 '16 at 13:51









                      JoschiJoschi

                      5112




                      5112













                      • 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











                      • @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





















                      • 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











                      • @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



















                      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





                      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




                      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





                      @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













                      @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







                      @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













                      5














                      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.






                      share|improve this answer






























                        5














                        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.






                        share|improve this answer




























                          5












                          5








                          5







                          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.






                          share|improve this answer















                          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.







                          share|improve this answer














                          share|improve this answer



                          share|improve this answer








                          edited Mar 29 '18 at 7:54









                          Xavier Guihot

                          7,62592636




                          7,62592636










                          answered Mar 27 '18 at 21:36









                          ovchovch

                          5114




                          5114























                              1














                              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.






                              share|improve this answer
























                              • 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 2 '15 at 13:55


















                              1














                              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.






                              share|improve this answer
























                              • 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 2 '15 at 13:55
















                              1












                              1








                              1







                              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.






                              share|improve this answer













                              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.







                              share|improve this answer












                              share|improve this answer



                              share|improve this answer










                              answered Dec 4 '14 at 15:29









                              pbrossetpbrosset

                              72635




                              72635













                              • 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 2 '15 at 13:55





















                              • 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 2 '15 at 13:55



















                              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





                              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 2 '15 at 13:55







                              Click the console tab, then any console message, so it's highlighted. Then Ctrl +

                              – Michael Cole
                              Nov 2 '15 at 13:55













                              0














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






                              share|improve this answer


























                              • Welcome to Stack Overflow! This does not really answer the question. Take a minute to read through How to Answer

                                – Timothy Truckle
                                Jan 5 '17 at 22:28











                              • 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 9 '17 at 23:08


















                              0














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






                              share|improve this answer


























                              • Welcome to Stack Overflow! This does not really answer the question. Take a minute to read through How to Answer

                                – Timothy Truckle
                                Jan 5 '17 at 22:28











                              • 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 9 '17 at 23:08
















                              0












                              0








                              0







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






                              share|improve this answer















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







                              share|improve this answer














                              share|improve this answer



                              share|improve this answer








                              edited Jan 5 '17 at 19:10

























                              answered Jan 5 '17 at 18:59









                              ThalThal

                              111




                              111













                              • Welcome to Stack Overflow! This does not really answer the question. Take a minute to read through How to Answer

                                – Timothy Truckle
                                Jan 5 '17 at 22:28











                              • 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 9 '17 at 23:08





















                              • Welcome to Stack Overflow! This does not really answer the question. Take a minute to read through How to Answer

                                – Timothy Truckle
                                Jan 5 '17 at 22:28











                              • 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 9 '17 at 23:08



















                              Welcome to Stack Overflow! This does not really answer the question. Take a minute to read through How to Answer

                              – Timothy Truckle
                              Jan 5 '17 at 22:28





                              Welcome to Stack Overflow! This does not really answer the question. Take a minute to read through How to Answer

                              – Timothy Truckle
                              Jan 5 '17 at 22:28













                              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 9 '17 at 23:08







                              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 9 '17 at 23:08




















                              draft saved

                              draft discarded




















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f27273389%2fincrease-code-font-size-in-firefox-developer-tool%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

                              Calculate evaluation metrics using cross_val_predict sklearn

                              Insert data from modal to MySQL (multiple modal on website)