如何获得Firefox调试器手表的目标元素？

Question

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

在Firefox devtools中进行调试时,我注意到右侧监视面板中的元素包含带有变量名称的行,这些行实际上给出了奇怪的ID,如"46439",在父元素下有"document.getelementsbytagname('a')36"id.这些ID表示什么？他们可以将显示元素映射到页面中的目标元素吗？我试图window.DebuggerView.WatchExpressions.getItemForElement从Venkman但它返回null.是否有来自此源文件的另一个函数将给调试器监视的目标元素？

理想情况下,我应该能够document.getElementsByTagName('a')在调试上下文中"监视"诸如或本地变量之类的项目,并突出显示页面中的项目,如Chromium/Firebug.但我不确定如何从Firefox扩展中添加此功能.

更新:

在进一步的工作之后,似乎可以DebuggerView.StackFrames.evaluate在断点处停止时使用运行代码,就像chrome://browser/content/devtools/debugger-controller.js使用手表一样.不幸的是,当在一个断点运行此代码停止,并且DebuggerView.StackFrames.evaluate是[void] void在的Venkman.这个评估命令是以某种方式隐藏还是私有,还是未初始化？

Answer 1

你还不能直接使用Debugger中的荧光笔.我们打开了一个错误(https://bugzilla.mozilla.org/show_bug.cgi?id=653545),使我们的其他工具更加普遍地使用荧光笔.

如果您有唯一的选择器,则可以使用命令行(Shift-F2打开开发人员工具栏)通过以下方式检查元素:

inspect unique-selector

我们打算在即将推出的Firefox开发者工具版本中随处可见DOM对象.

编辑 - 此功能已登陆,现在可以在变量视图和控制台中使用.在Firefox 30中于2014年3月登陆.

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