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 Dragonfly – Opera.IM 编译 ]