如何保留“元素”? (DOM) 树在 Webkit Inspector 中打开?
在 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
我也有同样的问题。我在 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.
在这篇文章的帮助下,我成功地得到了这可以与 OSX Safari 一起使用。
打开检查器,找到一个元素(任何元素都可以),然后右键单击并“检查元素”。您需要将其弹出(左下角按钮),然后记下标题栏中的路径。我的是
然后,我在终端中使用了 vi:
您需要 sudo,因为它对大多数用户来说是只读文件。
然后我搜索了
this.expanded = false;
(您可以通过点击/
在 grep 中执行此操作,然后输入搜索词并按 Enter,然后n
表示下一场比赛。)在第 1175 行我发现:
并将其更改为:
它在下面:
保存文件(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
Then, I used vi in the terminal:
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, thenn
for the next match.)On line 1175 I found:
and changed it to:
it's underneath:
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
您需要在 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.
我不想玩弄内部结构,所以找到了一个解决方法。
给元素一个 ID。
Web 检查器会记住搜索词,因此只需在重新加载后再次点击搜索即可。
I did not want to play around with internals so found a workaround.
Give the element an ID.
Web Inspector remembers the search term, so just need to hit search again after reload.