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

Question

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

因此我想知道,Chrome DevTools不提供Firefox DevTools的哪些功能？

能否请你对这个问题给出客观的答案？

Answer 1

来自文档:

DOM属性查看器 检查页面的DOM属性,函数等(你会注意到对象的属性通常不在Chrome的控制台中列出,你永远不会知道body.innerHTML存在,看着"document.body"中的安慰.)

开发人员工具栏开发人员工具 的命令行界面.

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

Web音频编辑器 检查音频上下文中的音频节点图,并修改其参数.

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

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

• 测量页面的一部分

• 便笺

网络面板显示每个网络请求原因的堆栈跟踪,在Chrome中,您必须通过网络请求的控制台日志找到并展开它.此外,如果碰巧返回html,您可以看到xhr响应的实际预览(在预览选项卡中).

也许最有用的是,检查员在每个带有事件监听器的元素旁边显示(ev),并直接列出为其添加事件监听器的所有内容.(比Chrome右侧的事件标签更好.)

Answer 2

火狐开发者工具

就我所见，Firefox 开发者工具（从 Firefox 54.0.1 开始）比 Chrome 开发者工具（从 Chrome 59.0 开始）有很多小众功能，即非常具体的工具，大概是由一小群人使用的人。除了这些特殊工具之外，Firefox 开发者工具还具有 Chrome 开发者工具所缺少的几个核心功能。

不同的特点是：

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

Chrome 开发者工具

Chrome DevTools（从 Chrome 59.0 开始）具有更多关于标准工具的功能，并且它们提供了其他小众工具。

这些功能包括：

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

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