# Firefox 的 Local Mode 能替掉本地 serve 吗？Service Worker 那块文档没提

**URL:** <https://www.shiqidu.com/t/topic/1832>\
**Category:** 开发调优\
**Tags:** Firefox, 浏览器, 前端开发, html\
**Created:** [2026 年10 月 28 日 11:49 UTC](https://www.shiqidu.com/t/topic/1832 "2026-10-28T11:49:02Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![shiqidu\_editor](https://www.shiqidu.com/user_avatar/www.shiqidu.com/shiqidu_editor/32/528_2.png) [@shiqidu\_editor](https://www.shiqidu.com/u/shiqidu_editor)\
发布日期： [2026 年10 月 28 日 11:49 UTC](https://www.shiqidu.com/t/topic/1832/1 "2026-10-28T11:49:02Z")

</div>

有没有人已经把 Firefox 的 Local Mode 用进日常开发了？说的是 DevTools 选项面板里那个把本地文件夹映射成 `https://` 地址的功能。[Firefox 153 的发布说明](https://www.firefox.com/en-US/firefox/153.0/releasenotes/)把它列在 Developer 一栏，这个版本 7 月 21 日推给正式版用户。我想拿它治一个老毛病，动手前想听听实际用过的人怎么说。

## 老毛病是 origin 串台

同时维护几个小前端项目的话，Vite 默认都会去抢 `localhost:5173`。协议、主机、端口三样都一致，浏览器就把它们当成同一个 origin，上一个项目留下的 localStorage、Cookie 和注册过的 Service Worker 全都还在。切到新项目时，页面偶尔会显示旧缓存，得去 DevTools 的 Application 面板手动注销 SW、清存储。换端口能躲开，可数量一多又记不住。开隐私窗口也能临时绕过，只是每次都得重新登录测试账号，同样烦人。

## 直接双击打开为什么不行

退一步用 `file://` 打开也不现实。MDN 的[同源策略页面](https://developer.mozilla.org/en-US/docs/Web/Security/Defenses/Same-origin_policy)提到，现代浏览器通常把 `file:///` 加载的文件当作 opaque origin，同一目录下的其他资源也不算同源，`fetch` 旁边的 JSON 很容易撞上 CORS 报错。另外，MDN 讲 [Secure Contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) 的那页把 `file:///` URL 也列成了 ✅，所以卡住人的主要是那个不透明的 origin，HTTPS 这道门槛倒不是问题。SW 另算，MDN 的[使用指南](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers)写明它只能跑在 HTTPS 下，localhost 算是给本地开发留的口子。

## 官方文档写了哪些

Firefox Source Docs 里有[一页专门讲 Local Mode](https://firefox-source-docs.mozilla.org/devtools-user/local_mode/)，内容不长：

- 每条映射填两样东西：对外暴露的 origin 和本地文件夹，文档示例是把 `https://firefox.localhost` 指向 `/home/alex/app`。
- 映射只在 DevTools 打开时生效，而且只有 Firefox 自己能访问，其他程序和局域网里的设备都碰不到。
- 保持开发者工具开着再访问任意 `file://` 页面，DevTools 顶部会弹一条提示：点「Try it」生成临时映射，关掉 DevTools 或浏览器就失效；选「Add To Settings」则跳去选项面板存成固定条目。
- 也能在 `about:config` 里配，每条对应 `devtools.local-mode.mappings.N.origin`、`.path` 和可选的 `.disabled`，N 是每条映射的递增序号，方便在不同 profile 之间搬。

文档还专门提到，每个实验或项目都能有自己的 origin，存储和 Cookie 各管各的。要是给 `shop.localhost`、`admin.localhost` 各配一条，旧 SW 就不会再窜到别的项目里，这正好对上我的需求。

## 卡在 Service Worker

麻烦在于官方那页从头到尾没出现 Service Worker 这个词。它只说可以方便地测试所有 Web API，包括只能在安全上下文里用的那些。照字面理解 SW 应该算在内，可文档没明说，我也还没在自己机器上验证，不敢下结论。Firefox 153 的发布说明里同样找不到相关描述。MDN 那份 153 开发者版本记录更是连 Local Mode 本身都没收录。

我打算周末自己测一下，思路很简单：映射一个只放 `index.html` 和 `sw.js` 的文件夹，页面里调一次注册，看 Promise 是 resolve 还是 reject：

```js
navigator.serviceWorker.register('/sw.js')
  .then(reg => console.log('scope:', reg.scope))
  .catch(err => console.error('register failed:', err));

```

能拿到 scope 只说明注册这一步过了，离线缓存正不正常，还得断网刷新一次才知道。

如果 SW 注册不上，多项目隔离这个卖点就打了折扣，因为最容易串台的恰恰是这类脚本和它接管的缓存。

## 它管不到的地方

就算 SW 没问题，Local Mode 也只负责把磁盘上的文件交给浏览器，不跑后端、不做 HMR，TypeScript 编译和裸模块解析这些活还得靠开发服务器。它只在 Firefox 里生效，要换别的浏览器过一遍，照样得起本地服务。纯静态 demo、复现 bug 的小页面我准备用 Local Mode 打开，带构建流程或要做 PWA 离线的项目继续用 Vite。

用过的朋友，Local Mode 映射出来的 origin 下能正常注册 Service Worker 吗？