it-swarm.dev

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

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

54
LDMdev

您需要在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;
}

结果如下:

firefox

这只会更改调试器和样式编辑器。 html检查器有一个不同的选择器。不确定那是什么。

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

要清楚,我的意思是 + 键。你不需要持有 Shift 这样做。

138
John Karahalis

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

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

* { font-size: 12px !important; }全局,它的工作原理。

9
daGo

如前所述,确定答案是肯定的 cmd++

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

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

如果你想回答@Timothy_Truckle要求的问题,这里有几个(当然还是关注开发工具窗格):

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

这对你们有些疑惑,为什么有些人觉得很难简单地按下 cmd++ 或者为什么有些人发现很难专注于开发工具窗格(因为他们实际上专注于开发工具窗格,但结果就好像他们专注于Web视图窗格)。

7
loic.jaouen

您可以为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 dev工具中的CSS。

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

%APPDATA%\Mozilla\Firefox\Profiles\
5
Joschi

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

5
ovichiro

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

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

1
pbrosset

我不小心将我的firefox开发人员窗口调整到最小(甚至不能再读它),“CMD +”(mac)对我来说不起作用,即使控制台是专注的,也只适用于主网页,我刚刚点击:“CMD 0”它恢复正常,如果它可以替代其他任何人;)

0
Thal