4

我一直在尝试将突出显示功能添加到 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 代表什么？他们可以将显示元素映射到页面中的目标元素吗？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] voidVenkman 中。这个评估命令是隐藏的还是私有的，还是没有初始化？

4

2 回答 2

6

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

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

inspect unique-selector

我们打算在即将发布的 Firefox 开发者工具版本中让 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/

于 2013-06-27T15:35:39.837 回答
2

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

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

此链接用于 firebug 的插件，下载并安装几乎 2 MB 的插件，然后您将享受调试的乐趣.. :)

编辑：调试器中的选择器

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

Web Console Method

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

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

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

请参阅上面的链接以获取更多详细信息..

如果本机控制台不可用，请参阅此链接，这表示，

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

firefox.exe -console

这样就可以使 Firefox 以控制台启动..

编辑：日志要记录测试的元素>>请参考该链接中的参考 pprint() ，它也将以相同的方式运行。

还有Console API参考console.log

我希望这个能帮上忙..

于 2013-06-27T09:00:56.437 回答