Firefox DevTools和Chrome DevTools各有哪些独特的特点？

Question

现在Firebug正在逐渐消失，Firefox用户被要求切换到Firefox开发者工具。

因此，我想知道Firefox DevTools有哪些功能是Chrome DevTools没有的？

你能给我一个客观的答案吗？

- Sebastian Zartner

Answer 1

从文档中得知： DOM属性查看器 查看页面的DOM属性、函数等。（你会注意到Chrome控制台中通常不列出对象的属性，例如在控制台中查看"document.body"，你永远不会知道body.innerHTML的存在。） 开发者工具栏 开发者工具的命令行界面。 着色器编辑器 查看和编辑WebGL使用的顶点和片段着色器。 Web音频编辑器 检查音频上下文中的音频节点图并修改它们的参数。 截图 对整个页面或单个元素进行截图。

设置面板中的一些额外工具：

• 测量页面的某一部分
• 临时记事本

网络面板显示每个网络请求的原因的堆栈跟踪。在Chrome中，您需要通过网络请求的控制台日志找到所需请求并展开它。此外，如果xhr响应恰好是HTML返回，则可以在预览选项卡中看到实际预览。

也许最有用的是，检查器在每个带有事件侦听器的元素旁边显示(ev)，并直接列出将事件侦听器添加到该元素的所有内容（比Chrome右侧的事件选项卡列表更好）。

- NoBugs

---

Chrome开发者工具在元素面板中有一个名为“属性”的子面板，通常隐藏在“>>”图标下方，其中包括DOM属性查看器。它还显示属性（包括expando）和函数。 - wOxxOm

与 Firefox 中的那个不同之处在于它仅显示元素的属性，而 Firefox 中的 DOM 面板显示 window 的 DOM 属性。除此之外，两者都允许您在控制台中检查各种 DOM 属性。 - Sebastian Zartner

确实。在Chrome DevTools中，您需要在控制台中键入“window”，并展开它以检查所有属性和全局对象。 - wOxxOm

对我来说，Chrome非常适合调试javascript、事件和整体DOM故障排除，而我使用Firefox进行布局设计。它们都很擅长自己的领域。 - megamaiku

Answer 2

Firefox DevTools

据我所见，截至Firefox 54.0.1版本，Firefox开发者工具拥有许多Chrome开发者工具（截至Chrome 59.0版本）所没有的小众功能，即一些特定工具，可能只被一小部分人使用。除了这些特殊工具之外，Firefox开发者工具还有几个Chrome开发者工具缺少的核心功能。

不同的功能包括：

• 画布编辑器
• Web音频编辑器
• 着色器编辑器
• 开发者工具栏（GCLI）（将被删除）
• Scratchpad
• DOM检查器
• 页面标尺
• 屏幕截图工具
• 字体检查器
• 网格检查器
• 测量页面部分
• Firebug主题（在Firefox 61中 已删除）
• 在iframe之间切换
• 调试浏览器UI的工具
• 单个网络请求的安全信息
• 网络缓存比较

Chrome DevTools

Chrome开发者工具（截至Chrome 59.0版本）在标准工具方面拥有更多功能，并提供其他小众工具。

这些功能包括：

• DOM和XHR断点
• 事件监听器面板
• 属性面板
• 安全检查器
• Audits
• 触摸模拟和设备仿真中的像素密度
• 源代码面板中的实时编辑
• 工作区
• 网络请求阻止
• 高级内存工具
• 清单、服务工作者和应用程序缓存检查器
• 滚动性能问题突出显示器
• 每秒帧数计量器
• CSS媒体仿真
• 全局文件搜索
• 代码覆盖率分析器
• 地理位置、方向和触摸仿真
• 本地CSS样式覆盖

此外，它们在许多较小的功能和设置上也有所不同。

- Sebastian Zartner