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

时间:2017-02-28 09:04:29

标签: google-chrome firefox google-chrome-devtools firefox-developer-tools

现在Firebug is fading away,Firefox用户为asked to switch over to the Firefox Developer Tools

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

你能否对这个问题给我一个客观的答案?

2 个答案:

答案 0 :(得分:6)

来自docs

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

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

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

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

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

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

  • 衡量页面的一部分

  • 便签

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

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

答案 1 :(得分:3)

Firefox DevTools

据我所知,Firefox开发者工具(从Firefox 54.0.1开始)在Chrome开发者工具(从Chrome 59.0开始)上有许多小众功能,即非常具体的工具,可能是由相当小的一群人。除了这些特殊工具之外,Firefox开发者工具还具有Chrome开发者工具所缺少的几个核心功能。

不同的功能是:

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

Chrome DevTools

Chrome DevTools(从Chrome 59.0开始)有更多关于标准工具的功能,并提供其他利基工具。

这些功能包括:

  • DOM和XHR断点
  • 事件监听器面板
  • “属性”面板
  • 安全检查员
  • 审核
  • 触摸设备仿真中的模拟和像素密度
  • 在“来源”面板中进行实时编辑
  • 工作区
  • 网络请求阻止
  • 高级记忆工具
  • Manifest,service worker&应用程序缓存检查器
  • 滚动效果问题荧光笔
  • 每秒帧数
  • CSS媒体模拟
  • 全局文件搜索
  • 代码覆盖率分析器
  • 地理位置,方向和触控仿真
  • CSS样式的本地覆盖

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