Firefox 29开发者工具一窥:CSS source map,性能分析

开发 前端
Firefox 29 已经放到曙光版(Aurora)发布频道了(译注:每一个 Firefox 正式版的出炉都要经历 Nightly、Aurora 和 Beta 三个阶段。),这意味着现在是时候透露这个版本的重要更新了,这篇文章将带你一窥新版开发者工具的究竟。

Firefox 29 已经放到曙光版(Aurora)发布频道了(译注:每一个 Firefox 正式版的出炉都要经历 Nightly、Aurora 和 Beta 三个阶段。),这意味着现在是时候透露这个版本的重要更新了,这篇文章将带你一窥新版开发者工具的究竟。

开发者工具更美观了

除了添加新的功能,我们还更新了暗色主题和亮色主题的外观。我们对亮色主题做了大幅修改,而且整个工具箱在两种主题下都保持了统一的设计。你可以在工具箱中的设置里更换主题。(详见开发备注

[[109689]]
[[109694]]

网络监视器

网络监视器向你展示了浏览器花了多少时间来加载网页的各个文件。这项功能能帮助你分析网站在***加载时和存在缓存时的网络性能。(详见开发备注

[[109695]]

点击网络(Network)面板中的秒表图标即可开启性能分析工具。详见下面的视频,你也可以在 MDN 上查看更多详情

在新版 Firefox 中你能够以 Data URI 的格式复制图片请求。只需在图片请求上右击,在右键菜单中选择「Copy Image as Data URI」,数据就会保存到你的系统剪切板了。(详见开发备注

[[109690]]

元素审查

我们之前已经对元素选择器做了改动,把元素选择器按钮与其他按钮放到了同一行。(详见开发备注

我们在 CSS 规则视图中添加了 CSS 变形(transform)预览框。现在,如果你把鼠标悬浮到一条 CSS 变形规则上,你就会在弹出的预览框里看到效果了。马上下载 Firefox Nightly 版或者曙光版来体验一下 CSS 变形的效果 吧。(详见开发备注

[[109691]]

CSS 规则视图现在支持粘贴多条 CSS 语句,例如

background: #ccc;
color: red

(详见开发备注

和在网络面板里一样,你也可以在这里以 Data URI 的格式复制图片了。(详见开发备注

样式编辑器

样式编辑器现已支持 CSS source map(详见开发备注),并且能够自动填充 CSS 属性和值。(详见开发备注

想要看到更多相关内容?你可以查看我们先前发布的一篇文章,介绍了如何在开发者工具中借助 source map 来编辑 Sass 和 Less 文件

[[109692]]

调试器

我们在源文件列表的右边添加了一个经典的调用堆栈列表。(详见开发备注

[[109696]]

调试器里还新增了一个「启用/禁用所有断点」按钮。它可以一次性地切换所有断点的状态,方便开发者在正常模式和调试模式间快速地切换。(详见开发备注

[[109697]]

你还可以从调试器里直接选中并审查 DOM 节点。如果你的鼠标悬停在变量列表中一个 DOM 节点变量上,页面中对应的元素就会高亮。如果你点击下图所示的审查器图标,该节点就会在元素审查标签中被打开。控制台输出的节点也支持这个功能。(详见开发备注

[[109698]]

新的代码美化工具(pretty printer)现在可以保留源代码中的注释了。我们使用的美化工具是开源的 pretty-fast,它相当地快。如果你发现它运行很慢,不妨告诉我们。(详见开发备注

控制台

我们对 console.trace 进行了改进。调用堆栈与控制台其他输出展示在一起,并且每行末尾有一个指向对应源代码的链接,点击链接可以在调试器里将其打开。(详见开发备注

[[109699]]

同时我们还改进了控制台里对象的输出,根据对象类型的不同,控制台会展示不同的细节。(详见开发备注

[[109700]]

代码编辑器

开发者工具里的很多小工具都提供代码编辑功能,比如便签(Scratchpad)、样式编辑器和调试器。新版的代码编辑器有如下更新:

  • 代码折叠。(详见开发备注
  • 支持 Emacs 快捷键和 VIM 快捷键。打开 about:config 页面,将 devtools.editor.keymap 设置为 vim 或者 emacs,然后重启开发者工具即可。(详见开发备注
  • 支持 ES6 语法高亮。(详见开发备注
    [[109693]]

非常感谢本次更新中开发者工具的开发者们(一共有43位)!这里有一份 Firefox 29 解决的开发者工具相关 bug 列表

如果你有任何反馈建议、bug 提交、需求申请或其他问题,可以一如既往地在本文下方评论,或者与我们的团队联系 @FirefoxDevTools

原文链接: Brian Grinstead   翻译: 伯乐在线 - 方应杭

译文链接: http://blog.jobbole.com/60204/

责任编辑:林师授 来源: 伯乐在线
相关推荐

2011-12-27 09:31:28

Aurora

2013-10-24 09:46:01

Firefox开发者

2011-06-22 10:35:02

FirefoxWeb

2013-03-19 14:28:24

Firefox浏览器

2019-11-14 14:44:32

开发者工具

2012-12-24 13:23:31

Firefox浏览器

2014-11-11 15:01:04

FirefoxMozilla

2018-12-17 16:54:50

开发者技能 Firefox

2016-03-25 09:29:24

Apple开发工具开发者

2011-07-19 09:51:32

性能优化Designing FAndroid

2015-05-18 10:10:23

App Analyti分析

2015-04-23 19:22:09

崩溃分析工具

2011-12-23 11:22:25

2022-08-15 11:29:44

腾讯云云端开发工具Web IDE

2021-12-25 22:31:55

Sentry 监控SDK 开发 性能监控

2021-08-01 22:59:16

Python工具开发

2023-12-30 16:30:29

开发者工具Vite

2023-11-30 15:30:19

Python编程语言

2015-08-05 10:43:40

开发者开发工具

2015-08-05 14:25:26

开发者开发工具
点赞
收藏

51CTO技术栈公众号