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

What unique features do the Firefox DevTools have that the Chrome DevTools don't have and vice versa?

现在 Firebug is fading away, Firefox users are asked to switch over to the Firefox Developer Tools.

因此我想知道,Firefox DevTools 有哪些功能是 Chrome DevTools 没有提供的?

你能给我一个objective这个问题的答案吗?

来自docs

DOM 属性 查看者 检查页面的 DOM 属性、功能等。 (您会注意到对象的属性通常不会在 Chrome 的控制台中列出,您永远不会知道 body.innerHTML 存在,查看控制台中的 "document.body"。)

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

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

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

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

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

  • 测量页面的一部分

  • 便签本

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

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

Firefox 开发者工具

据我所知,Firefox 开发者工具(从 Firefox 54.0.1 开始)比 Chrome 开发者工具(从 Chrome 59.0 开始)有很多小众功能,即非常具体的工具,大概由一小部分人使用。除了这些特殊工具外,Firefox 开发人员工具还具有 Chrome 开发人员工具所缺少的几个核心功能。

不同的特征是:

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

Chrome 开发工具

Chrome DevTools(自 Chrome 59.0 起)具有更多关于标准工具的功能,并且它们提供其他小众工具。

这些功能包括:

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

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