火车头：Firefox 41

火车头 是一系列文章，重点介绍 Firefox 最新版本中的功能。每六周就会发布一个新的 Firefox 版本——我们在 Mozilla 将此模式称为“发布列车”。

Firefox 41（迄今为止最火热的 Firefox）为浏览器用户和 Web 开发人员带来了大量新的和改进的功能。让我们来看一些亮点。

有关更改和新增内容的完整列表，请查看 Firefox 41 发行说明。

截图单个元素

只需要捕获网页的一小部分？现在可以使用检查器面板截图页面上单个元素包含的区域。

Right click on a node in the markup view.

结果是裁剪完美的快照。

Resulting Screenshot of an element on the page.

连接状态

navigator.onLine API 从历史上看，并不是那么有用。页面只能查询 Firefox 本身是否处于特定的“脱机工作”状态，而不管计算机是否具有任何网络连接。现在，navigator.onLine 使用系统网络信息来反映设备互联网连接的状态！

查看 Potch 在 CodePen 上编写的 QjGoRP。

剪贴板管理

代表用户复制文本曾经是计算机科学中最难的问题。Web 开发人员必须在页面上嵌入 Flash 小部件才能将一些文本放入用户的剪贴板。现在不用了！现在，开发人员可以使用 JavaScript 以编程方式将文本复制到用户的剪贴板，前提是用户执行显式操作（例如单击按钮）。

阅读有关剪贴板操作的 Hacks 文章，了解更多详细信息。

网络面板 HAR 导出

我们应该将网络面板重命名为 Hagar，因为它现在可以 HAR 化了！HAR 是一种网络请求存档格式，许多性能和请求分析工具都使用它，现在可以从网络面板的上下文菜单中导出 HAR 信息。

The location of the Save As HAR option in the context menu.

<picture> 完美

在火车头的上一期中，我提供了以下关于 Firefox 中自适应图像支持的警告

自适应图像将使用正确的媒体查询加载，但目前不会响应视口大小调整。此错误正在积极解决，并在此处跟踪，并在 Firefox 的未来版本中修复。

好吧，那个未来版本就是这个现在版本！自适应图像现在将响应页面视口加载后发生的更改。计划成功实现的时候，是不是感觉很美好！

不可能有更多了……

……但绝对还有。在开发者发行说明中提供了大量其他信息，或者对于大型 <table> 爱好者，还可以查看已修复错误的完整列表。

继续摇滚自由网络！

17 条评论

Fabio Beneditto

很棒的技巧 :)

2015年9月29日 09:20
MT

“截图单个元素”功能没有考虑实际的 DPI。

因此，例如，在具有 200% 系统级缩放的 4K 监视器上，截图比页面上实际显示的小 4 倍（就像系统级缩放为 100% 一样）。

2015年9月29日 10:44
1. Potch
  
  你说得对——这似乎是一个错误。我因此提交了 https://bugzilla.mozilla.org/show_bug.cgi?id=1209773。
  
  2015年9月29日 15:12
  1. MT
    
    谢谢，Potch。
    
    2015年9月29日 15:19
2. Joe Zim
  
  我在普通的 1600×900 监视器上也遇到了问题，右侧边缘被裁掉了一点。
  
  2015年9月30日 06:53
  1. en45masao
    
    我在我的环境中遇到了同样的问题。
    
    似乎“右侧边缘被裁掉了一点”的问题发生在 body 元素具有滚动条时。因此，您可以在截屏之前暂时应用“body {overflow: hidden}”来解决此问题。（例如，在检查器的控制台中输入“$(‘body’).css(‘overflow’, ‘hidden’)”）
    
    到目前为止，我一直在开发者工具栏上使用“screenshot –selector”命令。（Shift + F2）但是此功能仍然存在相同的问题，并且 W/A 也适用。
    
    2015年10月1日 03:41
Hervé

截图功能很棒！我在 http://mozillazine-fr.org/avec-firefox-41-mozilla-soigne-les-developpeurs/ 上告诉了法国读者。干杯。

2015年9月30日 02:08
jt

它不适用于 iframe。

2015年9月30日 09:00
Ivan

您好，Potch，

您知道是否计划在 Linux 上的 Adobe Primetime 发布？今年是否可以使用？

我正在 Windows（32 位版本）上测试它，它运行得非常好；)

2015年9月30日 16:20
Vinay

不起作用。
我尝试截取此页面顶部的元素的屏幕截图，但得到了一个裁剪的图像。
在 Windows 7 64 位上使用 41.0.1

2015年10月1日 00:26
Jacopo

这很不错 :)

2015年10月1日 02:53
Nutamatic

如果您在此文档中截取本段的屏幕截图“我们应该将网络面板重命名为 Hagar，因为它现在可以 HAR 化了……”，那么它会在右侧被截断 http://i.imgur.com/pD33DuT.png

2015年10月1日 04:50
Francis Kim

很高兴看到 Firefox 开发工具日益完善。

2015年10月1日 05:10
DD

一些优化将非常有助于提高 CPU 和内存使用率。我停止使用 FF，因为它对我的机器来说太占用资源了（当然，除了 Opera 之外，其他替代方案并没有好多少，尽管我更喜欢 FF 的功能）。

2015年10月1日 07:06
Dumindu

如果我们在工具栏上有一个相机图标，并且单击它时，会弹出一个包含选项的菜单（例如显示书签），那就更好了。
截取整个页面截图
截取页面可见部分
选择区域截屏
选择元素截屏

2015年10月3日 00:39
MikeP

是否可以在代码中获取实际图像？即作为 dataurl 或 img/canvas 项目？

2015年10月5日 12:40
MT

无法取消订阅此帖子的评论。尝试了“管理订阅”页面上的不同选项（“删除”、“暂停”、“所有评论”），均无效。请修复。

2015年10月5日 14:15

本文的评论已关闭。

作者