如何在 Webkit Inspector 中保持“元素”(DOM) 树处于打开状态？答案

【问题标题】：How do I keep the "Elements" (DOM) tree open in the Webkit Inspector?如何在 Webkit Inspector 中保持“元素”(DOM) 树处于打开状态？
【发布时间】：2011-05-10 13:12:28
【问题描述】：

在 Webkit Inspector 中，我可以转到元素面板并展开 DOM 元素，以便查看我感兴趣的内容。

到目前为止，当我找到我要查找的内容、更改代码并重新加载页面时，“元素”面板中的 DOM 树被折叠起来。

有什么方法可以做到，A) 让 Inspector 记住我的位置并尝试打开 DOM 树到我所在的位置，或者 B) 保持 DOM 树默认展开？

【问题讨论】：

标签： debugging webkit inspector

【解决方案1】：

我不想玩内部结构，所以找到了解决方法。

给元素一个 ID。

 <div id="inspectMe" className={classes.answerGroup}>

打开网页检查器
选择元素选项卡
搜索ID
点击结果打开样式

Web Inspector 会记住搜索词，因此只需在重新加载后再次点击搜索即可。

【讨论】：

【解决方案2】：

我也有同样的问题。我在 Win XP 上使用 Chrome，所以我只能告诉你我为 Chrome 找到的解决方案，但我想其他 Webkit 浏览器的过程非常相似。

我导航到 Chrome 应用程序数据文件夹： C:\Documents and Settings\[USERNAME]\Local Settings\Application Data\Google\Chrome\Application[NEWEST VERSION]\Resources\Inspector

显然，用您计算机上的文件夹填写 [USERNAME] 和 [NEWEST VERSION]。

关闭浏览器。

我在 Notepad++ 中打开 DevTools.js 并开始搜索。事实证明，当你点击小箭头时，webkit 检查器会在标签上添加一个“扩展”的 css 属性。

在第 1484 行有一个布尔值作为默认值。我只是改变了 this.expanded=false 到 this.expanded=true

启动 Chrome 和 badda-bing，检查器中的所有元素都默认展开。

【讨论】：

添加您更改的实际行会更有帮助。
这只是一个完整的 hack - 最好将其作为新功能请求向 Chrome 团队提出，以便将其作为正式选项添加

【解决方案3】：

在this article 的帮助下，我设法让它与 OSX Safari 一起工作。

打开检查器，找到一个元素（任何都可以）然后右键单击并“检查元素”。您需要将其弹出（左下角按钮），然后在标题栏中记下路径。我的是

/System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Resources/inspector/inspector.js

然后，我在终端中使用了 vi：

sudo vi /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Resources/inspector/inspector.js

您需要 sudo，因为它对大多数用户来说是只读文件。

然后我搜索了this.expanded = false;（您可以在 grep 中通过点击 / 然后输入搜索词并按 Enter，然后按 n 进行下一个匹配。）

在第 1175 行我发现：

this.expanded = false;

并将其更改为：

this.expanded = true;

它在下面：

function TreeOutline(listNode)
{

保存文件（vi 中的ZZ）并重新启动浏览器。现在元素保持扩展。 YMMV。

Safari v5.1.7 (6534.57.2)，OSX 10.6.8

【讨论】：

【解决方案4】：

您需要在 Webkit Inspector 中选择 DOM 元素，而不是通过右键单击“检查元素”上下文项将其突出显示。

如果在 Inspector 中编辑内容，请确保重新选择 DOM 元素本身；与它的文本内容相反，否则 DOM 元素会自行折叠起来。

【讨论】：

对我不起作用。 'highlighted' 和 'selected' 之间的区别也不清楚。