Opera Dragonfly: 可缩放的 profiler 时间线

前天 Opera Dragonfly 团队发布了 profiler 的更新(译者注:包括稳定版和实验版),现在 profiler 具有可调节的缩放显示能力。现在在主时间线的上方,还有一个迷你时间线显示着所有事件。想放大显示特定位置,只须在迷你时间线上点击然后拖选一块区域。选择了一块区域之后,可以用鼠标拖动它,也可以拖曳其边缘以调节其大小。鼠标滚轮和光标键同样可以对选定区域进行调节大小和移动的操作。

profiler 迷你时间线和主时间线

另外 profiler 还加入了通过持续时间的长短来筛选事件的功能。筛选器可以选择显示所有事件、所有持续超过 1 毫秒的事件,或者所有持续超过 15 毫秒的事件。

如有意见或建议请向 Dragonfly 团队反馈

(附 《设置 Opera Dragonfly 为离线版或实验版的方法》

[ Via Opera DragonflyOpera.IM 编译 ]

xvideos

Opera Dragonfly: 重新设计的资源查探器

今天资源查探器以焕然一新的面貌登陆 Opera Dragonfly。基于 网络面板 的最新成果,新的资源查探器让查询网页和应用的资源和文档变得更容易和直观。

新外观,新感觉

摆脱单调的表格和标签式介面,跟新介面说 Hello 吧。标签页和 markup、样式表、脚本、图像、字体、其他资源和文档各自分类组成结构化的树形图,树形图在左侧陈列,资源细节视图在右边显示。

导航、查找和筛选

单击树形图的元素即可展开或折叠。此外,若同时按住 Shift 并单击即可展开其全部子元素。

每个标签页、文档和分组都突出显示其所拥有的元素数目。跨域资源和协议也被列出,帮助你辨认从 CDN、外部 iframe 加载的资源,和 data: URI 资源。

URL 筛选器让你可以精简树形图。用此办法很容易找到 webp 格式的图片、所有 jQuery 插件、在相同域名下的图片和脚本,等等。当然也允许在文本资源中进行查找。一如往常,可以用 F3Shift+F3 快捷键在查找和筛选结果中上下切换。

资源细节

在展开的资源树形图中可以用 光标键上下导航。被选中的资源会在右边显示,并以简短的描述向你提供更深入的信息 —— 包括地址、编码、MIME 类型、猜测类型、大小,和分辨率,并提供一个链接,点击即可在新标签页打开该资源。

主要资源类型都能被识别并显示,例如现在可以预览网络字体效果、编辑样本字符串并快速得到它在多种网络字体下的对比效果。不过另一方面,基于插件的内容如果嵌入 Opera Dragonfly 这类强大的工具中显示难免会有各种问题,所以只提供一个链接让你在新标签页打开该内容。

Dragonfly 团队表示:“我们希望你们享受我们重新打造的资源查探器。一如既往,我们欢迎任何反馈和进一步的建议。”

(附 《设置 Opera Dragonfly 为离线版或实验版的方法》

[ Via Opera DragonflyOpera.IM 编译 ]

youjizz

Opera 12.10 对页面可视性(Page Visibility) API 的支持

最近发布的 Opera 12.10 增加了对页面可视性(Page Visibility) API 的部分支持。
这是一个简单却强大的 API,因为它允许开发者规定一个文档在被隐藏时的行为。如果你有过在办公室手忙脚乱地想找出 200 个标签页中哪个在播放你预料之外的声音这种尴尬情况,你会觉得页面可视性 API 相当实用。

工作原理

页面可视性 API 对 HTML5 文档 接口增加了两个属性 — hiddenvisibilityState — 和一个 visibilitychange 事件(event)。当文档的窗口或标签页不可见,document.hidden 的值将为 true,否则为 false

document.visibilityState 属性直接表明一个文档的特定状态:hidden 或者 visible。标准规格也概述了另两个值 — prerenderunloaded,不过尚未支持。

当一个文档的可视性状态发生改变,Opera 会触发 visibilitychange 事件。这就是有趣之处。当文档不可视,visibilitychange 句柄可以暂停该文档的媒体或动画。当文档再次转为可视,句柄能恢复播放媒体或动画。这对于内存密集型应用例如游戏等特别有用。这个 demo 使用视频展示了一个例子。一个小小的警告:每次这个视频所在标签页置于前台时它都会自动播放。

限制

对此 API 的实现情况可能和你的预想有所出入。例如,从 Opera 切换到其他程序不会触发 visibilitychange 事件。最小化浏览器窗口也不会。

由于页面可视性 API 只是针对文档,你不能用它决定哪一个标签页或者窗口处于活动状态。决定你的文档是否可视因而处于活动状态,这是可行的。但是无法决定当前其他哪个标签页或窗口获得焦点。

其他浏览器

Opera 不是唯一支持这个 API 的浏览器,但是,是目前唯一一个使用无前缀属性的浏览器。其他浏览器的相应属性如下所示。

  • Chrome / WebKit: document.webkitVisibilityStatedocument.webkitHidden
  • Firefox: document.mozVisibilityStatedocument.mozHidden
  • Internet Explorer: document.msVisibilityStatedocument.msHidden

此外你还要监听 webkitvisibilitychangemozvisibilitychange,和 msvisibilitychange 事件。

[ Via Opera Developer NewsOpera.IM 编译 ]

large porn tube

Opera Dragonfly 稳定版更新: 查探函数返回值

(这是之前 Dragonfly 团队预告过的特性:《Opera Dragonfly 新特性预告:JS 代码格式化、显示函数返回值、UPnP》

调试程序时,知晓最后调用的函数的返回值通常很有用。如果返回值被指派给某个变量,这很容易检查,但是有时你会遇到这样的代码,它没有引用到返回值:

mul(add(1, 2), add(3, 4));

今天发布的稳定版本包含一个新特性,让调试这类型的代码变得更容易。一个函数步进结束后,其返回值会在 脚本/Script 标签侧边栏 >> 状态/State 标签 >> 返回值/Return Values 下伴随着其源函数一并显示。在这些返回值旁边有箭头,点击箭头会直接跳到其 return 声明,或者跳到调用此函数的那一行代码。

一行代码可以调用好几个函数,执行这行代码时会按顺序显示所有返回值,最近一次调用在顶部显示。

《设置 Opera Dragonfly 为离线版或实验版的方法》

[ Via Opera DragonflyOpera.IM 编译 ]

Opera Dragonfly 实验版: 在 DOM 视图中查探事件监听

最新实验版引入了在 DOM 视图中查探事件监听的能力。

因为以下这些新特性依赖于浏览器内核最近新增的功能,所以你必须用目前的最新 Opera Next (12.50) 才能体验。

现在的文档视图中,被绑定了事件监听器(event listener)的元素旁边会出现一个新图标 “ev”。在图标上悬停鼠标会打开一个悬浮提示,显示一系列 listener。

每个 listener 的类型在这个悬浮提示的标题中显示。下一行显示它是监听 起泡/bubble 还是 捕捉/capture 阶段。如果 listener 是以 addEventListener 注册,或者以 ‘on‘-event-type 定义,它的类型就是 ‘event target listener‘。如果是以标记属性的形式定义就是 ‘attribute listener‘。在其类型上悬停鼠标,会在工具提示中显示对应的 listener 的函数源代码。

在这个工具提示中可以直接设置断点。点击函数源代码工具提示的标题会切换到 脚本 标签页并在源文件中高亮显示对应函数。

每个 listener 悬浮提示的最后一行表明此 listener 在哪里注册。和刚才提到的类似,点击这行会切换到 脚本 标签页并在源文件中高亮显示对应代码。

为了补充 文档 视图的查探功能,还新增了一个 listener 侧边面板,显示所有当前活动 listener 的概览,以事件类型排序。每个事件类型可以展开显示所有与此类型对应的节点。

该面板提供已注册的 event listener 的静态快照,但是考虑到 event listener 可以频繁地被程序添加、修改或者移除,所以 listener 面板还提供一个 更新/update 按钮来刷新此快照视图。

另外,新增的 event listener 所用的函数源代码悬浮工具提示也为其他 JavaScript 源代码视图所用。这便于回溯对应函数并在其中设置断点。
这些新特性对于使用 JavaScript 的开发者应该是相当有用的新玩意。请积极向 Dragonfly 团队反馈和提出建议

《设置 Opera Dragonfly 为离线版或实验版的方法》

[ Via Opera DragonflyOpera.IM 编译 ]

Opera Dragonfly 稳定版更新: profiler 从 beta 毕业

在 beta 阶段测试了好一段时间的 profiler 总算毕业,并入稳定版 Opera Dragonfly。

Profiler 可以记录一个网页上发生的所有事件,比如脚本编译和重排。停止记录时,这些事件就会以时间线形式呈现,从中你可以得知每个事件的耗时。

鼠标悬停于时间线中某个事件上会显示更多信息,部分事件可以点击。目前暂时只有样式重算事件可以点击,并以表格显示样式选择器匹配事件的详情。

未来发布的 Dragonfly profiler 将有分析 JavaScript 的能力。

另外,如图所示,现在当 Dragonfly 的标签页空间狭窄时各个标签会相应变小。现在还允许关掉不需要的调试服务使网络查探器的计时结果更准确,此效果在远程调试中将尤为显著。

《设置 Opera Dragonfly 为离线版或实验版的方法》

[ Via Opera DragonflyOpera.IM 编译 ]

Opera Dragonfly 实验版更新: 资源查探器分类树状视图

Opera Dragonfly 实验版对资源查探器有大量改进和调整。这次更新的主要目标是使资源视图显得更自然和重点明确。

现在各种资源不再以平铺直叙且单调的列表显示,而是由结构化的树状图组织起来,显示文档、子文档和它们的各组资源例如标记、样式表、脚本、图片等等。

新的资源查探器右侧以单独的面板呈现资源预览视图,面板上方有内嵌查找框。

现在可以辨别更多资源。例如你可以预览网络字体,输入文本预览字体的效果。

资源预览视图中对编码、MIME 类型和推断类型有简短描述,并提供一个在新标签页打开资源的链接。

对资源查探器的改进仍未完工。已知问题:

  • 最后选择的标签状态没有被记住
  • 滚动条位置状态没有被记住
  • 不能用键盘在资源中导航
  • SVG 被同时辨别为图片和框架。

不管如何,这是改进资源查探器的第一步。接下来将允许从资源的树状结构中筛选,和一次过预览一整组的资源。你或许会注意到这次实验版更新对 Profiler 也有所改进。

《设置 Opera Dragonfly 为离线版或实验版的方法》

[ Via Opera DragonflyOpera.IM 编译 ]

Opera Dragonfly 稳定版更新: 加强网络记录器

不好意思,这篇更新拖了两个星期。不多说。以下是正文翻译。


之前的 Opera Dragonfly 实验版预告过的网络记录器改进,经过进一步打磨,现在已经整合进稳定分支了。以下是其新改进:

左侧的 URL 显示长度有所缩短。这应该可以让你更容易认出你要找的 URL。工具提示可以显示完整的 URL,同时以方便醒目的列表显示一连串 GET 参数。

网络请求流程现在由一组新设计的颜色组合来表示。URL 列表中各种资源类型由不同的颜色标记,这和以往一样,不过现在时间线还表明获取 URL 资源的时间开销。浏览器请求一个 URL 的过程被显示为由若干阶段组成的序列。这若干阶段分为时序安排(灰)、发送(绿)、等待(蓝)、接收(红)和处理(灰)。偶尔有请求必须重试或放弃,这些活动和相关的阶段通常显示为黄色。Dragonfly 团队在设计时试图部分继承目前已有的开发工具用户介面的传统,这样用户就不用为一个新上手的开发工具重新学习颜色标记的风格。

从以下这个例子,你可以见到为了完成对 photos_upload.php 的请求,浏览器花一定时间创建实际请求(红),等待着请求通过网络发送出去并在服务器端处理(蓝),然后花一点时间接收响应(绿)。

工具提示提供的视图显示更多关于加载的信息,对各阶段的每一步进行高解析度的分解与计时。

如果你并不特别关注请求的计时和次序的详情,可以切换到 数据/Data 视图,在这里会以表格方式呈现所有方法、状态、MIME 类型等等。点击顶部纵列标题即可使此表格分类显示,还可以筛选使之只显示特定类型的资源(比如脚本、图像或者 XHR)。也可以通过 + 点击 / Ctrl + 点击 选择多种类型的资源。你下次使用网络面板时 Opera Dragonfly 仍记得你之前的选择。

点击某个特定请求会显示和此请求相关的所有细节。此数据视图可以调整大小,并允许用光标键 快捷切换到另一请求。

另外,最新稳定版已经翻译成 33 种语言,如果你的旧有本土语言版本的 UI 有部分是英文,现在应该已经修复。

《设置 Opera Dragonfly 为离线版或实验版的方法》

[ Via Opera DragonflyOpera.IM 编译 ]

Opera 实验性桌面版带来新扩展 API: 截图、加载本地文件、更新内容拦截

昨晚 Opera 发布了一个实验性桌面版本,带来新的扩展 API:

  • 用于对网页进行截图的 Screenshot API
  • 使扩展易于加载本地资源的 Resource Loader API
  • 更新 URL Filter API

在这些实验性功能最终定型前,请尽量向 Opera 反馈相关问题和建议。

这些特性不会出现在 Opera 12 正式版中,而是在更晚的版本。

下载链接

Screenshot API

你可以在扩展中的注入式或背景脚本中调用 getScreenshot() 以使用 screenshot API 对网页进行截图。截图后可以在 <canvas> 中操作它或者储存在某处留待他用。

深入阅读:

Resource Loader API

扩展安全模型使扩展连包含在同一扩展包内的本地文件也不能加载,为了克服这个问题,就有了 resource loader API。resource loader API 的 getfile() 方法可用于获取文件内容,然后使用 W3C File API 读取这些内容。这招相当有用,你可以在扩展中加入不同的内容、图像甚至脚本和样式。

深入阅读:

URL Filter API

URL Filter API 允许你在 Opera 原生内容拦截功能的被拦截 URL 列表中新增或移除 URL。通过此 API 进行的这些更改是临时性的,只有浏览器会话处于活动并启用了相关扩展时有效。

此 API 自 Opera 11.10 起已经可以使用,现在此实验性版本对它加入了新特性:

  • 支持白名单 — 作为被拦截(黑名单)URL 的例外列表。基本语法:opera.extension.urlfilter.allow.add(pattern, options)
  • 仅限特定域名: block.add(pattern, {includeDomains: ["google.com", "google.co.uk", "google.com.au"])
  • 排除特定域名: block.add(pattern, {excludeDomains: ["google.com", "google.co.uk", "google.com.au"])
  • 允许在 URL 被拦截或允许(出现在白名单中)时触发事件。目前 Opera 不打算在没有任何匹配时也能触发事件,因为有拖累性能的可能。
  • 拦截第三方 URL(例如,仅当 facebook.com 被其他网站访问时拦截它): block.add(pattern, {thirdParty: true})
  • 根据资源类型进行拦截(脚本、图像、样式表等等.): block.add(pattern, {resources: urlfilter.RESOURCE_SCRIPT | urlfilter.RESOURCE_STYLESHEET)
  • 新 filter 语法:
    • 分隔通配符:^。例如,example.com^foo 会匹配 example.com/fooexample.com?foo
    • 域名匹配语法:||。例如,||example.com 会匹配所有域名为 example.com 的 URL。
  • (以上两条)新语法也可以用于 urlfilter.ini 文件。

深入阅读:

[ Via Dev.OperaOpera.IM 编译 ]

Opera Dragonfly 实验版整合样式 profiler

样式 profiler 功能在去年 11 月作为独立 Opera Dragonfly build 初次露面。现在样式 profiler 终于整合进实验版分支,放置在 Dragonfly 其他的标签和工具旁边。这个 profiler 版本仍然是上次亮相的单独版本,功能上没有新东西,只是并入了实验版。现在 Dragonfly 团队在折腾更多特性,例如可放大查看的时间线。

切换到 Profiler 标签时,Opera Dragonfly 会要求重载页面。为了尽可能获得最准确的数据、不夹杂由 Opera Dragonfly 平时运行的其他调试服务产生的开销,重载是必要的。Opera Dragonfly 开启时,它会启动几个用于调试目的的服务。其中之一是 ECMAScript 调试器服务,这个服务会禁用 JIT。禁用该服务,使 JIT 得以保留,profiler 的分析数据将会准确得多。

本次发布的版本还包含之前提及过的查探 JavaScript 返回值的功能。

《设置 Opera Dragonfly 为离线版或实验版的方法》

[ Via Opera DragonflyOpera.IM 编译 ]