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

Question

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

I don't know, but I'm wondering myself and I just found this question through Google. Did you ever find out? — GMA, Oct 31 '13 at 04:27

score 118 · Accepted Answer · edited Jun 01 '16 at 15:42

118

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.

edited Jun 01 '16 at 15:42

TheGameiswar

27,855
8
56
94

answered Aug 06 '14 at 17:33

AllTradesJack

2,762
5
25
36

9

Just holding Alt and clicking works for me on Windows - thanks – JeffG Sep 17 '14 at 08:58
Saved me a few attempts, trying to screenshot code before the redirect timer kicks in :D – Pierre Sep 12 '16 at 06:32
1

Just `Alt` on Linux. – Ivan Kozik May 17 '17 at 03:30
Shift+Alt on ubuntu – user2106769 Mar 24 '19 at 11:03

score 6 · Answer 2 · answered Jan 10 '17 at 19:57

6

CTRL + SHIFT + ALT + LEFTCLICK

answered Jan 10 '17 at 19:57

Luke Floden

101
1
7

score 5 · Answer 3 · answered Dec 30 '13 at 09:04

5

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.

answered Dec 30 '13 at 09:04

user3145814

59
1
2

boom. Just what I wanted. Thanks! – Jon Rose Dec 30 '13 at 17:53
It works, thanks. An additional wish is for that editable content to be formatted. – CuongHuyTo Aug 28 '14 at 09:28

Kenny Yarmolchuk · Answer 4 · 2018-01-22T19:32:23.713

1

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

edited Jan 22 '18 at 19:32

answered Jan 18 '18 at 19:00

Kenny Yarmolchuk

11
1
2

score 1 · Answer 5 · answered May 12 '21 at 13:24

1

Click on the element:

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

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

answered May 12 '21 at 13:24

artemisian

2,976
1
22
23

score 0 · Answer 6 · answered May 08 '18 at 03:38

0

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.

answered May 08 '18 at 03:38

Pedz

442
1
10
30

score 0 · Answer 7 · answered Jul 04 '21 at 21:01

0

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"

answered Jul 04 '21 at 21:01

NorthernFern

1

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

7 Answers7

Linked