有没有人已经把 Firefox 的 Local Mode 用进日常开发了?说的是 DevTools 选项面板里那个把本地文件夹映射成 https:// 地址的功能。Firefox 153 的发布说明把它列在 Developer 一栏,这个版本 7 月 21 日推给正式版用户。我想拿它治一个老毛病,动手前想听听实际用过的人怎么说。
老毛病是 origin 串台
同时维护几个小前端项目的话,Vite 默认都会去抢 localhost:5173。协议、主机、端口三样都一致,浏览器就把它们当成同一个 origin,上一个项目留下的 localStorage、Cookie 和注册过的 Service Worker 全都还在。切到新项目时,页面偶尔会显示旧缓存,得去 DevTools 的 Application 面板手动注销 SW、清存储。换端口能躲开,可数量一多又记不住。开隐私窗口也能临时绕过,只是每次都得重新登录测试账号,同样烦人。
直接双击打开为什么不行
退一步用 file:// 打开也不现实。MDN 的同源策略页面提到,现代浏览器通常把 file:/// 加载的文件当作 opaque origin,同一目录下的其他资源也不算同源,fetch 旁边的 JSON 很容易撞上 CORS 报错。另外,MDN 讲 Secure Contexts 的那页把 file:/// URL 也列成了
,所以卡住人的主要是那个不透明的 origin,HTTPS 这道门槛倒不是问题。SW 另算,MDN 的使用指南写明它只能跑在 HTTPS 下,localhost 算是给本地开发留的口子。
官方文档写了哪些
Firefox Source Docs 里有一页专门讲 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:
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 吗?