【问题标题】: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 没有提供的功能?

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

【问题讨论】:

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


    【解决方案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 样式的本地覆盖

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

    【讨论】:

      猜你喜欢
      • 2015-05-05
      • 2020-12-11
      • 1970-01-01
      • 1970-01-01
      • 2021-12-08
      • 2016-11-21
      • 1970-01-01
      • 1970-01-01
      • 2020-09-01
      相关资源
      最近更新 更多