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

Question

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

Answer 1

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

要清楚，我的意思是 + 键。在进行此操作时，您不需要按住 Shift 。

Answer 2

您需要使用以下内容修改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检查器有一个不同的选择器。不确定那是什么。

Answer 3

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

Answer 4

打开Firefox并输入about:support。在应用程序基础部分中，选择了配置文件目录 - 打开目录。它将激活您的文件管理器。如果没有chrome文件夹而不是创建它。之后转到此chrome文件夹并创建userChrome.css文件，在文本编辑器中打开它并添加： .devtools-monospace {font-size: 12px!important;} 保存。请务必重新启动Firefox。

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

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

Answer 5

如前所述，确定答案是 cmd + + 。

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

然后@Thal的答案很方便，一旦专注于开发工具窗格 cmd + 0 将开发工具的字体大小重置为原版的。

如果你想回答像@Timothy_Truckle所要求的问题，这里有几个问题（当然仍然关注开发工具窗格）：

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

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

Answer 6

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

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

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

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

%APPDATA%\Mozilla\Firefox\Profiles\

Answer 7

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 8

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

我担心现在无法只增加代码的字体大小。

Answer 9

我意外地将我的firefox开发人员窗口调整到最小（甚至不能再读它），“CMD +”（mac）对我来说不起作用，即使控制台是专注，我只是点击：“CMD 0”它恢复正常，如果它可以替代其他人;）

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

一旦设置了@namespace规则，

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

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

Answer 11

该版本适用于带有userChrome.css的FF 68 Linux。我认为检查器工具现在正在使用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;
}