简体中文
English如何从 Firebug 迁移到 Firefox 开发者工具
更新时间
Firebug 已停止更新，getfirebug.com 现在是一封告别信：页面明确写道，Firebug 社区 12 年的工作“活在 Firefox Developer Tools 中”，并引导访客切换到最新版 Firefox 查看最新的开发者工具更新。迁移没有一键导入按钮，实际做法是安装或更新 Firefox，然后在开发者工具里找到 Firebug 对应面板，按下面几组映射逐项替换日常操作。
迁移前需要知道的两件事
- Firebug 本身不再可用：页面没有提供 Firebug 的下载或续用方案，只给出“切换到最新 Firefox 开发者工具”的方向。继续在旧版 Firefox 上保留 Firebug 不属于官方支持的路径。
- 两个入口都能用：页面建议使用 Developer Edition，或把正式版 Firefox 更新到最新版本。两者都包含页面提到的新工具，包括首个 CSS Grid 检查器和 JavaScript 调试器。
核心面板对照
Firebug 的日常工作大多能在一一对应的面板里完成，快捷键和面板名称会变，但操作逻辑接近：
| Firebug 中的操作 | Firefox 开发者工具中的位置 | 迁移要点 |
|---|---|---|
| 查看和编辑 HTML 结构 | 检查器（Inspector） | 选中节点后可查看盒模型、修改属性与样式 |
| 调试 CSS 规则 | 检查器右侧的规则面板 | 可直接启用/禁用声明、查看计算样式 |
| 调试 JavaScript、设断点 | JavaScript 调试器 | 支持断点、单步执行、查看调用栈 |
| 查看控制台输出、执行表达式 | Web 控制台 | 与 Firebug 控制台用法基本一致 |
| 查看网络请求 | 网络（Network）面板 | 需先打开面板再刷新页面才能捕获请求 |
| 排查 CSS Grid 布局 | CSS Grid 检查器 | 页面特别提到的新能力，Firebug 时代没有 |
具体迁移步骤
- 准备浏览器：安装 Firefox Developer Edition，或把现有 Firefox 更新到最新正式版。页面把这两个入口并列作为使用新工具的方式。
- 打开开发者工具：在页面上右键选择“检查”，或从浏览器菜单进入开发者工具。首次打开后，面板会记住上次的位置。
- 按任务逐个替换：先迁移最常用的面板，例如每天调样式就先熟悉检查器，每天查脚本错误就先熟悉控制台和调试器。不要一次把所有面板都过一遍。
- 验证迁移是否完成：用同一个页面做一次对照练习——改一条 CSS 看是否即时生效、在一个函数里设断点看是否停住、刷新页面看网络面板是否列出请求。三项都通过，说明主要工作流已经接上。
- 遇到不熟悉的面板名：页面提供了“如何切换的实用提示”入口，可从 getfirebug.com 首页进入查看。
常见卡点
- 网络面板是空的：多数情况是打开面板前页面已经加载完，刷新一次即可。
- 找不到 Firebug 里的某个小功能：Firefox 开发者工具的面板组织与 Firebug 不完全相同，部分功能被合并到检查器或控制台的子选项卡里，先在相邻面板找，而不是认为功能缺失。
- 仍在用旧版 Firefox：旧版浏览器无法获得页面提到的新工具更新，迁移的前提是换到最新版本或 Developer Edition。
什么时候值得迁移
如果你只是偶尔查看页面元素，最新版 Firefox 自带的检查器已经够用；如果你依赖 Firebug 的脚本调试和网络分析，迁移后能获得页面明确提到的 JavaScript 调试器和 CSS Grid 检查器，后者是 Firebug 没有的能力。唯一不适合的情况是必须留在无法升级的旧浏览器环境中——这种环境下官方页面没有给出替代方案。