CODEWITHSUNDEEP
htmlcssgoogle-chrome
Awnold
Awnold

Reputation: 61

With Chrome Dev Tools, how do I view / inspect all the elements at once to see the page layout? (Example attached)

With Chrome Dev Tools, how do I view / inspect all the elements at once to see the page layout? (Example attached)

Thanks!!!

'View All' Chrome Dev Tools

More Info: I took the screenshot myself yesterday, but after selecting something else, could never figure out how to replicate this view.

I have found this similar question: Is it possible to select multiple elements in the Chrome Developer Tools Elements panel?

The answer given is 'NO', but considering I took this screenshot myself yesterday... I know there is a way.... Thanks!!!

Upvotes: 1

Views: 3525

Answers (1)

Awnold
Awnold

Reputation: 61

Ankith answered this correctly:

define a rule for a universal selector * and hover over that in the styles panel of DevTools.

Screenshot of Answer

To replicate this, Kodos had most of it:

In chrome dev tools, click on the + symbol at the top right to create a new css rule. Change the selector to * to select all elements

(and hover over this selector with the mouse)

Thanks!!!

Upvotes: 4

Related Questions