页面检查器
检查 HTML、CSS、盒模型、Grid、Flexbox 与字体信息，并实时验证布局和样式修改。
Firefox 开发者文档
围绕 Firefox DevTools 与 Web 平台开发建立调试路径：使用页面检查器、Web 控制台、JavaScript 调试器、网络监视器、存储检查器、响应式设计模式、性能与内存工具定位问题，再通过 MDN 查阅 HTML、CSS、JavaScript、Web API、Baseline 与跨浏览器兼容性数据。
Firefox 隐私声明Firefox Developer Edition 是预发布开发通道；本页的 DevTools 与 MDN 文档语义并不等同于 Developer Edition 下载。
Firefox Developer Edition
面向 Web 开发者的独立 Firefox 通道
Developer Edition 提供即将进入正式版的 Firefox 功能，并默认启用面向开发者的工具与偏好设置，适合提前验证页面行为和浏览器兼容性。
它使用独立的配置文件与安装路径，因此可以和 Firefox Release 或 Beta 并行使用，便于开发者在不同浏览器通道之间测试同一站点。
远程调试、深色主题和开发者工具栏按钮等开发偏好默认开启；日常调试能力本身则来自 Firefox DevTools，而不是某个单独的“开发者 API”。
Inspect · Debug · Measure · Test
使用 Firefox DevTools
使用 Firefox DevTools
检查页面、调试脚本并分析运行行为
Web 控制台
查看 JavaScript 日志、CSS 警告、安全消息与网络相关错误，并直接执行 JavaScript。
JavaScript 调试器
设置断点、单步执行、检查作用域和调用栈，用于定位脚本逻辑与运行时错误。
网络监视器
查看请求、响应、状态码、请求头、缓存、时间线和资源体积，定位加载与接口问题。
存储检查器
检查和修改 Cookie、IndexedDB、localStorage、sessionStorage 与缓存等站点存储。
响应式设计模式
模拟不同视口、设备像素比和输入环境，验证页面在不同尺寸下的响应式表现。
CSS 与可视化工具
使用 Grid、Flexbox、动画和字体等可视化辅助工具理解复杂布局与渲染结果。
性能工具
记录页面运行与渲染活动，分析主线程、脚本、布局和绘制等性能瓶颈。
内存工具
通过堆快照与对象分析排查内存占用增长、对象保留和潜在泄漏问题。
样式编辑器
查看、编辑和管理页面加载的 CSS 样式表，快速测试样式修改并定位来源。
从 DOM 到网络与性能，按问题选择调试工具
Firefox DevTools 不是单一面板，而是一组针对页面结构、JavaScript、请求、存储和运行性能的协同工具。
布局与 CSS 调试
先用页面检查器确认 DOM、CSS cascade、盒模型、Grid 与 Flexbox，再通过规则面板实时验证样式修改。
接口与网络调试
使用网络监视器检查请求顺序、状态码、Header、缓存与耗时，并结合 Web 控制台定位接口和安全错误。
JavaScript 与性能分析
用调试器设置断点、检查变量和调用栈，再结合性能工具分析脚本执行、布局、绘制与主线程活动。
响应式与设备测试
通过响应式设计模式验证不同视口与设备条件，但仍应结合真实设备、无障碍和跨浏览器测试完成验证。
Firefox DevTools 负责调试，MDN 负责 Web 平台参考
开发时先在 Firefox 中观察真实页面行为，再到 MDN 查阅标准定义、示例、Baseline 和浏览器兼容性。MDN 是面向整个 Web 平台的参考资料，不是 Firefox 专属 API 文档。
HTML、CSS 与 JavaScript
通过 MDN 查阅语言与平台特性、规范链接、示例和最佳实践，再使用 Firefox DevTools 验证实际渲染与运行结果。
Web API 与权限
查阅 DOM、Fetch、Storage、Performance、Media、Workers 等 Web API 的接口定义、使用条件、权限要求与示例。
Baseline 与浏览器兼容性
利用 MDN Browser Compatibility Data 与 Baseline 判断功能在 Firefox、Chrome、Edge、Safari 等浏览器中的可用范围，而不是仅针对 Firefox 做判断。
用于调试与兼容性验证的代码示例
这些示例用于配合 DevTools 观察布局、脚本、无障碍语义和网络行为；具体 Web API 支持范围应继续结合 MDN 兼容性表判断。
CSS
用容器查询验证组件级响应式布局
.card-grid {
container-type: inline-size;
}
@container (min-width: 720px) {
.card-item {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
}JavaScript
观察页面可见性并延迟非关键任务
document.addEventListener('visibilitychange', () => {
if (document.hidden) return;
requestIdleCallback(() => {
loadDeferredWidgets();
});
});Accessibility
用原生按钮语义实现可展开控件
<button
type="button"
aria-expanded="false"
aria-controls="faq-panel">
查看详情
</button>Network
用 Fetch API 处理请求状态与异常
async function loadProfile() {
const response = await fetch('/api/profile');
if (!response.ok) throw new Error('Request failed');
return response.json();
}Firefox 开发者文档常见问题
围绕 Firefox DevTools、Developer Edition、JavaScript 调试、CSS 布局、网络请求、MDN 与浏览器兼容性回答常见开发问题。
Firefox DevTools 在哪里打开？+
Firefox 内置 DevTools。开发者可以从浏览器的开发者工具入口打开，也可以使用常见键盘快捷方式进入工具箱，再选择页面检查器、控制台、调试器、网络监视器等面板。
Firefox 怎么调试 CSS Grid、Flexbox 和页面布局？+
使用页面检查器查看 DOM 与 CSS 规则，并结合 Firefox 的 Grid、Flexbox、盒模型和字体可视化工具检查布局关系、无效声明与实时样式修改。
Firefox 怎么调试 JavaScript 和断点？+
使用 JavaScript 调试器设置断点、单步执行代码、检查作用域、变量和调用栈；Web 控制台则适合查看日志、异常和快速执行 JavaScript 表达式。
Firefox 怎么查看 Fetch、XHR 和接口请求？+
打开网络监视器后，可以查看 Fetch、XHR、文档、脚本、图片等请求的状态码、Header、响应、缓存、大小与耗时，并结合控制台排查网络和安全错误。
Firefox Developer Edition 和普通 Firefox 有什么区别？+
Developer Edition 属于预发布开发通道，包含即将进入正式版的 Firefox 功能，并默认启用开发者偏好和 DevTools；它使用独立配置文件和安装路径，可与 Release 或 Beta 并行使用。
MDN 是 Firefox 专属开发文档吗？+
不是。MDN Web Docs 提供 HTML、CSS、JavaScript、Web API 与跨浏览器兼容性参考。其 Browser Compatibility Data 和 Baseline 会同时描述 Firefox、Chrome、Edge、Safari 等主流浏览器的支持情况。
用 Firefox DevTools 调试，再用 MDN 验证平台支持
页面结构、JavaScript、网络请求、存储、响应式布局和性能问题可以直接在 Firefox 中定位；标准定义与跨浏览器兼容性则继续交给 MDN 和 Browser Compatibility Data。