检查器
检查 DOM、CSS 规则、盒模型、Grid、Flexbox、字体和元素状态，并直接验证结构与样式调整后的渲染结果。
火狐浏览器开发者工具
火狐浏览器内置 Firefox DevTools，为 Web 开发提供从结构检查、样式调试到 JavaScript、网络、性能与响应式测试的一套工具。开发者可以先在浏览器中定位实际运行问题，再结合 MDN 查询 HTML、CSS、Web API、Baseline 与浏览器兼容性资料。
火狐浏览器隐私声明Firefox Developer Edition 是面向开发者的预发布通道；这里的核心内容是 DevTools 调试方法与 Web 平台参考，而不是版本下载说明。
Firefox Developer Edition · 开发者版
Firefox Developer Edition：独立的 Web 开发通道
Firefox Developer Edition 提供较新的开发功能与开发者偏好设置，适合提前验证 Web 项目在 Firefox 中的运行结果，并使用 DevTools 进行日常调试。
Developer Edition 使用独立的配置文件与安装路径，可以与 Firefox Release 或 Beta 并行运行，方便开发者在不同通道中验证同一站点。
远程调试、深色主题和开发者工具栏等偏好会预先启用；HTML、CSS、JavaScript、网络与性能调试能力则由 Firefox DevTools 提供。
Inspect · Debug · Analyze · Test
使用 Firefox DevTools
使用 Firefox DevTools
检查、调试、分析与测试
Web 控制台
查看 JavaScript 日志、警告、异常与安全消息，也可以在当前执行环境中运行 JavaScript 表达式并检查返回结果。
JavaScript 调试器
设置断点、逐步执行代码，检查变量、作用域与调用栈，用于定位交互逻辑、异步流程和运行时错误。
网络监视器
分析文档、Fetch、XHR、脚本、图片等网络请求，查看状态码、请求头、响应、缓存、体积与加载耗时。
性能分析
记录脚本、布局、绘制和主线程活动，观察交互响应与渲染过程，定位可能影响体验的性能瓶颈。
响应式设计模式
模拟不同视口、设备像素比与网络条件，用于检查响应式布局和交互在不同设备环境下的表现。
无障碍检查器
查看可访问性树、角色、名称与相关属性，帮助发现语义结构、交互控件和辅助技术支持中的问题。
存储检查器
检查 Cookie、localStorage、sessionStorage、IndexedDB 等站点数据，便于验证存储写入、读取与清理行为。
样式编辑器
集中查看和编辑加载的 CSS 样式表，用于快速测试规则变化、媒体条件和样式来源。
Application 工具
检查 Web App Manifest、Service Worker 等现代 Web 应用相关信息，用于调试可安装 Web 应用与离线能力。
按开发问题选择对应的调试工具
Firefox DevTools 由多个工具组成。先根据问题属于结构、样式、脚本、网络、性能还是设备适配，再选择相应工具，可以减少无目的地在各个面板之间切换。
HTML 与 CSS 调试
遇到布局或样式问题时，先使用检查器确认 DOM、CSS cascade、盒模型以及 Grid 或 Flexbox 关系，再实时修改规则验证结果。
JavaScript 与网络调试
交互异常可以先用 JavaScript 调试器设置断点，再结合 Web 控制台查看日志与错误；接口异常则使用网络监视器检查请求与响应。
性能与内存分析
出现卡顿、响应变慢或内存增长时，可结合性能分析与内存工具观察主线程活动、对象保留和运行过程。
响应式与无障碍测试
响应式设计模式适合快速检查不同视口，无障碍检查器可辅助验证语义和控件信息；最终仍应结合真实设备与其他浏览器完成测试。
DevTools 用于调试，MDN 用于标准与兼容性参考
Firefox DevTools 负责观察浏览器中的实际运行结果，MDN Web Docs 则提供 Web 标准、语法、接口和兼容性资料。两者配合使用，更适合完成从问题定位到标准验证的开发流程。
HTML、CSS 与 JavaScript 参考
通过 MDN 查询 HTML 元素、CSS 属性、JavaScript 语言特性和示例，再回到 Firefox DevTools 检查实际 DOM、样式与脚本执行结果。
Web API 与权限
查询 DOM、Fetch、Storage、Performance、Media、Workers 等 Web API 时，应同时确认接口定义、使用条件、权限要求与安全上下文。
Baseline 与浏览器兼容性
结合 MDN Browser Compatibility Data 与 Baseline 判断某项能力在 Firefox、Chrome、Edge、Safari 等浏览器中的支持范围，再决定是否需要兼容方案。
常见前端调试代码示例
以下代码用于配合 Firefox DevTools 练习布局、交互语义与网络调试。实际项目仍应根据目标浏览器、运行环境和兼容性数据选择实现方式。
CSS
调试网格布局与响应式样式
.layout-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 720px) {
.layout-grid {
grid-template-columns: 1fr 1fr;
}
}JavaScript
用断点观察交互逻辑
const button = document.querySelector('.save-button');
button.addEventListener('click', () => {
const state = collectFormState();
console.log('save state', state);
saveDraft(state);
});Accessibility
使用原生语义构建可展开控件
<button
type="button"
aria-expanded="false"
aria-controls="details-panel">
查看详情
</button>Network
检查 Fetch 请求与异常处理
async function loadProfile() {
const response = await fetch('/api/profile');
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return response.json();
}火狐浏览器开发者工具常见问题
以下内容集中回答 Firefox DevTools、Developer Edition、CSS 与 JavaScript 调试、网络分析、MDN 和跨浏览器兼容性等常见开发问题。
火狐浏览器的 Firefox DevTools 在哪里打开？+
Firefox 内置 DevTools。可以从浏览器的开发者工具入口打开工具箱，也可以使用对应快捷键进入检查器、Web 控制台、调试器、网络监视器等工具。
Firefox DevTools 怎么调试 Grid、Flexbox 和 CSS？+
使用检查器查看 DOM 与 CSS 规则，并结合 Grid、Flexbox、盒模型和字体等可视化信息检查布局关系。修改规则后可以直接观察渲染结果。
Firefox 怎么调试 JavaScript 和断点？+
使用 JavaScript 调试器设置断点、逐步执行代码并检查变量、作用域和调用栈；Web 控制台则适合查看日志、异常并快速执行表达式。
Firefox 怎么查看 Fetch、XHR 和网络请求？+
使用网络监视器查看 Fetch、XHR、文档、脚本和其他请求的状态码、请求头、响应、缓存、大小与耗时，再结合控制台排查脚本和安全错误。
Firefox Developer Edition 和普通 Firefox 有什么区别？+
Firefox Developer Edition 属于面向开发者的预发布通道，使用独立配置文件与安装路径，并默认开启多项开发者偏好；普通 Firefox 同样内置 DevTools，可完成常见 Web 调试工作。
MDN 是 Firefox 专属开发资料吗？+
不是。MDN Web Docs 面向整个 Web 平台，提供 HTML、CSS、JavaScript、Web API 与浏览器兼容性资料。兼容性数据同时覆盖 Firefox、Chrome、Edge、Safari 等浏览器。
使用 DevTools 定位问题，再用 MDN 验证支持范围
先使用 Firefox DevTools 检查结构、样式、脚本、网络和性能，再通过 MDN 与兼容性数据确认标准支持范围，可以形成更完整的 Web 开发与跨浏览器验证流程。