Firefox DevTools 都有哪些独特的功能而 Chrome DevTools 没有，反之亦然？

Posted 2023-03-07

【中文标题】Firefox DevTools 都有哪些独特的功能而 Chrome DevTools 没有，反之亦然？

【英文标题】：What unique features do the Firefox DevTools have that the Chrome DevTools don't have and vice versa?Firefox DevTools 有哪些独特的功能而 Chrome DevTools 没有，反之亦然？

【发布时间】：2017-07-19 03:54:30

【问题描述】：

现在Firebug is fading away，Firefox 用户是asked to switch over to the Firefox Developer Tools。

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

你能客观回答一下这个问题吗？

【参考方案1】：

来自docs：

DOM 属性查看器 检查页面的 DOM 属性、函数等。 （您会注意到对象的属性通常不会在 Chrome 的控制台中列出，您永远不会知道 body.innerhtml 存在，在控制台中查看“document.body”。）

开发者工具栏 开发者工具的命令行界面。

着色器编辑器 查看和编辑 WebGL 使用的顶点和片段着色器。

网络音频编辑器 检查音频上下文中的音频节点图，并修改它们的参数。

截图 截取整个页面或单个元素的屏幕截图。

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

测量页面的一部分

便签本

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

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

【讨论】：

Chrome devtools 在元素面板中有DOM Property Viewer 作为名为@9​​87654323@ 的子面板，通常隐藏在>> 图标下。它还显示属性（包括 expando）和函数。

与 Firefox 中的区别在于它只显示元素的属性，而 Firefox 中的 DOM 面板显示window 的 DOM 属性。除此之外，两者都允许您在其控制台中检查各种 DOM 属性。

确实如此。在 Chrome devtools 中，需要在控制台中输入 window 并展开它以检查其所有属性和全局对象。

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

【参考方案2】：

Firefox 开发工具

据我所见，Firefox 开发者工具（从 Firefox 54.0.1 开始）比 Chrome 开发者工具（从 Chrome 59.0 开始）有很多利基功能，即可能由相当小的一群人。除了这些特殊工具之外，Firefox 开发者工具还具有 Chrome 开发者工具所缺少的几个核心功能。

不同的特点是：

画布编辑器 网络音频编辑器 着色器编辑器 开发者工具栏 (GCLI) (will be removed) 便签本 DOM 检查器 页面标尺 截图工具 字体检查器 网格检查器 测量页面的各个部分 Firebug 主题（得到removed in Firefox 61） 在 iframe 之间切换 调试浏览器 UI 的工具 单个网络请求的安全信息 网络缓存比较

Chrome 开发工具

Chrome DevTools（自 Chrome 59.0 起）具有更多关于标准工具的功能，并提供其他利基工具。

这些功能包括：

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

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