如何获取Firefox调试器手表的目标元素? [英] How do I get Firefox debugger watch's target element?

查看:136
本文介绍了如何获取Firefox调试器手表的目标元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I've been trying to add the highlighting feature to the Firefox DevTools debugger, so it will highlight the element instead of only showing [HTMLAnchorElement] or similar. I know it's possible, since you can set someElement.style.border='1px solid blue' or similar as a watch, and it hightlights the element. So why not let it store current border, and show it on mouseover using element.style.border='1px solid blue', and restore it on mouseout?

在Firefox devtools中进行调试时,我注意到正确的监视面板中的元素具有变量名称的行,实际上这些行具有像46439这样的奇怪的id,在父元素下面带有document.getelementsbytagname ('a')36id。这些ids意味着什么?他们可以将显示元素映射到页面中的目标元素吗?我从Venkman尝试了 window.DebuggerView.WatchExpressions.getItemForElement ,但它返回null。 此源文件是否有其他功能这将给调试器的目标元素进行观察?

While debugging in Firefox devtools, I noticed the element in the right watch panel has rows with the variable names, which are actually given odd ids like "46439", under parent element with "document.getelementsbytagname('a')36" id. What do these ids signify? Can they map a display element to its target element in the page? I tried window.DebuggerView.WatchExpressions.getItemForElement from Venkman but it returns null. Is there another function from this source file that will give the target element of debugger watch?

理想情况下,我应该能够看诸如文档的项目。 getElementsByTagName('a')或调试上下文中的局部变量,并突出显示页面中的项目,如Chromium / Firebug。然而,我不知道如何从Firefox扩展程序添加此功能。

Ideally, I should be able to 'watch' items such as document.getElementsByTagName('a'), or local variable in the debug context, and highlight the items in the page like Chromium/Firebug. Yet I'm not sure how to add this feature from a Firefox extension.

更新

进一步的工作后,似乎可以使用 DebuggerView.StackFrames.evaluate 在断点处停止运行代码,就像什么 chrome://browser/content/devtools/debugger-controller.js 正在使用手表。不幸的是,当我在一个断点处停止运行这个代码,而$ code> DebuggerView.StackFrames.evaluate 是Venkman中的 [void] void 。这个评估命令是隐藏的还是私有的,还是没有初始化?

After further work, it would seem to be possible to use the DebuggerView.StackFrames.evaluate to run code while stopped at a breakpoint, like what chrome://browser/content/devtools/debugger-controller.js is doing with watches. Unfortunately when stopped at a breakpoint I run this code, and DebuggerView.StackFrames.evaluate is [void] void in Venkman. Is this evaluate command hidden or private somehow, or not initialized?

推荐答案

你不能真正使用调试器的荧光笔然而。我们打开错误( https://bugzilla.mozilla.org/show_bug.cgi? id = 653545 ),以使荧光笔更普遍地可用于我们的其他工具。

You can't really use the highlighter from the Debugger directly yet. We have a bug open (https://bugzilla.mozilla.org/show_bug.cgi?id=653545) to make the highlighter more generally-available to our other tools.

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

If you have a unique selector, you can use the command line (Shift-F2 to open the Developer Toolbar) to inspect an element via:

inspect unique-selector

我们打算在即将发布的Firefox开发工具版本中使DOM对象无处不在。

We intend to make DOM objects highlightable everywhere in upcoming versions of the Firefox Developer Tools.

编辑 - 此功能已着陆,现在可以从变量视图和控制台工作。 2014年3月在Firefox 30中登陆。

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

这篇关于如何获取Firefox调试器手表的目标元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆