Question

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

到目前为止，当我找到我正在寻找的内容，更改代码并重新加载页面时，Elements面板中的DOM树将被折叠起来。

有没有办法，A）让Inspector记住我在哪里并尝试将DOM树打开到我所在的地方，或者B）默认情况下展开DOM树？

Answer 1

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

我导航到Chrome Application Data文件夹： C：\ Documents and Settings \ [USERNAME] \ Local Settings \ Application Data \ Google \ Chrome \ Application [最新版本] \ Resources \ Inspector

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

关闭浏览器。

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

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

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

Answer 2

在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;（您可以通过点击/然后输入搜索字词并按Enter键，然后按n进行下一场比赛，在grep中执行此操作。）

在第1175行，我发现：

this.expanded = false;

并将其更改为：

this.expanded = true;

它在下面：

function TreeOutline(listNode)
{

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

Safari v5.1.7（6534.57.2），OSX 10.6.8

Answer 3

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

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

Answer 4

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

为元素提供一个ID。

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

打开Web检查器
选择“元素”标签
搜索ID
单击结果以打开样式

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

如何在Webkit Inspector中打开“Elements”（DOM）树？

4 个答案: