javascript - 如何获取 Firefox 调试器监视的目标元素？

Question

我一直在尝试将突出显示功能添加到 Firefox DevTools 调试器，因此它会突出显示元素，而不是仅显示 [HTMLAnchorElement] 或类似内容。我知道这是可能的，因为您可以设置 someElement.style.border='1px solid blue' 或类似 watch ，它会突出显示元素。那么为什么不让它存储当前边框，并在鼠标悬停时使用 element.style.border='1px solid blue' 显示它，并在鼠标移出时恢复它呢？

在 Firefox devtools 中调试时，我注意到右侧监视面板中的元素有带有变量名称的行，实际上在带有“document.getelementsbytagname('a')36”的父元素下给出了奇怪的 ID，如“46439” “ID。这些 id 表示什么？他们能否将显示元素映射到页面中的目标元素？我尝试了 Venkman 的 window.DebuggerView.WatchExpressions.getItemForElement 但它返回 null。 this source file 是否还有其他功能？这将给出调试器监视的目标元素？

理想情况下，我应该能够“观察”项目，例如 document.getElementsByTagName('a')，或调试上下文中的局部变量，并在页面中突出显示项目，例如 Chromium/ Firebug 。但我不确定如何从 Firefox 扩展中添加此功能。

更新:

经过进一步的工作，似乎可以使用 DebuggerView.StackFrames.evaluate 在断点处停止时运行代码，例如 chrome://browser/content/devtools/debugger-controller.js 正在处理 watch 。不幸的是，当我在断点处停止运行此代码时，DebuggerView.StackFrames.evaluate 在 Venkman 中是 [void] void。此求值命令是否以某种方式隐藏或私有(private)，或者未初始化？

Answer 1

您还不能真正直接使用调试器中的荧光笔。我们有一个 Unresolved 错误 (https://bugzilla.mozilla.org/show_bug.cgi?id=653545) 以使荧光笔更普遍地适用于我们的其他工具。

如果您有一个独特的选择器，您可以使用命令行(Shift-F2 打开开发者工具栏)通过以下方式检查元素:

inspect unique-selector

我们打算在即将推出的 Firefox 开发者工具版本中使 DOM 对象在任何地方都可以突出显示。

编辑 - 此功能已登陆，现在可以在变量 View 和控制台中使用。 2014 年 3 月登陆 Firefox 30。

https://hacks.mozilla.org/2014/03/box-model-highlighter-web-console-improvements-firefox-os-hud-more-firefox-developer-tools-episode-30/