Firefox 17 最近发布到了Aurora 频道,并带来了许多内置网页开发者工具的改进。
HTML 编辑
这是我们工具中最受期待的功能之一,我们对提供的解决方案感到满意。使用页面检查器中的样式面板,您可以轻松地操作页面上的样式。但是,当您处理布局时,有时还需要操作页面的 DOM。新的“标记面板”可以满足您的需求。
要打开标记面板,请打开页面检查器,并点击看起来像轮廓的按钮,它位于工具栏中的“面包屑”旁边。在上面的屏幕截图中,该按钮是第三个按钮。您也可以按 alt-M(Mac 上按 ctrl-M)来打开标记面板。
与以前一样,您可以通过点击标记面板中的元素来选择要在样式面板中检查的元素。您也可以在标记面板中右键点击元素,以访问一些方便的功能(复制 HTML、删除节点)。
这个版本的标记面板有什么新功能?以前,您可以双击属性值来更改该值。现在,您可以双击几乎任何地方来更改任何内容。双击文本以更改文本。标签本身也是如此。看到标签结束处的“>”前面的空格吗?双击那里,您就可以添加新属性。
您还会发现,用于浏览和编辑 DOM 的键盘导航很容易使用。您可以使用 Tab 键在标签内移动,使用箭头键在节点之间移动。
注意:上面的屏幕截图显示了标记面板的深色主题。计划在该功能发布之前将其替换为浅色主题。
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 条评论