DevTools tips — day 4: the Elements panel
An advent calendar for front-end developers
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:
Tomek Sułkowski (@sulco) | Twitter
Also, the 5th day is already published, read it here: