
Firefox 开发者工具默认就开着,不用额外安装
Firefox 自带完整前端调试能力,Ctrl+Shift+I(Windows/Linux)或 Cmd+Opt+I(macOS)直接呼出开发者工具,Ctrl+Shift+C 启动元素选择器——不是插件,不是扩展,是浏览器原生功能。
常见错误现象:有人反复搜索“Firefox HTML 开发插件”,结果装了过时的 Firebug(已停更),反而干扰调试;也有人误以为要配 Node 环境或构建工具才算“设置好”,其实纯 HTML 文件双击打开就能用。
- 确保 Firefox 是最新稳定版(旧版如 56 之前默认用 Firebug,新版统一用内置工具)
- 禁用所有第三方开发者类扩展(比如某些“网页截图”“CSS 提取”工具会劫持
F12键) - 如果快捷键失灵,检查是否被系统级软件(如录屏、输入法、远程控制)拦截
本地 HTML 文件打开后无法调试 JS 或 Network 面板为空
Firefox 对 file:// 协议有限制:默认禁止加载本地脚本的跨域请求、不记录 fetch 或 XMLHttpRequest 到 Network 面板,且部分 API(如 Service Worker)直接不可用。
这不是 bug,是安全策略。真实开发中你不会把生产站点部署成 file://,所以 Firefox 故意不模拟服务器行为。
立即学习“前端免费学习笔记(深入)”;
发卡宝是一个专业的软件卡密等虚拟商品在线交易平台,拥有多种兑换方式,费率低,结算快,正规企业平台一直稳定运营,24小时不间断提供自动发卡服务。【模板说明】试用版自带一套模板(响应式)【环境支持】PHP环境 / 200M或以上空间大小 / 开启父路径 / 设置index.php为默认首页 / 目录写入权限需要开启【数据库】MySQL【安装步骤】将文件上传至空间目录,运行“http://域名/inst
- 临时解决:启动一个最小 HTTP 服务,例如终端运行
python3 -m http.server 8000,然后访问http://localhost:8000/index.html - 不要改 Firefox 配置项
security.fileuri.strict_origin_policy—— 这个选项在新版中已被移除,强行修改 about:config 无效 - Network 面板只记录从页面加载后发起的请求,刷新页面前的操作不会回溯显示
如何让 Firefox 自动重载 HTML 修改(Live Reload)
Firefox 本身不提供文件监听和自动刷新,这是构建工具或服务器的功能,不是浏览器职责。
如果你想要保存 HTML 就立刻看到效果,得靠外部工具配合,而不是“设置 Firefox”。
- 轻量方案:用
live-server(npm 包),执行npx live-server --port=3000,它起一个带 WebSocket 的小服务器,保存即刷新 - VS Code 用户可装插件
Live Server,右键 HTML 文件选 “Open with Live Server”,本质也是调用同个底层 - 别试图用 Firefox 扩展实现自动刷新——现有扩展(如 Auto Refresh Plus)依赖页面内注入脚本,在
file://下多数被屏蔽,且不稳定
响应式设计测试要用 Responsive Design Mode,不是缩放页面
Ctrl+<code>+ 或 Ctrl+Mouse Wheel 是页面缩放,只改变渲染像素密度,不触发 @media 查询或 window.innerWidth 变化;真测适配必须用 Firefox 原生的响应式模式。
按 Ctrl+Shift+M 进入,它会:
- 精确模拟设备视口宽度/高度/DPR
- 暴露
devicePixelRatio、screen.width等真实值 - 支持自定义设备列表、触摸事件模拟、UA 伪造
- 注意:开启后 Network 面板仍可用,但某些资源(如图片懒加载)行为可能和真实设备有差异
最常被忽略的一点:Firefox 的“禁用缓存”开关(在 Network 面板左上角)只对当前标签页生效,关掉再重开标签页就恢复缓存——调试 CSS/JS 修改时,记得每次新开标签页都手动点一下这个按钮,或者干脆用无痕窗口避免干扰。










