DevTools tips — day 4: the Elements panel

An advent calendar for front-end developers

Tomek Sułkowski
Dec 4, 2018 · 3 min read

Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve reached the 11th tip, today we will start with the 12th and work with the Elements panel:

12. Hide with the “h”

You can hide an element selected in Elements panel by simply pressing “h”. Press “h” again to make it re-appear. Pretty useful for when you want to e.g. make a screenshot but don’t want it to include some sensitive data.

13. Drag & drop elements

Want to check how a part of your html will look in a different place of the DOM tree, just drag and drop it, like you would with anything anywhere on your machine :-)

14. …or use control!

If you want to move currently selected element just a bit down up or down the DOM structure, instead of drag & drop you can also use [ctrl] + [⬆] / [ctrl] + [⬇] ([⌘] + [⬆] / [⌘] + [⬇] on Mac).

15. It’s basically an editor

At this point we can drag, drop, edit, copy (and yes, also paste with [ctrl]+[v]), so it shouldn’t be a big surprise that once we mess up our html structure in the Elements panel we can do, what is a standard in any text/graphical editor everywhere:

  • undo any of our changes with the [ctrl] + [z] ([⌘] + [z] on Mac)
  • redo any of our changes with the [ctrl] + [shift] + [z]

Man, this Elements panel is fun — 4 tips went like a breeze!
See you tomorrow then! 😀

As usual: if you’ve learned something new, please:

→ clap 👏 button below️ so more people can see this
follow me on Twitter (@sulco) so you won’t miss future posts:

Also, the 5th day is already published, read it here:

Tomek Sułkowski

Written by

Frontend trainer, Angular enthusiast, family man,

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade