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 故意不模拟服务器行为。
立即学习“前端免费学习笔记（深入）”；
- 临时解决：启动一个最小 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 修改时，记得每次新开标签页都手动点一下这个按钮，或者干脆用无痕窗口避免干扰。
