在Firefox开发者工具中增加代码字体大小

Question

如何在Firefox开发者工具中增大代码字体？ 我知道有缩放功能，但我只想针对代码设置字体大小。

- LDMdev

---

对于那些寻找答案的人，请注意：在当前日期，不要浪费时间尝试使用 userChrome.css 调整的答案，这些都不起作用。 - Mikhail V

Answer 1

1. 打开Firefox开发者工具
2. 在Firefox开发者工具内的任何位置点击
3. 在Unix/Win操作系统中按下Ctrl++，在Mac操作系统中按下Cmd++

为了明确，我指的是+键。在大多数键盘上，您不需要同时按下Shift键。

- John Karahalis

---

好的，但是使用鼠标滚轮加上Ctrl键不起作用，这不奇怪吗？ - exebook

在我的问题中，我说“我想仅设置代码的字体大小”，因此这并不是正确的答案，因为CTRL +增加整个窗口的大小，还包括控件，而不仅仅是代码... 在我的问题中，我提到“我只想设置代码的字体大小”，所以这个回答是不正确的，因为CTRL+增加整个窗口的大小，也会调整控件的大小，而不仅仅是代码的大小。请重新回答我的问题。 - LDMdev

我同意 @LDMdev 的观点。这不是最好的解决方案。他们问如何仅增加代码的字体大小；这会增加所有文本的字体大小。话虽如此，我很高兴人们发现它有用。 - John Karahalis

这个可以运行，设置能不能固定一下？在我的Ubuntu机器上，每次重新启动Firefox后设置都会重置。 - A.W.

显然，在某些键盘布局（德语...？）中，增加字体大小对DevTools面板没有影响（但是减小字体大小有效）。为了增加字体大小，您必须在“about:config”中设置devtools.toolbox.zoomValue。 - lxxxvi

Answer 2

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

- vaklinzi

---

运作完美！ - alexpotato

现在应该是最佳解决方案！因为使用Ctrl和[+] 或 Ctrl和[-] 进行简单缩放只会影响当前会话中devtools的字体大小！一个永久的解决方案就像这里描述的那样。不需要像大多数答案建议的那样混乱地添加CSS文件！这就是为什么我们在FF中有about:config. - Amarok24

这是解决方案！谢谢伙计！例如，1.5是一个不错的值！ - Hartmut Pfarr

这应该是答案。简单而明确。每次更改值后不要忘记重新启动 Firefox。我将我的设置为1.4。 - enchance

这个功能即使在开发工具从主FF窗口中分离时也可以使用！将使用1.4版本，我还体验到不需要重新启动FF就可以让它正常工作。 - ArchNoob

Answer 3

你需要修改位于路径 ~/.mozilla/firefox/[profile-name]/chrome 下的userChrome.css 文件，将其改为以下内容：

/*  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检查器，有一个不同的选择器。还不确定那是什么。

- Nan Zou

---

成功了！：] 在我的个人资料中缺少chome/userChrome.css，但是在我创建它之后，嘭！成功了！：] - LDMdev

这也将为标记视图设置样式：/* Web开发工具的样式 */ @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

您还可以使用Stylish插件编辑开发人员工具样式。无需编辑userChrome，结果即时生效。 :) 请参见此页面上的最后评论：https://forum.userstyles.org/discussion/40767/how-do-i-increase-stylish-editor-fonts-size - ingredient_15939

请注意，较新版本的Firefox不再默认支持userChrome（已被弃用）-因此现在最有效的答案是使用Ctrl + Plus（+）键组合。 - KERR

Answer 4

打开 Firefox 浏览器，在地址栏输入 about:support，进入应用基础信息部分，选择配置文件夹 - 打开文件夹。这将启动您的文件管理器。如果没有chrome文件夹，则创建一个。然后进入chrome文件夹并创建一个userChrome.css文件，用文本编辑器打开它并添加： .devtools-monospace {font-size: 12px!important;} 保存。请确保重启 Firefox。

更新：当在 devtools 控制台中输入文本时，实际上字体大小要比输出（按 Enter 键后）小一些。为了使它们相同，我们还需要更改其相应 CSS 类的字体大小。我不知道它的类名，所以我只是全局设置了 * { font-size: 12px !important; }，它起作用了。

- daGo

---

自从Snap变得流行起来，我尝试通过它安装Firefox。但问题是：看起来我给出的答案在这种情况下不起作用（我在~/snap/firefox/common/.mozilla/firefox/myProfile.default/创建了chrome文件夹）。 - daGo

Answer 5

所以，如前所述，简短的答案是cmd++。
但是您的键盘上可能没有直接访问+符号（无数字键盘、笔记本电脑、奇怪的布局）。
然后您需要先按下maj来访问+符号，例如在美式键盘布局上：maj+=。
不幸的是，即使您正确地聚焦于开发工具窗格，cmd+maj+=会增加Web视图窗格的字体，而 cmd + - 会减小开发工具窗格的字体。
最终，您将得到一个字体大小太小以至于无法阅读的Web工具窗格，并且无法增加它。
然后@Thal的答案很方便：一旦聚焦于开发工具窗格，cmd+0会将开发工具的字体大小重置为原始大小。
如果您想像@Timothy_Truckle一样回答问题，请尝试以下方法之一（当然仍然聚焦于开发工具窗格）：

• 切换到美国键盘布局，然后按cmd+=
• 查找一个具有直接访问+符号的键盘布局，切换到该布局，然后按cmd++

这就是为什么有些人发现简单地按cmd++很难或有些人发现聚焦于开发工具窗格很难的原因（因为他们实际上聚焦于开发工具窗格，但结果却像是聚焦于Web视图窗格）。

- loic.jaouen

---

很好的概述，但是我们不要忘记，在Firefox中，带有SHIFT或MAJ的键盘上的 + 适用于主窗口/标签页。但它在同一浏览器内的dev tools部分不起作用。对我来说，这听起来像是Firefox开发团队可以轻松解决的问题。 - ikaerom

Answer 6

Firefox的一些元素可以在位于您的Firefox配置文件的chrome文件夹中的userChrome.css文件中进行样式设置。
截至2018年，您可以使用类似以下内容修改/创建~/.mozilla/firefox/[profile-name]/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 的解决方案会对地址栏和其他一些文本输入产生副作用。

- ovichiro

Answer 7

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

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

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

在 Windows 操作系统中查找配置文件，请键入：Strg + R，然后输入：

%APPDATA%\Mozilla\Firefox\Profiles\

- Joschi

---

欢迎来到Stack Overflow！虽然这段代码可能有助于解决问题，但它并没有解释为什么以及如何回答这个问题。提供这种额外的上下文将显著提高其长期教育价值。请编辑您的答案以添加说明，包括适用的限制和假设。 - Toby Speight

@TobySpeight 你在说什么？Joschi的回答是当前版本的Firefox中唯一可行的。+1 - Tobia

@Tobia，自从我发表那条评论以来，答案已经被编辑过了。现在它明显好多了（虽然它更偏向食谱而不是解释）。 - Toby Speight

Answer 8

我不小心把我的火狐开发者窗口调整到了最小尺寸（甚至无法阅读），"CMD +"（Mac）对我没有用，即使控制台处于焦点状态，只对主网页有效。我只需按下 "CMD 0"，它就恢复正常了，如果这对其他人来说是一个好的替代方案 :)

- Thal

---

欢迎来到 Stack Overflow！这并没有真正回答问题。请花一分钟阅读 如何回答问题。 - Timothy Truckle

好的，那就是我一直在寻找的答案 :)但你说得对，这个答案并不是关于“如何增加字体大小？”而是关于“如何将字体大小恢复到原始大小？”的答案。 - loic.jaouen

Answer 9

如John所说，增加开发工具中字体大小的方法是使用ctrl/cmd+，就像在网页上一样。 实际上，开发工具就是一个网页。 您只需要确保先聚焦于开发工具框架。

目前，恐怕没有仅增加代码字体大小的方法。

- pbrosset

---

还有没有什么简单的方法可以确保 devtools 处于焦点状态？似乎很难选择它！ - Matthew Wilcoxson

点击控制台选项卡，再点击任何控制台消息，使其被突出显示。然后按Ctrl +键。 - Michael Cole

与网页不同的是，当按下MAJ键时它不起作用（例如在法国键盘上，您需要按下MAJ才能获得“+”）。但在两种情况下都可以不按MAJ键来实现。 - Shautieh

Answer 10

对于某些 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");

一旦设置了代码命名空间规则， 您只需要添加选择器和样式：

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

- Bass