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

【问题标题】：How do I get Firefox debugger watch's target element?如何获取 Firefox 调试器监视的目标元素？
【发布时间】：2023-03-24 03:28:01
【问题描述】：

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

在 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。这个评估命令是隐藏的还是私有的，还是没有初始化？

【问题讨论】：

你检查过 Firefox 25 (Firefox Nightly) 中的开发工具，这可能包含你想要的东西。我还强烈建议您使用 FireBug，因为它有很多有用的功能，也是您正在寻找的功能。
@TimVisee 谢谢，但我什至无法像上面截图中那样在 Nightly 中添加手表。您是说 robcee 答案中的荧光笔 api 可用，还是即将在 25 年可用？
@TimVisee 在即将发布的 Firefox 25 中该功能在哪里？
如果你愿意，你可以使用 alpha 版本，你应该试试 Firefox Nightly。确保你知道这个版本可能有点不稳定，我个人将它用作我的主要浏览器，但我没有太多问题。无论如何，您可以在此页面上找到下载：nightly.mozilla.org。一旦你下载并启动了 Nightly（你不能同时启动 nightly 和 firefox！），你必须使用 firefox 菜单，然后你会看到一个包含许多功能的开发者菜单。希望这会有所帮助！
我最近使用 Nightly 时没有看到检查对象的元素突出显示。你如何激活它？

标签： javascript debugging firefox-addon watch firefox-developer-tools

【解决方案1】：

我认为你在内置调试器上投入了太多精力，

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

This Link 是 firebug 的插件，下载并安装插件，它几乎只有 2 MB，然后您将享受调试的乐趣.. :)

编辑：调试器中的选择器

我正在寻找您的具体问题的答案，发现了这个

Web Console Method

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

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

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

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

如果本机控制台不可用，请参考此link，这表示，

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

firefox.exe -console

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

编辑：日志要记录测试的元素>> 在该引用 pprint() 中引用 this link，它也将以相同的方式运行。

还有Console API有参考console.log

我希望这会有所帮助..

【讨论】：

谢谢，但我使用 Firebug 多年，最近它变得非常缓慢，并且完全冻结了浏览器。我想使用 Firefox 工具，考虑到内置的 DevTools 目前正在积极开发中，并且检查器工具在许多方面已经优于 Firebug/Chrome，而且它不像 Firebug 那样笨重（Go到脚本面板，看到它尚未启用，转到下拉菜单并单击启用，例如必须刷新页面才能使用它。
在这种情况下检查日志的选项，并清除日志..这将解决冻结问题..，否则 Firebug Firebug Lite 你还有一个选项也可以使用它.. :) 并启用所有功能，只需单击右上角带有萤火虫图标（在 Firefox 中）的向下箭头，然后启用所有启用所有功能 :)
Firebug Lite 甚至没有 js 调试。即使 Firebug 有效，（我用 22 再次尝试，它似乎可能更快）这不是这个问题的完整解决方案。例如，Firebug 显然不支持远程调试，并且 Firefox 检查器在某些方面比 Firebug 检查器更好。
如果在这种情况下我安装了带有开发人员扩展（附加组件）的 chrome 并且它对很多事情都有帮助，我对您的要求不感到困惑，因为问题是解释 CSS 问题，我们正在讨论 JS 调试器 :)
谢谢你，这也是一个有用的插件，但我认为你不理解最初的问题 - 关于检查 within Firefox 的调试器。我想这不是很清楚，为了清楚起见，我添加了一个屏幕截图。

【解决方案2】：

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

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

inspect unique-selector

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

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

【讨论】：

感谢您的链接。不幸的是，它没有指定目标版本——Firefox 25？ 26？ 27？我们目前可以使用任何对象来访问调试器监视指向的元素吗？这是使我大部分时间无法使用内置调试器的一项主要功能。
显然unique-selector 必须是 jquery 样式的选择器，而不是实际的变量，而且它似乎仅限于一个元素。
在该功能完成之前，有什么方法可以在检查器/调试器的列表中获取对监视元素的引用，如我上面的屏幕截图所示？
此功能已登陆，现在可在变量视图和控制台中使用。于 2014 年 3 月登陆 Firefox 30。hacks.mozilla.org/2014/03/…
你能更新你的答案，以便我可以标记这是解决方案吗？