Firefox不支持3D视图，自73版起已彻底移除该功能；当前稳定版（2026年11月）无“3D View”选项卡，替代方案是使用Microsoft Edge或启用实验性flag的新版Chrome。
想直观看清网页中各个元素在空间上的堆叠顺序、z-index嵌套关系和DOM树的立体分布，避免因堆叠上下文错乱导致弹窗被遮挡、动画卡顿或定位失效。
确认火狐浏览器是否支持3D视图
Firefox 自 73 版本起已移除原生 3D 视图功能，【当前稳定版 Firefox（2026年11月）不内置 3D 视图工具】。官方 Firebug 插件也早在 2017 年停止维护，其 3D 模式仅存在于极旧版本（如 Firefox 3.0～28），且无法在现代系统上正常运行。
若你正在使用 Firefox 73 或更高版本，直接在开发者工具中找不到“3D View”选项卡——这不是操作遗漏，而是功能已被彻底移除。
替代方案：用 Edge 或新版 Chrome 查看真实 3D DOM 结构
Microsoft Edge（基于 Chromium）和部分新版 Chrome（需启用实验性 flag）提供完整、可交互的 3D 视图工具，能准确还原 DOM 树、z-index 堆叠上下文与复合层的空间关系。
第一步：打开目标网页 → 按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS）调出 DevTools；
第二步：点击活动栏最右侧的 ⋯（更多工具）按钮 → 在下拉菜单中选择“3D View”；
第三步：工具打开后，切换到“DOM”选项卡 → 页面即以 3D 树状结构呈现全部 HTML 元素，可拖拽旋转、缩放、点击任意节点高亮对应区域；
第四步：点击某个 DOM 节点时，右侧“Elements”面板同步定位并展开该元素，显示其样式、盒模型与事件监听器——这一步能验证 z-index 是否被父级堆叠上下文截断。
Firefox 内可用的近似调试手段
方法一：用“元素”面板 + “计算”样式逐层检查 z-index
打开开发者工具 → 切换到“元素”面板 → 点击目标元素 → 右侧切换至“计算”（Computed）标签 → 滚动查找 z-index 值；若显示为 auto，说明它未创建新堆叠上下文，实际层级由父容器决定。
方法二：启用“层边界”可视化（需 Rendering 面板）
按 Esc 唤出 Rendering 面板 → 勾选“Paint flashing”和“Layer borders” → 黄色边框标出所有合成层，蓝色栅格表示分块渲染区域；虽然不是 3D，但能快速识别哪些元素被强制提升为独立图层，间接反映 DOM 分层意图。
方法三：用 JavaScript 手动构建简易层级树
在控制台（Console）中粘贴执行：function logZTree(el, depth = 0) { console.log(' '.repeat(depth) + el.tagName + `[z=${getComputedStyle(el).zIndex}]`); Array.from(el.children).forEach(c => logZTree(c, depth + 1)); } logZTree(document.body); —— 这会以缩进形式打印 body 下所有子元素的 tagName 和当前计算出的 zIndex 值，适合快速排查局部层级断裂。
