How do I keep the "Elements" (DOM) tree open in the Webkit Inspector?

In the Webkit Inspector, I can go to the elements panel and开发者_Go百科 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?

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.

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

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.

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.