入坑 Firefox Developer Edition 及 Mobile 版，看这一篇就够了

文章的 TOC 太多了，看起来不方便？PC 端可以看看我的 《两个 TamperMonkey 脚本，解决掘金阅读体验的三点不爽》，可以解决一些掘金阅读体验问题。

我写的「入坑」系列文章：

1. 《入坑 Mac，看这一篇就够了》
2. 《入坑 iTerm + OMZ，看这一篇就够了》
3. 《入坑 Firefox Developer Edition 及 Mobile 版，看这一篇就够了》← 本文
4. 《入坑 WebStorm，看这一篇就够了》
5. 《入坑 VSCode，看这一篇就够了》
6. 《入坑 Vim，看这一篇就够了》
7. 《入坑 Git，看这一篇就够了》
8. 《入坑 Docusaurus，看这一篇就够了》

🎼 前言

虽然目前 Chrome 占据着浏览器市场的大半壁江山，但我依然是 Firefox 的死忠。

作为开发者，Firefox Developer Edition 更是从界面、功能上满足我对浏览器的一切幻想。

本文通过对 Firefox 的设置、插件、快捷键、一些小技巧的介绍，为读者详细介绍既可做常规浏览器，又可做开发浏览器的 Firefox Developer Edition。入坑 Firefox Developer Edition，看这一篇就够了。

主要内容

适合读者

• 只认 Chrome，对 Firefox 有误解的同学
• 喜欢 Firefox 的同学

编辑历史

日期	版本说明
2023/09/02	V2，由《玩转...》重命名为《入坑...》
2023/08/17	V1

💋 Why Firefox Developer Edition

在 《入坑 Mac》 中，我就提到了我的主开发浏览器是 Firefox Developer Edition，原因很简单：

• 从 Firefox 3 开始就用它，用的久，感情深
• 看着舒服（尤其是 Developer Edition 太适合程序员审美了），用着顺手
• 开发者工具强大好用，其前身 Firebug 就是业界标杆
• Web 标准实现全面且不夹带私货（以 Firefox 为开发工具写的代码几乎没有在 Chrome 下出过问题，而很多人在 Chrome 下开发的却..）

当然，Chrome 也是必装的浏览器，仅下述情况用：

1. 有 Chrome 专属 BUG 要解的时候
2. 无良网站（通常是一些对内应用）说「你的浏览器太老了，请用最新版的 Chrome」的时候（这提示真的很不负责）

那些我离不开的功能

about:config

Firefox 有成千上万的配置项，只有少部分能够在 Preference 中操作。通过 about:config 你可以做更多的设置，这有时候非常有用，前提是你知道自己在干什么。

about:config 可能是我最喜欢的一个 Firefox 特性了。很多无法在 GUI 偏好设置做的隐藏偏好都可以在这里进行调校，唯一的问题就是配置项没有说明文案。

注意：about:config 做的修改不会被同步。

地址栏中输入 about:config 后，Firefox 会给你一个提醒，选择接受风险即可（我不建议把那个勾选框去掉）：

Sidebar

Firefox 有一个非常方便的 Sidebar，可以在浏览网页的同时管理书签、浏览历史，而不需要像 Chrome 那样必须在一个单独的 Tab 页中进行操作。

同时，Firefox 的 Sidebar 也是一个可扩展点，通过插件，在里边进行 AI 对话等都可以。

Pin Tab

可以把不希望被意外关掉的 Tab Pin 到标签页的最左侧，这样在 ⇧⌘W 关闭所有标签页的时候，它会依然保留。

虽然其他浏览器也有 Pin 功能，但 ⇧⌘W 会无差别全部关闭。

Container Tab

Firefox 提供的 Container Tab 与常规 Tab 完全物理隔离，这意味着同一个站点能够同时登录多个用户，想想这有多方便。

在 about:preferences#containers 中进行管理。更多内容，看官方介绍《Multi-Account Containers》。

Group Tab

不得不说，Firefox 在 Tab 的用户体验上真的是下功夫。它还提供了一个不易发现的好功能，通过拖拽，你可以把两个相关联 Tab 拖到一个组里面，你可以修改这个组的名称和颜色，可以收起这个组以节省顶部空间。

其他亮点功能

全页翻译

自版本 118 起，Firefox 对所有用户开放了 全页翻译功能，能够实时翻译新增的内容。

⚙️ 设置

同步

有 Firefox 账号的，先登录一个，保持云端同步，以下设置不会被同步，可能需要每次新装都设置一次：

• Toolbar 的布局
• about:config 的自定义
• Developer Tools 的设置
• Search Engine

启动 / 退出

默认的启动 / 退出设定我不喜欢，我希望我的浏览器可以：

1. 在启动时打开之前的页面
2. 在我按 ⌘Q 退出时不要啰嗦

偏好设置搜「start」，设置如下：

1. 勾选「Open previous windows and tabs」，默认不勾选
2. 取消勾选「Always check if ...」，默认勾选（虽然 Firefox 是我的最爱，但我充分尊重苹果 Safari 作为自家默认浏览器的默认设定）

搜「confirm」，设置如下：

1. 「Confirm before closing multiple tabs」保持未勾选状态
2. 取消勾选「Confirm before quitting with ⌘Q」，默认勾选

如果以上两个任意一个确认框被触发，可以在确认框中进行配置：

我承认 Firefox 目前这种弹窗式的确认没有 Chrome 那种弱提示友好，但这并不重要。本身这就不是我的用户需求，既然我按了 ⌘Q，那么我就是希望它退出，即使是误操，重启不就好了。

颜色主题

除了 Terminal 之外，我很少有喜欢用暗色模式的地方。

Firefox 的默认主题是追随系统，但如果你搜「theme」去改的话，可能发现改的只有窗体内的主题，工具栏可能永远保持黑色。

你可能认为是 BUG，其实不然。问题的症结在于，about:preferences 下的 Theme 是「Website appearance」，即内容区的主题；而浏览器界面的主题在 about:addons 下（快捷键 ⇧⌘A），选择「System theme - auto」即可。

自定义工具栏

1. 移除 Firefox View

右上角有个 Firefox View 的图标，作用不大，右边还有根很突兀的线，徒然增加丑值，右键移除：

2. 移除书签栏

原因：

1. 我很不喜欢宝贵的纵向空间被浪费
2. 快捷键 ⇧⌘B 可以切换显隐，很方便，完全不需要一直占着空间
3. 我更喜欢 ⌘B 以侧边栏的形式查看书签

3. Pin 一些常用插件

Firefox 默认将插件入口都集中放在了一个菜单下，可以把其中一些展示出来，后面自定义的时候才好进行拖拽。

4. 拖拖拽拽

在工具栏空白处右键，点击「Customize Toolbar...」，然后就是拖拖拽拽的事情了，你甚至可以把一些图标拖到顶部标签栏的右侧（我很喜欢）。

以下是我的配置效果（顶部两边的留白在全屏后将会消失，从而达到我喜欢的完美效果）：

Developer Tools

Firefox 的 Developer Tools 前身是曾经大名鼎鼎的 Firebug。在那个洪荒年代，Firebug 可以说是天使一般的存在，Developer Tools 继承了其优良基因，并且由于更接近底层，更加强大好用。

为了明显区分，我会将 Developer Tools 的主题设置成暗色：

你可以用快捷键 ⌥⌘I 切换 Developer Tools 展示桩体，也可以使用右键 Inspect（审查元素） 打开。

有关 Developer Tools 的功能和使用，这不再赘述，建议看一下官文《Firefox DevTools User Docs》。

👻 能用 about:config 实现的魔法配置

之前提到 about:config 是我离不了的功能之一，且是 Top 1，用英语讲，它就是一个「Hidden Gem」。

那么我们能用它来做哪些事情呢？这里单独拎一个章节讲一下，那些我经常会用到的配置。有的能解决问题，有的适合对默认设置吹毛求疵的人，有的是开发者离不开的。

禁止 ESC 退出全屏

作为严重依赖浏览器的开发人员，全屏是常用的；作为快捷键大师，ESC 键也是经常用的，尤其是在开发者工具中经常会用 ESC 唤出 Console。

但 ESC 有个默认的能力，就是会退出全屏，这就让人很抓狂了。

如下设置：

1. about:config 下搜「fullscreen」或「esc」找到 browser.fullscreen.exit_on_escape
2. 双击该条目将值修改为 false

快捷键新开的 Tab 放在当前 Tab 右侧

💥 但是！Tab 栏的加号按钮也会这样，所以慎改。

曾经有个很出名的插件叫 Tab Mix Plus，可以用来设置 Tab 的展示与行为。但这个插件在 Web Extension 革命后，很久都没有升级适配的迹象，直至目前都没有一个很完整的升级版本。

有些 Feature 我依旧十分想念，比如快捷键新开 Tab，在当前 Tab 右侧打开，而不是大老远地跑到最右侧。

1. about:config 搜 browser.tabs 找到 browser.tabs.insertAfterCurrent
2. 双击该条目将默认值 false 改为 true

实际上，很多 Tab 的行为都都能在这里找到，比如双击 Tab 关闭 browser.tabs.closeTabByDblclick 等，自己发掘吧。

禁用 URL 自动加 www 前缀

有的网站，Firefox 擅自添加 www. 域名前缀而导致无法访问，这样可以解决：

1. about:config 搜 prefix 找到 browser.fixup.alternate.prefix
2. 双击该条目将默认值 www. 清除

绕过站点 Secure Connection Failed 错误

有些网站在 Firefox 上报「Secure Connection Failed」，但在 Chrome 下能够访问，具体的错误码有很多。

如果错误码是「PR_CONNECT_RESET_ERROR」，比如我碰到的很多 github.io 的页面：

可以如下操作：

1. about:config 将 network.dns.disablePrefetch 由默认的 false 改为 true
2. about:networking → DNS 下，点击「Clear DNS Cache」按钮
3. 刷新错误页面，即可

查看源码，代码请折行

查看 HTML 源码，里边的代码一行到很远，找东西非常不方便：

这样可以解决：

1. about:config 搜「wrap」 找到 view_source.wrap_long_lines
2. 双击该条目改值为 true

效果：

解决开发工具 Network 下内容太长而无法预览的问题

如下图，Network 展示了「Response has been truncated」，没法结构化查看返回内容：

1. about:config 搜 responseBodyLimit 找到 devtools.netmonitor.responseBodyLimit
2. 默认是 1048576 即 1M，改大一些就可以了

深入 Shadow DOM 查看样式细节

有些时候，我们调试组件样式，希望能够看到浏览器 Shadow Root 下的细节。

Chrome 可以在 Settigs → Preferences → Elements 下勾选「Show user agent shadow DOM」，但 Firefox 没有类似的选项。可以通过 about:config：

1. acout:config 将 devtools.inspector.showAllAnonymousContent 由默认的 false 双击改为 true
2. 刷新页面

🧩 插件推荐

以下列举一些我常用的 Firefox 插件。

Proxy SwitchyOmega ★★★★★

• URL：addons.mozilla.org/en-US/firef…
• 推荐指数：★★★★★
• 推荐理由：结合 Charles 使用，避免系统代理带来的诸多问题，常用到我将它放到了 Firefox 的右上角

TamperMonkey ★★★★★

• URL：addons.mozilla.org/en-US/firef…
• 推荐指数：★★★★★
• 推荐理由：自定义脚本，可以写一些脚本用来辅助开发或者对一些网站做些小调整，我也把它放到了 Firefox 的右上角

我们可以拿它来做什么呢？

很多内容网站，需要规避外跳风险，对外链会做一层拦截。比如掘金、知乎，它们的做法相同，都是渲染期直接替换。

虽然，但是，所以我选择去掉这一层拦截。

// ==UserScript==
// @name         链接还原
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  你拦我不拦
// @author       Boshit
// @match        https://juejin.cn/post/*
// @match        https://zhuanlan.zhihu.com/p/*
// @icon
// @grant        none
// ==/UserScript==
(function() {
  'use strict';
  
  function getEventTargetLink(el) {
    while (el) {
      if (el.tagName === 'A') {
        return el;
      }
      
      el = el.parentNode;
    }
    
    return null;
  }
  
  function getRealHrefJuejin(href) { // 掘金
    return href.match(/https?:\/\/link\.juejin\.cn\/\?target=(https?.*)/)?.[1];
  }
  
  function getRealHrefZhihu(href) { // 知乎
    return href.match(/https?:\/\/link\.zhihu\.com\/\?target=(https?.*)/)?.[1];
  }
  
  function getRealHref(href) {
    const decodedHref = getRealHrefJuejin(href) || getRealHrefZhihu(href);
    
    return decodedHref ? decodeURIComponent(decodedHref) : '';
  }
  
  document.addEventListener('mousedown', e => {
    const targetLink = getEventTargetLink(e.target);
    
    if (!targetLink?.href) {
      return;
    }
    
    const realHref = getRealHref(targetLink.href);
    
    if (realHref) {
      targetLink.href = realHref;
    }
  }, true);
})();

这样我们在访问掘金/知乎的文章的时候，可以看到 TamperMonkey 上有数字表示当前域名下有多少用户脚本运行，链接也可以直接打开。

Vimium C ★★★★★

任何允许插件运行的页面上，按 ⇧? 可唤出 Vimium C 的快捷键列表，可随时复习：

• URL：addons.mozilla.org/en-US/firef…
• 推荐指数：★★★★★
• 推荐理由：可以让你纯键盘操作浏览器页面，即使不是 Vim 重度用户的我，依然觉得这是个神器，好用

DailyDev ★★★★★

• URL：addons.mozilla.org/en-US/firef…
• 推荐指数：★★★★★
• 推荐理由：替换默认新 Tab 页，有很多高质量文章推荐和技术新闻。早晨到公司，以及中午休息时间，在里边逛一会儿，点开几个感兴趣的看看，已经是我养成的每日习惯了。

BookmarksCleanup ★★★

• URL：addons.mozilla.org/en-US/firef…
• 推荐指数：★★★
• 推荐理由：清理书签中的死链、冗余、空目录等，洁癖患者福音

User-Agent Switcher and Manager ★★★

• URL：addons.mozilla.org/en-US/firef…
• 推荐指数：★★★
• 推荐理由：开发时有切换 UA 需求的时候，就知道它有多重要了

Offline QR Code Generator ★★★☆

• URL：addons.mozilla.org/en-US/firef…
• 推荐指数：★★★☆
• 推荐理由：也是常驻在 Firefox 右上角的插件，既能生成当前 URL 的二维码，又可以手动输入生成

React DevTools ★★★★★

• URL：addons.mozilla.org/en-US/firef…
• 推荐指数：★★★★★
• 推荐理由：React 开发必备

Redux DevTools ★★★★★

• URL：addons.mozilla.org/en-US/firef…
• 推荐指数：★★★★★
• 推荐理由：Redux 开发必备

⌨️ 常用快捷键

常规用户快捷键

更多常规快捷键，请看官方的 《Keyboard Shortcuts - Perform common Firefox Tasks Quickly》 一文。

快捷键	功能
⌘R	刷新页面
⇧⌘R	强刷
⇧⌘A	插件管理 about:addons
⌘T	新建 Tab
⇧⌘T	重新打开上个关闭的 Tab
⇧⌘N	新建窗口
⇧⌘⌫	清除历史（要什么插件呀）
⇧⌘S	Firefox 自带的页面截屏工具
⌘L	进入地址栏
⌘B	打开侧边栏书签面板
⌘D	添加书签
⌘[ 或 ⌘←	历史后退
⌘] 或 ⌘→	历史前进
⇧⌘[	切换到前一个 Tab（可循环）
⇧⌘]	切换到后一个 Tab（可循环）

开发者快捷键

更多 Developer Tools 快捷键，可看官文 DevTools - All Keyboard Shortcuts。

快捷键	功能
⇧⌘P	新建隐身窗口
⌘U	查看页面源码
⌥⌘I	打开 / 关闭 Developer Tools
ESC	在 Developer Tools 的任何 Tab（非 Console）下方展示 Console
⌥⌘M	切换 Responsive Design 模式

📱 Firefox Mobile

最后来讲一讲 Firefox Mobile。

Firefox Mobile Firefox Mobile Nightly 可以说是满足了我对移动端浏览器的一切想象：

1. 界面简单干净
2. 支持插件（但标准支持的插件还不算多）
3. 纯纯的浏览器，没有广告，没有乱七八糟的内容推荐

有个下电影的网站，老是贴一些可爱的动图小广告，不胜其烦，所以我就想用 TamperMonkey 写个小脚本把它们隐藏掉，顺便修一下不是很好的用户体验部分。

然而 TamperMonkey 没在移动端支持的插件列表里。

自定义插件集合 的方式可以解决这个问题，虽然 TamperMonkey 没有官方支持 Mobile 版，但亲测可用。

接下来我们逐步分解。

1. 开启开发者模式

Settings 拉到最底，进入「About Firefox Nightly」，然后：

1. 快速地连续点击 Firefox 的 Logo 数下，可以开启开发者 Debug 模式
2. 返回到 Settings 界面
3. 找到「Advanced」下「Add-ons」下多了一个菜单「Custom Add-on collection」

2. 创建 Collection

官方文档：How to use collections on addons.mozilla.org

PC 端前往 Firefox 插件 站点，登录你的账号，在账号菜单下进入「View My Collections」：

这里，你可以创建或编辑已有的 Collection：

3. 使用 Collection

Firefox Mobile Nightly → Settings → Custom Add-on collection，将 URL 中的 User ID 和 Collection name 填入到弹出的对话框中：

4. 安装插件

设置后，Firefox Mobile 会重启，重启后到 Add-ons，可以看到它的可用插件列表变了，里边的插件还是需要自行安装的。

注意：安装完想要的插件之后，可以把「Custom Add-on collection」清空，不会影响已安装的插件。不清空的话，你永远只能看到你的 Collection 中的插件列表而无法安装别的。

5. 效果

接下来，就可以写自定义脚本（不过移动端写脚本的体验非常不好）来干掉那些可爱的小广告，以及处理一些用户不友好的 CSS 了：

🙋 FAQ

❓ 有哪些 about 页？

我知道有个 about:config，我也知道有其他的 about，因为不常用，记不住，也不想记，但要用的时候，怎么快速查找？那就是——about:about：

跟 about:about 对应，Chrome 有 chrome://chrome-urls，但 Chrome 没有 config 页。

❓ 如何添加搜索引擎？

请看地址栏下拉框：

❓ 如何避免自动跳转 HTTPS？

假设你的生产地址是 https://xxx.com，本地开发服务器为了 CORS 接口能够调用成功，配了 HOST，但没有启用 HTTPS，因此地址是 http://xxx.com:端口。

你却不小心在本地页面上点击了一个 https://xxx.com 的链接，然后事情就发生了，每次访问 http://xxx.com:端口 都会被自动重定向到 https://xxx.com:端口，并报错 SSL_ERROR_RX_RECORD_TOO_LONG。所谓「来的时候好好的，回不去了」。

解决方法：点击地址栏左侧的图标「Not Secure」→「Clear cookies and site data...」，确认后即可，治标不治本。唯一的问题，可能是你需要重新登录啥的。

📌 链接

• Firefox Developer Edition
• Firefox Developer Tools User Docs

🪭 写在最后

本文简单介绍了一下 Firefox 的设置、插件、常用快捷键，助你快速入坑常规使用和作为开发辅助使用。细节的，比如 Developer Tools 的使用，并未详细介绍，还待同学自己边玩边了解。

只认 Chrome 的前端同学啊，建议试试 Firefox Developer Edition。