Question

我一直在尝试将突出显示功能添加到Firefox DevTools调试器中，因此它将突出显示该元素，而不是仅显示[HTMLAnchorElement]或类似内容。我知道这是可能的，因为你可以将someElement.style.border='1px solid blue'或类似物设置为手表，并且它可以增加元素。那么为什么不让它存储当前边框，并使用element.style.border='1px solid blue'在鼠标悬停时显示它，并在mouseout上恢复它？ Cannot inspect where the document of these elements in the watch expressions are.

在Firefox devtools中进行调试时，我注意到右侧监视面板中的元素具有变量名称的行，实际上给出了奇怪的ID，如“46439”，在父元素下有“document.getelementsbytagname（'a'）36 “ 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对手表所做的那样。不幸的是，当我在断点处停止时，我会运行此代码，并且DebuggerView.StackFrames.evaluate在Venkman中为[void] void。这个评估命令是以某种方式隐藏还是私有，还是未初始化？

Answer 1

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

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

inspect unique-selector

我们打算在即将推出的Firefox Developer Tools版本中随处可见DOM对象。

编辑 - 此功能已登陆，现在可以在变量视图和控制台中使用。于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/

Answer 2

我认为你在内置调试器上付出了太多努力，

调试javascript你必须使用fireBug它的最佳工具，

This Link是萤火虫的插件，下载并安装附件，它几乎不是2 MB然后你会喜欢调试.. :)

编辑：调试器中的选择器

我正在寻找你的具体问题的答案，并找到了这个

Web Console Method

现在，您可以调试，获取元素并获取选择器详细信息。（参考基本用法）

您可以直接访问页面上定义的变量：

> $ function(selector, context){
   return new jQuery.fn.init(selector,context);
}

请参阅以上链接了解更多详情..

如果本机控制台不可用，请参阅此link，这就是

在Microsoft Windows下，您还需要通过以下命令启动Firefox以获得本机控制台：

firefox.exe -console

这样可以让firefox以控制台启动..

编辑：记录要记录测试的元素＆gt;＆gt;参考this link参考pprint（）也会以相同的方式表现。

Console API也提到了console.log

我希望这会有所帮助..

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

2 个答案: