开发者版 48 – Firebug 功能、可编辑存储、检查器改进等…

本周标志着 Firefox 开发者版 48 的发布。为了准备 多进程 Firefox 的到来以及 Firebug 扩展的弃用,我们正在将 Firebug 功能移植到内置工具中。我们还对当前工具进行了一些调整,我们将在本文中介绍。

Firebug 主题

作为将 Firebug 功能移植到内置工具的一部分,我们还移植了 Firebug 主题,使 Firebug 用户拥有更熟悉的开发环境。这是主题的初始版本,如果您发现任何错误,请告知我们并 在此处报告。以下是 Firebug 主题的屏幕截图

Firebug theme

DOM 面板

DOM 面板是我们从 Firebug 移植的另一个功能。此面板提供了一个方便的树状视图,允许您浏览和检查页面 DOM 结构。以下是新工具的屏幕截图

DOM Panel screenshot

可编辑存储

存储检查器中的编辑支持是最常请求的功能之一。在此版本中,我们添加了编辑和删除 cookie、本地存储和会话存储条目等功能。您可以双击单元格进行编辑。您还可以使用上下文菜单删除条目。
Editable storage entries

Deletable cells

几何编辑器

在此版本中,我们添加了一个新的可视化编辑工具,允许您轻松调整任何绝对定位固定定位元素的位置。您可以使用此工具更改顶部、左侧、底部和右侧属性的值。要启动几何编辑器,请转到检查器中的 盒模型 选项卡,然后单击 几何编辑器图标 图标。

Geometry Editor

内存工具改进

内存工具现在增强了全新的树状图视图,该视图提供了有关如何使用内存的快速直观的视觉概述。此新视图按其类型对对象进行分组,使您可以轻松查看类似项目(绘制画布线条时的数组、加载脚本繁重的网站时的脚本等)的数量占用内存。此外,地图中每个项目的尺寸与其使用的字节数成正比,使您可以轻松查看哪些项目占用了大部分内存。

Memory tool tree map

内存工具提供了一个有用的 聚合视图,该视图对相同类型节点的所有实例进行分组。在此版本中,您现在可以单击 ⁂ 图标以在单独的视图中查看指定类型的全部单个实例。您还可以使用上一个版本中添加的 保留路径面板 查看这些单个节点的保留路径。这使您能够在调试 Web 应用程序时精确查明特定对象泄漏的位置。

Aggregate view individual nodes

最后,我们还添加了从内存工具侧边栏中删除单个快照的功能。

检查器改进

我们已经完善了检查器中的用户体验,使其更加流畅和易于使用。规则视图 自动完成现在默认选择最常用的属性,以加快您的创作体验。例如,将选择background 而不是backface-visibility,因为它更常用。这是一个功能演示的屏幕录制

Better rules view autocomplete

我们还改进了规则视图中处理长值的方式。专门用于长值的新多行模式使您可以方便地访问和选择正在编辑的值的不同部分。

Multi-line mode

标记视图 现在强调了父节点与其子节点之间的关系。选定的元素现在在其下方有一条线,突出显示子节点。当 HTML 标记复杂时,这使您可以轻松地发现选定元素的子节点。

Parent child relationship

添加了一种在规则视图中快速切换不同角度单位的方法。角度值旁边现在有一个色块,您可以按住 Shift 键单击该色块以在不同的单位之间循环,类似于颜色值的交互。此功能由贡献者 Nicolas Chevobbe 添加。

Cycle between angle units

最后,我们添加了键盘快捷键以轻松在标记视图搜索结果之间导航。您现在可以使用Shift+Enter在搜索结果中向后导航。此外,Ctrl/Cmd+GCtrl/Cmd+Shift+G现在充当EnterShift+Enter的别名。这些键盘快捷键由贡献者 Steve Melia 添加。

控制台改进

控制台也进行了一些调整,将使您日常使用该工具的体验更加愉快。第一个改进来自我们正在移植的 Firebug 功能集。您现在可以展开网络日志以检查它们并显示 Firebug 样式的详细信息视图。这是一个屏幕截图

Inline HTTP inspection

如果您正在使用MapSet对象,您现在可以从控制台侧边栏查看和检查其各个条目。此功能由贡献者 Jarda Snajdr 添加。

Improved Map/Set inspection

最后,我们添加了对console.clear()的支持,以清除控制台输出。

about:debugging 功能

为了准备 WebExtensions 的发布,我们添加了一项功能,这将对扩展开发人员有很大帮助。您现在可以从about:debugging重新加载扩展程序,这使您能够快速开发扩展程序,而无需在每次更改时都重新安装它。

Reloading add-ons with about:debugging

如果您正在使用 Service Workers,您会注意到我们添加了一种取消注册单个工作程序的方法。这是一个屏幕截图

Unregister service workers

其他值得注意的变化

除了上述更改外,我们还完善了工具箱的各个区域,包括

感谢所有为本版本做出贡献的人!请务必获取 Firefox 开发者版 的最新副本并分享您的想法!如果您对移植的不同 Firebug 功能有任何反馈,我们很乐意听到您的 建议和建设性意见

关于 Tim Nguyen

我从事 Web 浏览器的工作。

更多 Tim Nguyen 的文章…


15 条评论

  1. Kostas

    感谢您提供这些信息。
    仅一个小小的更正:“切换文件以使调试器更快”的相关错误是 https://bugzilla.mozilla.org/show_bug.cgi?id=1233927

    2016 年 5 月 2 日 14:04

    1. Tim Nguyen

      谢谢,抓住了!我已使用正确的错误号更新了博文。

      2016 年 5 月 2 日 14:43

  2. Šime Vidas

    “…允许您浏览和检查页面的 DOM 结构” – 这听起来更像是检查器面板。据我所知,DOM 面板更像是全局对象的树状视图。

    2016 年 5 月 2 日 22:40

  3. Luca

    你好,
    好消息!!!过去我经常使用此网站 http://ffdevtools.uservoice.com/ 来建议新功能,但现在不再可用,我找不到任何相关新闻。我建议了许多改进用户体验的事情,但如何再次建议它们?

    2016 年 5 月 3 日 03:26

    1. Jeff Griffiths

      对于任何困惑,我深感抱歉 - 由于缺乏流量,我们删除了 uservoice 网站,但是以前提出的建议已导出并存档。如果您对开发者版 48 有任何具体的建议或错误报告,请在 bugzilla 中提交错误

      https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools

      2016 年 5 月 3 日 14:48

      1. jxn

        关于排名第一的项目 - 从开发者工具实时编辑 JavaScript 有什么消息吗?当时,听起来它可能会在 2014 年第四季度发布,但我没有听到任何关于它的消息,甚至无法在 bugzilla 中找到跟踪错误。我想听取任何更新。

        2016 年 5 月 8 日 21:25

        1. Luca

          我也建议了很多事情,现在我认为一切都丢失了……很可惜无法在另一个网站上创建另一个列表……

          2016 年 5 月 9 日 23:51

          1. Jens

            Bugzilla 充满了很棒的想法。只需查看“开发者工具”组件或提交错误即可。但我同意,在 bugzilla 中,查找问题/想法要困难得多,而且没有人真正使用其投票系统。

            2016 年 5 月 24 日 11:22

        2. Jens

          我想就是这样
          开发者工具前端错误:https://bugzilla.mozilla.org/show_bug.cgi?id=894997,它依赖于此后端错误:https://bugzilla.mozilla.org/show_bug.cgi?id=771339

          也花了我很多时间才找到。

          我不知道它是否比其他错误优先级低,但至少您现在可以关注它了。

          PS 我必须说 uservoice 充满了垃圾邮件和侮辱,所以我想最终会需要大量维护工作。错误跟踪器充满了非常有用的想法,只是在 bugzilla 上查找内容并不容易。

          2016 年 5 月 24 日 11:19

  4. Honza

    干得好,Jarda Snajdr,干得好!:-)

    2016 年 5 月 3 日 08:25

  5. João Barreto

    你好,

    Firebug 中我最喜欢的功能之一是使用检查器编辑 HTML/CSS 并查看更改在正在处理的网页上实时反映的功能。

    现在,更改仅在完成编辑后才应用。

    这可以从 Firebug 中导入吗?

    感谢大家的辛勤工作 :)

    2016 年 5 月 3 日 08:55

  6. Jay

    我的所有时间工具 - firebug 的很棒更新。 :)

    2016 年 5 月 5 日 05:36

  7. Tom

    Firefox 移动版何时会出现开发者工具?(请在回复中不要提及任何“虚假”内容。)

    2016 年 5 月 16 日 02:43

  8. Brian

    感谢您的工作!可编辑存储组织得很好,易于使用。

    2016 年 5 月 16 日 14:04

  9. Brian

    可编辑存储确实易于使用。

    2016 年 5 月 16 日 14:05

本文的评论已关闭。