在firefox开发人员工具中增加代码字体大小

如何在Firefox开发人员工具中增加代码字体？我知道有一个缩放功能，但是我只想为代码设置字体大小。

您需要修改userChrome.css下~/.mozilla/firefox/[profile-name]/chrome这个：

/*  Styles for Web developer tools */
@namespace url(http://www.w3.org/1999/xhtml);
.CodeMirror {
    font-family:    "Ubuntu Mono", monospace !important;
    font-size:      15pt !important;
}

结果看起来像这样：

这仅更改调试器和样式编辑器。html检查器有一个不同的选择器。不知道那是什么。

1. 打开Firefox开发人员工具
2. 按Ctrl++在Unix /赢或Cmd+ +Mac上。

要明确，我的意思是+关键。您无需Shift在执行过程中按住。

打开Firefox并输入about:support。在“应用程序基础”部分中，选择“配置文件文件夹-打开文件夹”。它将解雇您的文件管理器。如果没有chrome文件夹，则创建它。之后，转到该chrome文件夹并创建一个userChrome.css文件，在文本编辑器中将其打开并添加： .devtools-monospace {font-size: 12px!important;} 保存。确保重新启动Firefox。

更新：有一件事困扰着我-而打字在devtools控制台比实际输出的文本有点小（后按Enter键）。为了使其相同，我们也需要为其相应的CSS类更改font-size。我还不知道它的班级名称，所以我刚设置

* { font-size: 12px !important; } 全球范围内，并且有效。

也许更简单的方法是打开about:config并设置 devtools.toolbox.zoomValue更大的价值。

可以肯定的是，如前所述，简短的答案是cmd+ +。

但是该+符号可能无法直接在键盘上访问（没有数字键盘，笔记本电脑，奇怪的布局）。
然后，您必须先按maj来访问该+符号，例如在美国键盘布局上：maj+ =。
不幸的是，即使你是正确集中在开发工具窗格，cmd+ maj+=增加了Web视图窗格中的字体，而cmd+-降低对开发工具窗格中的字体。
最后，您将获得一个Web工具窗格，该窗格的字体大小是如此之小以至于无法读取，并且无法增加字体大小。

然后，@ Thal的答案就派上用场了，一旦专注于开发工具窗格cmd+0将开发工具的字体大小重置为原始字体。

如果您想回答@Timothy_Truckle所要求的问题，请参考以下几个（当然，仍然要关注开发工具窗格）：

• 切换到美国键盘布局，然后按cmd+=
• 找到可+直接访问的键盘布局，切换到该布局，然后按cmd++

这是给你们想知道为什么有些人很难仅按cmd++或为什么有些人很难专注于开发工具窗格（因为他们实际上专注于开发工具窗格，但是结果就像他们专注于Web一样）查看窗格）。

您可以为devtools-monospace类选择器指定样式。为此，请userChrome.css在您的mozilla配置文件的chrome目录中进行编辑，然后指定所需的CSS属性。例如：

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

该userChrome.css需求是在chrome你的Firefox的配置文件夹中。如果该文件夹不存在，请创建它。userChrome.css重新启动浏览器后，您将覆盖Firefox开发工具中的CSS。

要在Windows操作系统中找到您的配置文件，请输入：Strg + R，然后输入：

%APPDATA%\Mozilla\Firefox\Profiles\

可以在Firefox配置文件的chrome文件夹中的userChrome.css文件中设置Firefox的某些元素的样式。 从2018年起，使用类似以下内容的内容修改/创建〜/ .mozilla / firefox / [配置文件名称] /chrome/userChrome.css：

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

然后重新启动Firefox。

Mozilla论坛上的解决方案几乎是正确的：https : //support.mozilla.org/en-US/questions/1198481

使用Ctrl+=或Cmd+=对我而言并不理想，因为它增加了窗口所有元素（包括选项卡名称）的字体。

使用.devtools-monospace { font-size: 13px !important;}几乎可以，但是它不会影响“调试器”和“网络”选项卡。

使用@bohag_bihu的解决方案会对地址栏和其他一些文本输入产生副作用。

我不小心将firefox开发人员窗口的大小调整到最小（甚至无法读取），“ CMD +”（mac）对我不起作用，即使控制台集中了，它也仅对主网页有效，我只需点击：“ CMD 0”，它就可以恢复正常，如果它可以替代其他任何人；）

如John所说，在devtools中增加字体大小的方法是使用ctrl / cmd +，就像在网页上一样。实际上，devtools是一个网页。您只需要确保首先关注devtools框架。

恐怕现在无法仅增加代码的字体大小。

对于某些Mozilla版本（我在相当于Mozilla Firefox 52 ESR的Mozilla SeaMonkey上进行了测试），需要显式设置的根元素。

这将起作用：

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

虽然这不会：

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

一旦@namespace规则已经确定，

您只需要添加选择器和样式：

.devtools-monospace,
.CodeMirror,
.CodeMirror pre {
    font-family: "Courier New", monospace !important;
    font-size: 10pt !important;
}

这适用于FF 68 Linux和Linux userChrome.css。我认为检查器工具现在正在使用CSS变量，并且检查器树本身已加载到iframe中，因此没有任何调整特别有效。与.CodeMirror类。

您可以在此文件中找到所有变量（只需复制粘贴到FF中的URL下即可查看源代码）

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

对于userChrome.css部分来说，这就是为我解决的问题。

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

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