6

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

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

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

4

4 回答 4

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，检查器中的所有元素都默认展开。

于 2011-03-17T15:58:12.167 回答
1

With the help of this article I managed to get this to work with OSX Safari.

Open up the inspector, find an element (any will do) then right click and "Inspect Element". You'll need to pop this out (bottom left button) and then make a note of the path in the title bar. Mine is

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

Then, I used vi in the terminal:

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

You need sudo as it's a read-only file for most users.

Then I did a search for this.expanded = false; (you can do this in grep by hitting a / and then typing the search term and pressing enter, then n for the next match.)

On line 1175 I found:

this.expanded = false;

and changed it to:

this.expanded = true;

it's underneath:

function TreeOutline(listNode)
{

Saved the file (ZZ in vi) and restarted the browser. Now elements stay expanded. YMMV.

Safari v5.1.7 (6534.57.2), OSX 10.6.8

于 2012-10-03T14:40:03.487 回答
0

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

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

于 2011-01-23T11:54:54.007 回答
0

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

给元素一个 ID。

 <div id="inspectMe" className={classes.answerGroup}>
  • 打开网络检查器
  • 选择元素选项卡
  • 搜索身份证
  • 单击结果以打开样式

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

于 2020-05-04T22:54:50.393 回答