如何保留“元素”? (DOM) 树在 Webkit Inspector 中打开?

发布于 2024-10-02 19:15:06 字数 203 浏览 5 评论 0原文

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

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

有没有办法,A)让 Inspector 记住我在哪里,并尝试将 DOM 树打开到我所在的位置,或者 B)保持 DOM 树默认展开?

In the Webkit Inspector, I can go to the elements panel and unfold the DOM elements so I can see what I'm interested in.

So far, when I find what I'm looking for, change code, and reload the page, the DOM tree in the Elements panel is folded back up.

Is there any way to either, A) Get the Inspector to remember where I was and try to open the DOM tree to where I was, or B) Keep the DOM tree unfolded by default?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

谜泪 2024-10-09 19:15:06

我也有同样的问题。我在 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 检查器会在标签上添加“expanded”的 css 属性。

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

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

I had this same question. I'm using Chrome on Win XP so I can only tell you the solution I found for Chrome, but I imagine the process is very similar for other Webkit browsers.

I navigated to the Chrome Application Data folder:
C:\Documents and Settings\[USERNAME]\Local Settings\Application Data\Google\Chrome\Application[NEWEST VERSION]\Resources\Inspector

Obviously fill in [USERNAME] and [NEWEST VERSION] with the folders YOU have on your computer.

Closed the browser.

I opened DevTools.js in Notepad++ and started hunting. It turns out that the webkit inspector adds a css property of "expanded" on tags when you click on the little arrow.

On line 1484 There is a boolean for the default value. I simply changed
this.expanded=false to this.expanded=true

Fired up Chrome and badda-bing, all the elements in the inspector are expanded by default.

谷夏 2024-10-09 19:15:06

这篇文章的帮助下,我成功地得到了这可以与 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

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

回忆追雨的时光 2024-10-09 19:15:06

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

如果在检查器中编辑内容,请确保重新选择 DOM 元素本身;与它的文本内容相反,否则 DOM 元素将自行折叠起来。

You need to select the DOM element in Webkit Inspector, rather than just leaving it highlighted via the right click 'Inspect Element' contextual item.

If editing content in the Inspector, make sure you re-select the DOM element itself; As opposed to it's textual content, or the DOM element will fold itself back up.

爱情眠于流年 2024-10-09 19:15:06

我不想玩弄内部结构,所以找到了一个解决方法。

给元素一个 ID。

 <div id="inspectMe" className={classes.answerGroup}>
  • 打开 Web 检查器
  • 选择“元素”选项卡
  • 搜索 ID
  • 单击结果打开“样式”

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

I did not want to play around with internals so found a workaround.

Give the element an ID.

 <div id="inspectMe" className={classes.answerGroup}>
  • Open Web Inspector
  • Select the Elements Tab
  • Search for the ID
  • Click on the result to open the Styles

Web Inspector remembers the search term, so just need to hit search again after reload.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文