104

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

4

11 回答 11

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

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

于 2014-12-03T20:21:25.923 回答
55

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

于 2020-04-05T17:16:20.447 回答
23

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

于 2014-12-04T17:45:05.740 回答
17

打开 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: 12px !important; }全球范围内，它的工作原理。

于 2016-12-18T13:01:28.803 回答
10

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

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

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

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

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

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

于 2017-03-09T23:46:17.813 回答
5

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\
于 2016-09-29T13:51:45.860 回答
5

Firefox 的某些元素可以在位于 Firefox 配置文件的chrome文件夹中的userChrome.css文件中设置样式。 截至 2018 年，修改/创建~/.mozilla/firefox/[profile-name]/chrome/userChrome.css类似于：

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

然后重启火狐。

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

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

使用.devtools-monospace { font-size: 13px !important;}几乎没问题，但它不影响调试器和网络选项卡。

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

于 2018-03-27T21:36:23.927 回答
2

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

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

于 2014-12-04T15:29:47.267 回答
2

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

于 2017-01-05T18:59:26.317 回答
0

对于某些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;
}
于 2019-10-24T14:30:30.403 回答
0

这个适用于 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 上试用和测试

于 2020-03-04T17:04:29.700 回答