Opera Dragonfly: 可缩放的 profiler 时间线

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

profiler 迷你时间线和主时间线

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

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

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

[ Via Opera DragonflyOpera.IM 编译 ]

xvideos

使用 Opera Mobile 模拟器进行响应式设计和开发

移动 Web 普及速度很快, 受限于工具和屏幕尺寸, Mobile Web 的前端调试显得异常困难, 开发们渴望一个好用的调试环境, 而 Opera Mobile 模拟器正是这么一个工具, 为了解决移动 Web 调试而诞生的工具.

这是一篇译文, 本文将会介绍 Opera Mobile 模拟器的作用, 来历, 特性及其使用方法, 还会提到一些有价值的用法和需要注意的地方.

Opera Mobile 模拟器概要

早在 2009 年, 我参与 Opera Mobile 10 开发的时候, Opera 的同事决定调整 Opera Mobile 编译机, 以便生成的程序不仅可以运行在普通的移动设备, 还可以运行在 Windows 和 Linux 上. 最初是为了保证质量和提供测试环境, 而且这些桌面程序也被证实对 Web 开发有用; 令桌面运行的 Opera Mobile 取代一个手机上的所有测试成为可能, 仅需 Alt+Tab 或者 Command + Tab 即可呼出 Opera Mobile 的调试窗口, 这是多么地令人激动!

所以, 我们决定打通所有平台, 添加了对 Mac 的支持, 并且将它公开成为开发者工具, 称为 Opera Mobile 模拟器. 做成相当小的尺寸, Opera Mobile 模拟器可以在 Opera 开发者网站或者Mac 应用市场免费下载, 而且安装起来相当简单. 模拟器的处理引擎和 UI 与手机上的 Opera Mobile 是一模一样的, 与此同时可以配合桌面上如配置面板, 键盘快捷键和命令行等操作进行额外的调试.

Opera Mobile 模拟器配置面板和模拟浏览器

本文中, 我们来看看如何使用 Opera Mobile 模拟器来创建响应式设计, 另外我们还会讨论一些相关的奇特配置.

基本使用

打开模拟器, 你首先看到的是配置面板. 使用左侧的配置, 你可以开启不止一个具有某些设备特征的的 Opera Mobile 浏览器. 比如, 选择 “HTC Desire” 配置可以打开一个分辨率为 WVGA (480×800), 纵向放置和放大到 150% 的 Opera Mobile 浏览器, 跟 HTC Desire 真机上的显示无异. 如果你再选择一个配置, 将会产生另一个相匹配的独立存在的 Opera Mobile 模拟浏览器.

Opera Mobile 模拟器配置面板

可以在地址栏输入 URL 来加载网页 (这他妈不是废话吗!), 也可以通过拖拽文件或者 URL 至浏览器窗口来实现. 内页导航也同样的简单: 点击事件匹配成轻巧, 你可以在触控板上使用两指手势触来放大和缩小页面 (译者没有 Mac, 求网友测试). 如果你的设备不支持多点触控板, 可以通过使用 Ctrl 配合鼠标滚轮, 或者点击浏览器中滚动页面时出现的悬浮按钮 +- 来缩放页面. (译者补充: 很多移动版网页已经禁止用户放大缩小页面, 这种场合无论是触控板还是缩放按钮都不可用.)

你可能留意到 Opera Mobile 模拟浏览器是可以调整窗口尺寸的, 随之加载的网页布局也会相应改变. 这是理所当然的, 浏览器是一个全屏应用, 不同设备上的体验也不相同, 当你需要在各种分辨率中测试的控制视窗的 meta 标签或各种情况下加载的 CSS 时, 该功能非常方便. 事实上, 通过调整 Opera Mobile 模拟浏览器的尺寸来测试不同的布局, 比在桌面浏览器中做同样的事情感觉更加真实, 因为后者不会触发针对视窗的设置, 因为可能忽略掉一些与视窗相关的 bug.

Opera Mobile 模拟器中的浏览器方向

这里值得一提的, 在 Opera Mobile 模拟器中的设备宽度不是电脑屏幕的宽度, 那是正在运行的 Opera Mobile 模拟浏览器宽度. 另外, 如果你只关心设备横放和纵放时的效果. 你可以通过 Alt+R 或者 Option+R 快捷操作, 或者点击状态栏右下方的 Rotate screen 按钮切换方向.

当然, 每一个人的工作方式都不一样, 我在这里是为了协助你提高工作效率, 而不是命令你. 显然的, 没有什么能比真机上的测试更加靠谱, 但因为在移动设备中你可以确切地感受到网站的表现, 如设备上性能有限的 CPU 等. 然而, 真机测试太繁琐了, 所以在我的项目进入内测版本之前不会使用真机测试, 当项目刚启动时, 我更倾向于快速的 (1) 开发, (2) Opera Mobile 模拟器测试, (3) 调试迭代.

高级启动选项

在配置面板的右侧, 你会看到很多配置选项.

在 “分辨率” 下拉列表中有一些常见的屏幕尺寸和方向拱你选择, 你也可以添加自定义的选项. “像数密度” 下拉列表是一些 PPI 值的列表: 在 HTC Desire 上, PPI 是 252, 那么开启的模拟浏览器是默认 150% 的窗口比例和 1.5 倍的设备像素比. 假设选择了另一个 PPI 值的, 285, 那么是 200% 的窗口比例和相当于 2 倍的设备像素比. (这段太专业了, 译者表示压力很大, 可能翻译的不准确, 希望指点和更正, 原文如下:)

for the HTC Desire, this is 252, which will result in a 150% default zoom and a devicePixelRatio of 1.5 when launched. Selecting a PPI of, for example, 285, on the other hand, will result in a zoom level of 200% and a corresponding devicePixelRatio of 2.

简而言之, “分辨率” 和 “像数密度” 可以组合出不一样的配置和模拟浏览器视窗的展示效果, 以及确定哪些 CSS 会被应用.

最后, “User Agent 字符串” 下拉列表中允许你选择在几种访问模式中选择模拟浏览器对应的外观和 UA:

Touch

选择该项将以针对触屏手机优化过的 UI 来加载 Opera Mobile, 并且浏览器 UA 是 Opera Mobi.

Keypad

选择该项将以针对非触屏手机优化过的 UI 来加载 Opera Mobile, 为方便开发者, 鼠标点击, 平移和缩放手势仍可以在这里使用. UA 也是 Opera Mobi.

Tablet

选择该项将以平板化的 UI 来加载 Opera Mobile. 对应的 UA 是 Opera Tablet.

MeeGo (因为新版本支持 MeeGo, 这是译者加上的.)

选择该项将以 MeeGo (诺基亚 N9 用的是这个) 的方式来加载 Opera Mobile, 而 UA 是 Opera Mobi.

不同尺寸的 Opera Mobile 模拟浏览器

带参数启动

在配置面板的最后一个选项是 “参数” 输入框, 这应该是这批配置选项中最强大的. 你可以在这里填入大量参数或者标记, 这些参数或标记将用于加载一个新的 Opera Mobile 模拟浏览器. 比如: 使用 -displaysize 320x480 -url www.opera.com 会加载一个窗口大小为 320×480 像素的 Opera Mobile, 并且打开页面 www.opera.com.

这些标记也可以在命令行中使用. 默认的情况下, Opera Mobile 模拟器可在下列目录中执行:

Mac

/Applications/Opera Mobile Emulator.app/Contents/Resources/Opera Mobile.app/Contents/MacOS/

Windows

C:\Program Files\Opera Mobile Emulator\

Linux

/usr/bin/

重复通过命令行做一遍我们刚才的例子操作如下:

Mac

./Opera\ Mobile -displaysize 320x480 -url www.opera.com

Windows

OperaMobileEmu.exe -displaysize 320x480 -url www.opera.com

Linux

operamobile -displaysize 320x480 -url www.opera.com

这里有 -displayzoom-monitorppi 两个参数用来调试页面非常便利:

-displayzoom

你可以用这个参数来缩小 Opera Mobile 模拟浏览器在桌面上的尺寸, 在此同时可以保留其宽度值, 高度值和设备像素比等. 换句话说, 如果你试用一下三星 Galaxy Note 的配置, 会获得一个 800×1280 的浏览器, 那你可以通过 -displayzoom 50 将它等比缩放成 400×640 大小, 对一个 900 像素高的显示屏来说这样的效果更好, 例如一台 MacBook Air.

-monitorppi

(丫的, 又是 PPI, 译者不懂, 不翻译了, 读者自己看看下面的原文吧, 知道 PPI 能看懂的请帮忙翻译一下.)

This, on the other hand, allows you to set the PPI of your computer monitor (for example, -monitorppi 128 for a 13-inch MacBook Air) and launch an Opera Mobile instance with a zoom factor adjusted to match the physical dimensions of the profiled phone’s screen. This will give you a better idea of how big, say, the clickable areas really will be when the page loads on an actual device, but remember that the PPI you get on the screen won’t be representative of what you’ll see on the device.

注意 -displayzoom-monitorppi 是互相排斥的,因此不能被一起使用.

如果要查看所有可用参数, 请点击配置面板的 “帮助” 按钮, 或者在命令行中执行 --help 查看.

浏览器中设置

记住一件事情, 在 Opera Mobile 模拟浏览器中就算都是使用 Android 配置, UA 也可以有所不同. 你可以在打开 Opera Mobile 模拟浏览器后再去修改 UA, 点击红色的大 “O” 并打开 “设置 > 高级 > 浏览器”, 你可以在 5 个选项中选择一个, 包括 “Android”. 如果你需要设置完整的 UA, 从地址栏打开 opera:config 并搜索 “Custom User-Agent”, 你可以将自定义的 UA 在此输入, 这里的配置将覆盖掉其他任何地方设置的 UA.

值得强调的其他设置选项有清除 cookie, 缓存和本地分享相关功能, 可以在 “设置 > 隐私” 镇南关找到. 另一个值得推荐的是禁止浏览器键盘的切换按钮, 可以在 “设置 > 高级 > Opera 键盘” 中找到.

连接到 Opera Dragonfly 进行深度调试

在任何 Web 项目中, 有一个原则是你绝对要看看浏览器内部究竟做了什么事情. 这就是为什么 Opera Mobile 模拟器要与 Opera 的内建 Web 调试工具, Opera Dragonfly 通信.

Opera Mobile 调试工具 - Opera Dragonfly

你可以容易地将这套调试环境搭建起来:

  1. 下载 Opera, 并在桌面环境安装好.
  2. 在桌面版 Opera 上打开一个页面, 右击页面的任何地方, 点击 “Inspect Element” 打开 Opera Dragonfly. (译者提醒: Ctrl+Shift+I 可快捷打开.)
  3. 在 Opera Dragonfly 中, 点击右上方的 “Remote debug configuration” 按钮, 保持默认配置点击 “Apply”.
  4. 然后, 打开 Opera Mobile 模拟器并加载一个模拟浏览器.
  5. 在 Opera Mobile 模拟浏览器中打开 opera:debug, 保持默认配置点击 “连接”.
  6. 现在已经连接成功, 你可以在 Opera Mobile 中加载任何想研究的页面. 在切换浏览器标签时请确保调试环境选择正确. (可在 Opera Dragonfly 右上方第四个按钮中选择.)

在 Opera Dragonfly 下的 “Network > Network log”, 你可以检查请求的资源文件是否正常被加载, 以及样式中是否引用了不必要的图片文件. 如果没有异常, 在 Opera Mobile 浏览器窗口打开页面的同时, 你应该可以在调试窗口看到朝下生成的瀑布图.

另外值得一提的功能是 “Network > Network” 的选项. 那里有一个选择框可以令所有缓存失效 (这是你在测试的时候想要的). 那里还有一个选项可以设置和重写掉全部的文件头信息, 当你依赖浏览器嗅探时使用这个选项非常方便 (小心!), 或者通过特定的头信息来优化网站内容时, 你不必打开多个浏览器就能测试各种变量的效果.

对于其他 Opera Dragonfly 的功能, 包括哪些关于 DOM, CSS 和 JavaScript 检测, 获取颜色和使用命令行的使用, 建议到 Opera Dragonfly 文档去查阅.

这是一篇总结! 我希望你会喜欢这篇介绍如何通过 Opera Mobile 模拟器优化网站设计的文章. 自己去试试吧, 让我们知道你的想法和你想看到的改进.

译者的话

前两天我写了一篇文章《如何让开发者兼容你的浏览器》是为了回应浏览器厂商呼吁开发者们支持他们各自的浏览器, 但没有考虑到开发者的难处. 我本来是站在开发者角度说句话, 但带来了很多不一样的声音, 甚至有人认为我这是跟浏览器标准对着干. 我恰恰是希望厂商们不要只挂嘴边, 也为开发这做些事情. 罢了, 谁干谁知道…

文章中我提到 Opera Mobile Emulator, 因为没深入了解, 刚开始的时候我不知道可以用来调试. 将 Debug 环境搭起来后感觉十分好用, 性能比 Android 虚拟机要好很多, 也不比 XCode 调试 iPhone 效果差. 于是我想在团队内分享一下这个工具, 也花了点时间翻译了这个文章.

文章翻译自 《Developing Responsive Designs With Opera Mobile Emulator》, 原文出自 Opera 的测试工程师 Andreas.

由于文章写于两个月前, 最新版 Opera Mobile 模拟器的少部分功能在文中没有提及, 但不影响使用. 另外, 因为我不了解 PPI, 文中相关的两段文字我肯定没翻译好, 希望大家帮忙完善一下.

free hd porn

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 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 编译 ]