How do you expand all elements in the WebKit Inspector elements view?

Question

How do you expand all elements in the WebKit Inspector elements view?

45.2k views Asked by Jon Rose At 23 August 2013 at 19:11

Is there a way to expand all elements in the elements view of the Chrome WebKit inspector?

Original Q&A

There are 7 answers

user3145814 On 30 December 2013 at 09:04

Here's how i've decided to do it:

Highlight the element tag I wish to inspect, if it's the whole (expand all) the requirement, then highlight <body> tag, click F2.

Note: F2 is actually the shortcut for 'Toggle edit as HTML'. You can directly make any change in this mode, changes are reflected on web page. You may right-click within this new code view-window and enable/disable wordwrap.

artemisian On 12 May 2021 at 13:24

Click on the element:

Alt + Right Arrow (Expand)
Alt + Left Arrow (Collapse)

You can move around with the Arrow keys and using Tab.

Luke Floden On 10 January 2017 at 19:57

CTRL + SHIFT + ALT + LEFTCLICK

NorthernFern On 04 July 2021 at 21:01

these approaches seem convoluted, all you have to do to make all the arrow symbols change from pointing towards the right to pointing down is click the html tag and in the dropdown box click "expand recursively"

Pedz On 08 May 2018 at 03:38

I found just right clicking on the tag and selecting "Expand Recursively" worked for me. I'm using Chrome Version 66.

You can also right click and "Collapse Children" to collapse it all again.

Kenny Yarmolchuk On 18 January 2018 at 19:00

On Chrome while clicking the arrow in the source-code, will expand all children elements.

ALT + Click the Drop Arrow = Unwrap One level by one
ALT + CTRL + Click the Drop Arrow = Unwrap "All" Level at once

**AllTradesJack** · Accepted Answer · 2014-08-06 17:33:21

If you hold ctrl + alt for windows (just opt on a mac) while clicking on the arrow of the element you want to expand, it will expand and all of its children will expand. So, if you ctrl + alt click on the <html> tag, that should expand the entire page.

This Link lists the keyboard shortcuts for chrome dev tools, including that one.

TechQA.

How do you expand all elements in the WebKit Inspector elements view?

There are 7 answers

Related Questions in GOOGLE-CHROME

Related Questions in WEBKIT

Related Questions in INSPECTOR

Popular Questions

Popular Tags

Trending Questions