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

Question

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

Answer 1

1. 打开 Firefox 开发者工具
2. 在 Unix/Win 上按 Ctrl++ 或在 Mac 上按 Cmd++

明确地说，我的意思是 + 键。执行此操作时无需按住 Shift 键。

Answer 2

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

恐怕现在没有办法只增加代码的字体大小。

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 检查器有一个不同的选择器。还不知道那是什么。

Answer 4

您可以为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\

Answer 5

打开 Firefox 并输入 about:support。在 Application Basics 部分选择 Profile Folder - Open Folder。它会触发你的文件管理器。如果没有chrome 文件夹，则创建它。之后转到这个chrome 文件夹并创建一个userChrome.css 文件，在文本编辑器中打开它并添加： .devtools-monospace {font-size: 12px!important;} 保存。请务必重新启动 Firefox。

更新：有一件事困扰着我 - 而 在 devtools 控制台中输入的文本实际上比输出中的文本要小一些（按 Enter 后）。为了使其相同，我们也需要更改其对应的 css 类的 font-size。我还不知道它的类名，所以我只是设置了

* { font-size: 12px !important; } 全局有效。

Answer 6

我不小心将我的 Firefox 开发人员窗口调整到最小（甚至无法再阅读它），“CMD +”（mac）对我不起作用，即使控制台是，也仅适用于主网页专注，我只是点击：“CMD 0”，它恢复正常，如果它可以成为其他任何人的好选择;）

Answer 7

当然，如前所述，简短的答案是 cmd++。

但是 + 符号可能无法在您的键盘上直接访问（没有数字小键盘、笔记本电脑、奇怪的布局）。
然后，您必须先按 maj 才能访问 + 符号，例如在美国键盘布局上：maj+=。
不幸的是，即使您正确地专注于开发工具窗格，cmd+maj+= 也会增加 Web 视图窗格的字体，而cmd+- 减小开发工具窗格上的字体。
你最终会得到一个字体大小非常小的网络工具窗格，以至于无法阅读，并且无法增加它。

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

如果您想像@Timothy_Truckle 一样回答问题，这里有几个（当然，仍然关注开发工具窗格）：

• 切换到美式键盘布局并按cmd+=
• 找到一个可以直接访问+的键盘布局，切换到它，然后按cmd++

这让你们想知道为什么有些人觉得很难简单地按 cmd++ 或者为什么有些人觉得很难专注于开发工具窗格（因为他们实际上专注于开发工具窗格，但结果就像他们专注于 Web 视图窗格一样）。

Answer 8

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 的解决方案对地址栏和其他一些文本输入有副作用。

Answer 9

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

这将工作：

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

Answer 10

这个可以在 FF => 68.0 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;
}

如果未加载 userChrome.css，则创建 userContent.css 并添加相同的规则集。在 FF Mac/Linux 89 上试用和测试

Answer 11

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