HTML 编辑和其他改进在 Firefox 17 开发者工具中

Firefox 17 最近发布到了Aurora 频道,并带来了许多内置网页开发者工具的改进。

HTML 编辑

这是我们工具中最受期待的功能之一,我们对提供的解决方案感到满意。使用页面检查器中的样式面板,您可以轻松地操作页面上的样式。但是,当您处理布局时,有时还需要操作页面的 DOM。新的“标记面板”可以满足您的需求。

新的标记面板

要打开标记面板,请打开页面检查器,并点击看起来像轮廓的按钮,它位于工具栏中的“面包屑”旁边。在上面的屏幕截图中,该按钮是第三个按钮。您也可以按 alt-M(Mac 上按 ctrl-M)来打开标记面板。

与以前一样,您可以通过点击标记面板中的元素来选择要在样式面板中检查的元素。您也可以在标记面板中右键点击元素,以访问一些方便的功能(复制 HTML、删除节点)。

这个版本的标记面板有什么新功能?以前,您可以双击属性值来更改该值。现在,您可以双击几乎任何地方来更改任何内容。双击文本以更改文本。标签本身也是如此。看到标签结束处的“>”前面的空格吗?双击那里,您就可以添加新属性。

您还会发现,用于浏览和编辑 DOM 的键盘导航很容易使用。您可以使用 Tab 键在标签内移动,使用箭头键在节点之间移动。

注意:上面的屏幕截图显示了标记面板的深色主题。计划在该功能发布之前将其替换为浅色主题。

Web 控制台中的更多亮点

Web 控制台仍然是网页开发者中最受欢迎的工具,我们很高兴在这个版本中为您带来更多改进。

更新的 Web 控制台主题

Web 控制台中最明显的变化是更新后的工具栏。Web 控制台现在与其他 Firefox 开发者工具保持一致的外观。

上面的屏幕截图还展示了另一项改进:更好的自动完成。我们发现并修复了一些情况(例如字符串对象),在这些情况下,Web 控制台没有提供尽可能多的帮助。

另一个重要的变化需要注意:Web 控制台附带一个名为 `$` 的辅助函数。以前,该函数是 `document.getElementById` 的别名。为了与其他浏览器控制台保持一致,我们将其更改为 `document.querySelector`,它更加有用。要获得以前的行为,只需在传递给它的参数开头添加一个 #(例如,`$("#myElementID")`)。您可以继续使用 `$$` 作为 `document.querySelectorAll` 的别名。如果您使用的是 jQuery,`$` 辅助函数将被 jQuery 替换,因此此更改不会影响您。

想要更清晰地查看 Web 控制台的文本吗?现在,您可以使用与缩放浏览器窗口相同的控件来缩放 Web 控制台(在 Windows/Linux 上按 ctrl-+, ctrl– 和 ctrl-0 重置。在 Mac 上使用 cmd-+, cmd– 和 cmd-0)。

使用内置的 `console.log` 函数是为您的 web 应用程序添加跟踪的非常方便的方法。现在,如果您将对象发送到 `console.log`,您现在可以点击 Web 控制台输出区域中的该对象以检查它。

此外,在上面的屏幕截图中,您还会看到窗口底部开发者工具栏中的“更多工具”按钮。该按钮可以快速访问其他开发者工具。(眼尖的读者可能会注意到我的开发者工具栏上有一个神秘的“JSTerm”按钮。那是Paul Rouget 的 JSTerm 附加组件,非常实用。快去试试吧!)

页面检查器视觉更新

自从页面检查器去年 11 月在 Aurora 频道首次亮相以来,我们一直倾听网页设计师的反馈。我们发现,除了选定元素之外,整个页面都被深色的“面纱”覆盖,这种外观很显眼,但也使设计师难以在整体设计中看到他们所做的样式更改。几个月前,我们添加了关闭页面变暗功能的选项,但在这个更新中,我们采用了一种更轻便的方法。

页面检查器中更新的突出显示功能

我们没有让整个页面变暗,而是使用微妙的虚线和实用的节点工具栏来突出显示选定的元素。更好的是,当您将光标移到样式面板中尝试样式更改时,突出显示功能会完全消失,这样您就可以完全专注于样式。

调试器改进

最新的调试器

自从调试器三个月前在 Aurora 频道首次亮相以来,它已经进行了大量的改进,有些是可见的,有些是不可见的。您可以在上面的屏幕截图中看到一个可见的变化:在所有脚本中搜索!只需转到查找框,并以“!”(感叹号)开头您的搜索,您就可以快速找到工具栏下方区域中所有脚本的匹配项。

如果您想要更多空间来查看代码,工具栏中有一个新的按钮(屏幕截图中左侧的第二个按钮),它将关闭两个侧边面板,为您的代码提供所有必要的空间。

最后,我们添加了更多键盘快捷键,使使用调试器比以往更快。

  • alt-shift-P(Windows),ctrl-shift-P(Mac)以聚焦搜索框
  • alt-shift-T(Windows),ctrl-shift-T(Mac)进行字符串(标记)搜索
  • F6 用于继续
  • F7 用于单步跳过
  • F8 用于单步进入
  • shift-F8 用于单步跳出

**更新:** 还有一个调试器改进值得一提:如Firefox 15 发行说明中所述,存在调试器在页面重新加载时无法命中断点的问题。这个问题已在 Firefox 16(现在已进入 Beta 版本)中修复。

试试 Aurora:对您有好处!

所有这些更改现已在Aurora 频道上提供,并计划在今年晚些时候发布。我认为您会发现 Aurora 运行良好,所以请试一试,并通过反馈按钮告诉我们您的想法!


28 条评论

  1. Russ

    F6 用于继续
    F7 用于单步进入
    F8 用于单步跳出

    请,拜托,让它们与 Firebug 一样。

    2012 年 9 月 4 日 06:45

    1. Kevin Dangoor

      请注意,我需要更正这篇文章。F8 用于单步进入,shift-F8 用于单步跳出。

      这些按键绑定的理由在以下位置讨论:

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

      基本上,这组按键绑定在很大程度上没有冲突,并且可以在跨平台使用。

      2012 年 9 月 4 日 07:16

      1. Russ

        抱歉,Kevin,我不同意。作为一名 Windows 开发人员,现在我需要映射(在脑海中)三组调试器单步执行按键。

        此外,我认为将 F6/F7 按键(已被 FF 占用)的冲突称为“在很大程度上没有冲突”是不合理的 <- 某人正在添加代码来检测上下文和焦点,以确保不会发生冲突。这是以前不存在的需要维护的代码。

        $0.02

        p.s. 不可读的 CAPTCHA 计数:37(不是在开玩笑)

        2012 年 9 月 4 日 上午 08:07

        1. Kevin Dangoor

          这部分是跨平台问题。我认为在开发这些快捷键时,他们试图让快捷键在任何机器上都能使用。有人可能会争论,你应该针对平台优化,还是针对跨平台使用的 Firefox 用户优化。

          F11 在 Mac 上存在冲突问题(不仅仅是 Firefox)。

          我很感谢你的意见,我们会将其与其他用户的反馈一起考虑,并在进行更多用户研究时参考。

          感谢你坚持不懈地克服了验证码带来的痛苦。我给 Hacks 网站的管理人员发了一封邮件,看看现在是否有一种更好的反垃圾邮件解决方案。ReCAPTCHA 甚至对人类来说都变得难以使用。

          2012 年 9 月 4 日 上午 09:33

          1. Russ

            > 有人可能会争论,你应该针对平台优化,还是针对跨平台使用的 Firefox 用户优化。

            啊……现在这又是一个完全不同的问题了。对我来说,键位映射应该像级联一样工作(是的,像 CSS 一样,有点类似)——让我自己设置,如果我没有设置,我就得到应用程序(html)所决定的设置,如果应用程序没有选择,浏览器就会决定。(你明白我的意思)。

            但那是另外一个争论话题。对于这个问题,要考虑“先前的使用”,而提出全新的映射是最糟糕的做法(再次强调,0.02)。

            我正要进入验证码领域——祝我好运!

            计数:11

            2012 年 9 月 4 日 上午 10:39

          2. tom jones

            你现在基本上是把 Xcode 的键位映射从 OSX 强加给 Windows 开发人员,而 Windows 开发人员远远多于 OSX 开发人员和跨平台 Firefox 开发人员。

            想想这些优先级吧。

            此外,这个验证码太蠢了。

            只是我的一点拙见。

            2012 年 9 月 5 日 下午 18:18

        2. Robert Nyman [Mozilla]

          我在 Mozilla Hacks 博客工作,我坦白地说:我也不是验证码的粉丝。

          它是在垃圾邮件数量无法控制的时候实施的,但我们绝对不想让你们更难发表评论。

          这是我们评估和改进的目标之一。
          感谢你的评论,并感谢你的坚持!

          2012 年 9 月 4 日 下午 12:03

          1. thinsoldier

            我知道这有点跑题,但我刚刚想到一个(可能不是)绝妙的想法来取代验证码。

            在 [西班牙国旗图片] 下雨,主要是落在
            ( ) [狗的图片]
            (*) [飞机的图片]
            ( ) [汽车的图片]

            [尝试另一个问题] [提交]

            2012 年 9 月 7 日 下午 12:56

          2. Russ

            thinsoldier:是的,我以前见过基于测验的哨兵。对我来说有效!

            验证码计数:35(这太荒谬了!)

            2012 年 9 月 7 日 下午 13:06

  2. Daniel

    这些都是非常好的改进!

    我非常想在页面检查器中看到对边距/填充/边框的原位突出显示。

    JSTerm 的计划是什么?

    “你也可以按下 Ctrl+M 打开标记面板”
    对我来说是 Alt+M。

    2012 年 9 月 4 日 上午 09:34

    1. Kevin Dangoor

      很高兴你喜欢这些改进!

      是的,对边距/填充/边框的原位突出显示正在计划中。甚至有一个初步的补丁

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

      现在,我们还没有决定要对 JSTerm 做什么。但是,它仍然是一个实用的插件 :)

      感谢你的更正。键盘快捷键总是让我摸不着头脑!

      2012 年 9 月 5 日 上午 06:54

  3. Jeff Sibbach

    更多键盘快捷键!我一直都在用它们,很喜欢它们。

    2012 年 9 月 4 日 下午 23:59

  4. Foxinni

    太棒了。这些都是非常酷的增强功能!

    2012 年 9 月 5 日 上午 02:41

  5. Roman Semenenko

    能够拥有一个包含当前调试器信息的 REPL(像 Chrome 或 Firebug 中那样)将非常有用。

    2012 年 9 月 5 日 上午 02:54

  6. tom jones

    F6 如何不与“聚焦到 URL 栏”冲突?

    2012 年 9 月 5 日 下午 18:11

  7. starwed

    @tomjones 这个问题在 Bugzilla 的讨论中得到了解答。

    > 只要调试器获得焦点,我们就是安全的。

    2012 年 9 月 5 日 下午 21:15

  8. Synonymous

    function $(param) document.querySelector(param) || document.getElementById(param);

    2012 年 9 月 6 日 上午 09:36

  9. Peter Gasston

    这些都非常棒,我很高兴看到这些工具得到了改进。但是,请务必提供一个选项,让我能够将样式面板停靠在标记面板的右侧,就像其他所有主要浏览器工具一样;将它放在右侧的单独面板中,会在我在小屏幕上打开它时调整页面大小,这很不理想。

    2012 年 9 月 10 日 上午 11:11

    1. Kevin Dangoor

      目前,我们正在对工具的组织进行大量的改进。

      不过,现在我要提醒你的是,如果你开启了响应式设计视图,工具将不会改变你指定的大小。

      2012 年 9 月 10 日 上午 11:15

  10. Dave Rodriguez

    关于开发工具是否能够从浏览器中弹出到独立窗口,有什么最新消息吗?

    2012 年 9 月 12 日 上午 09:41

    1. Kevin Dangoor

      它们可以。我们正在进行一些重构工作,以确保这项功能能够正常运行。目前还没有确切的时间表,但它是我们的首要任务。

      2012 年 9 月 12 日 上午 10:50

      1. Russ

        太棒了——对于任何超过“修修补补”的工作来说,这都是必须的。

        (惊叹地后退——是真的吗???我看到了什么?或者,更确切地说,我什么都没看到???)

        验证码计数:0

        太棒了!

        2012 年 9 月 12 日 上午 11:00

  11. tom jones

    与我上面说过的相关,我今天刚读到这篇文章,它明显地让我想起了这个快捷键问题

    “我希望这个应用在所有平台上看起来都一样”,这句话从来没有人说过

    http://fuckjetpacks.com/read/i_wish_this_app_looked_the_same_on_all_platforms_said_no_one_ever

    2012 年 9 月 21 日 下午 18:45

  12. Emre Ayca

    我知道这个更新已经有一段时间了,但是你们能否恢复“调暗页面”选项?它非常有用且优雅,虽然我能理解为什么默认情况下使用新的更明亮的“爬行蚂蚁”视图,但我无法理解为什么你们完全删除了调暗页面的选项。你们至少可以将其设置为隐藏选项,好吗?

    2012 年 10 月 14 日 下午 14:44

  13. Zsolt

    “计划是在发布该功能之前用浅色主题替换它。”

    不幸的是,它仍然只是一个计划。:-( Firefox 17 发布了带有深色主题的标记面板,它非常伤眼(至少如果你看的时间超过几秒钟)。而且没有简单的 about:config 选项来设置背景颜色或主题,所以我不得不退回到 Firebug 直到这个问题得到解决。

    2012 年 11 月 26 日 上午 03:11

    1. Kevin Dangoor

      对此我表示歉意。我想浅色主题没有及时发布到 17 版本。我看到它在 Aurora 18 中(并且将在 Beta 18 发布后的一天或两天内发布)。

      2012 年 11 月 26 日 上午 06:22

  14. Leho Kraav (@lkraav)

    是的,我 +1 表示对浅色主题没有发布感到惊讶 :/

    2012 年 12 月 2 日 上午 05:14

  15. Adolfo Benedetti

    在 about:config(Aurora 19)中有一个用于切换浅色主题的设置吗?

    2012 年 12 月 15 日 上午 09:18

本文评论已关闭。