分割控制台、美化打印压缩的JS代码以及更多功能 – Firefox开发者工具第28集

正值假日来临之际,Firefox开发者工具团队为您准备了一些精彩的新惊喜,让您在假期项目开发中尽情享受!内容非常丰富,让我们开始吧。

应用管理器

开发工具团队一直将应用管理器视为重点,在Firefox 28中,除了许多小的修复和改进之外,团队还添加了两个主要的新功能来帮助移动开发。这两个功能包括一个额外的清单编辑器和一个嵌入式工具箱。

清单编辑器允许开发者直接编辑其应用清单。使用此编辑器,您可以添加、编辑或删除应用的manifest.webapp中的字段,并将其保存回磁盘。此功能为开发者提供了集成的体验,因为用户在调试和改进应用程序时无需离开工具。

应用管理器中另一个新增的功能是嵌入式工具箱。现在,当您调试您的应用(使用模拟器或在设备上)时,工具箱将在应用管理器中以单独的垂直“选项卡”形式打开,并且可以通过应用的图标轻松区分。

网页控制台

网页控制台最大的变化是名为“分割控制台”的功能;网页控制台现在可以从任何其他工具中调用。使用分割控制台模式非常简单 - 如果您正在使用任何其他工具并且需要访问控制台,只需按Escape键或单击按钮即可切换分割控制台,如下面的简短屏幕录像所示。

但这并不是对控制台的唯一改进。除了分割控制台之外,我们还做出了以下更改:

  • CSS警告默认关闭 – CSS警告通常会在页面加载时向控制台添加数百条消息。
  • 控制台现在将为调试器所在的当前作用域提供自动完成建议。
  • 消息时间戳可以切换开启/关闭(默认关闭)。
  • console.exception()console.assert() 已添加到控制台API。
  • 我们为控制台添加了深色主题。

调试器

在调试器中,我们添加了两个开发者一直要求的关键功能。首先,我们添加了美化打印压缩的JS文件的功能。

如果您压缩了JavaScript代码或需要单步执行来自远程站点的压缩库,此功能特别有用 - 只需单击压缩按钮(上图)即可获得格式更加美观的版本。

除此之外,我们还为调试器添加了一项功能,允许您在调试时检查变量的值。对于任何变量,只需将鼠标悬停在其上或单击它即可弹出一个显示当前值的弹出窗口。

弹出窗口不仅允许您检查布尔值(如上图)等简单类型,还可以检查对象和DOM节点。

检查器

继在Firefox 27中向检查器添加各种工具提示之后,我们在检查器中添加了一些其他功能:

  • 规则视图中的颜色选择器工具提示。
  • 我们更新了工具提示的样式,使其更好地匹配深色和浅色主题。
  • 根据您的反馈调整了工具提示的显示超时时间。

这是一张截图,让您了解颜色选择器工具提示的外观。

总结

这是一个非常长的列表,但还有几个额外的更改我想特别指出:

  • 网络监视器现在有一个清除按钮,这对于开发大量使用Web API的应用的开发者来说应该特别有用。

  • 作为附加组件或平台开发者的额外奖励,我们扩展了浏览器调试器的功能并将其重命名为浏览器工具箱。当您打开工具箱时,您将看到一系列完整的工具,不仅包括调试器,还包括控制台、检查器、样式编辑器、性能分析器、网络监视器和Scratchpad。

关于 Robert Nyman [荣誉编辑]

技术布道师兼Mozilla Hacks编辑。发表HTML5、JavaScript和开放Web方面的演讲和博客文章。Robert是HTML5和开放Web的坚定支持者,自1999年以来一直从事Web前端开发工作 - 在瑞典和纽约市。他还在http://robertnyman.com上定期发表博客文章,并且热爱旅行和结识新朋友。

更多Robert Nyman [荣誉编辑]的文章…


16条评论

  1. Barry van Oudtshoorn

    很高兴看到Firefox开发者工具取得了长足的进步。我尤其高兴看到网络面板上的“清除”按钮 - 这将使我更容易专注于我感兴趣的内容。很棒的功能。

    2013年12月17日 下午17:18

  2. ilyas

    提示压缩的js时是否可以进行美化打印?(自动解压缩压缩的js)

    2013年12月18日 上午00:28

    1. ilyas

      我现在看到了?这是最好的?谢谢

      2013年12月18日 上午10:20

      1. Nick Fitzgerald

        我们还没有自动美化打印压缩的JS代码。请关注https://bugzilla.mozilla.org/show_bug.cgi?id=913665

        2013年12月18日 下午15:07

  3. Abhinav jagtap

    这真是太棒了。

    2013年12月18日 上午04:27

  4. Bryan

    看起来很棒!继续努力。

    2013年12月18日 上午07:43

    1. Robert Nyman [编辑]

      谢谢!

      2013年12月18日 上午07:46

  5. Steve

    我很久以前就开始使用Mozilla了,我喜欢它的界面以及它提供更多开发者工具选项的方式,可以轻松地进行在线编辑,并且可以查找错误等。

    我之前使用的是Firebug,现在我认为是时候使用Firefox开发者工具了,我喜欢Mozilla的响应式设计工具…

    2013年12月18日 上午08:32

    1. Robert Nyman [编辑]

      谢谢,很高兴听到这些!

      2013年12月19日 上午06:41

  6. Axel Rauschmayer

    “分割控制台”是一个很棒的想法。也希望Scratchpad具有此功能(可能默认显示)。

    2013年12月18日 上午11:35

    1. Nick Fitzgerald

      此功能请求不时出现。我对此没有强烈的意见,但反对它的传统理由是,它没有必要,因为您可以输入控制台中输入的任何内容,并在Scratchpad中直接显示/检查它。

      如果您想快速轻松地找到变量/属性的值,我认为此错误可能更适合您的目标:https://bugzilla.mozilla.org/show_bug.cgi?id=936666

      这与这个错误有点相关(尽管我们开始偏离主题了):https://bugzilla.mozilla.org/show_bug.cgi?id=922812http://fitzgeraldnick.com/weblog/52/

      但实际上,我只是对此感到非常兴奋,并且认为它对原型设计生产力来说是一个巨大的福音,但有点难以解释。

      无论如何,如果您认为您的用例没有被其他错误或直接在Scratchpad中键入您想要的内容所很好地涵盖,请在此处提交一个功能请求,说明原因:https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Scratchpad

      2013年12月18日 下午15:47

  7. Louis-Rémi

    我仍然怀念Firebug的一件事:在检查器中,能够右键单击DOM以检查其属性。目前我必须切换到控制台选项卡并在那里键入“$0”,这需要额外的步骤,并且不易发现。

    2013年12月19日 上午01:18

    1. Panos Astithas

      我们应该很快开始着手处理这个问题。请关注此错误以获取更新

      https://bugzilla.mozilla.org/show_bug.cgi?id=704094

      2013年12月19日 上午04:15

  8. Ken Saunders

    只是好奇,当然这没什么大不了的,但选项图标是否应该成为通用的选项图标?
    工具箱选项和调试器选项使用相同的图标。

    感谢团队持续为开发工具添加和改进功能。

    2013年12月19日 上午07:34

    1. Panos Astithas

      调试器选项首先出现,但我们计划将它们合并到全局选项面板中

      https://bugzilla.mozilla.org/show_bug.cgi?id=879408

      2013年12月19日 上午07:43

  9. Jean

    请在网页控制台中添加更多键盘快捷键以进行导航。

    例如,在调试器中
    – 添加新的调试表达式
    – 焦点左侧面板并浏览文件
    – 焦点文本编辑器

    在控制台中
    – 焦点控制台输入(在选项卡之间导航时,它有时会失去焦点)

    谢谢

    2014年1月15日 上午02:29

本文评论已关闭。