问题
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?
回答1:
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.
回答2:
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
回答3:
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.
来源：https://stackoverflow.com/questions/4189949/how-do-i-keep-the-elements-dom-tree-open-in-the-webkit-inspector