/dev tips

🎊   The Modern DevTools course has now started! Visit ModernDevTools.com to find out more   🎊

(109) Colour tooling in the Sources Panel Auto Open DevTools for Each Tab (111)

Chrome DevTools: Here are three tricks you can use in the Elements Panel DOM tree

9 Aug 2016
Here are three tricks you can use in the Elements Panel DOM tree

Three quick tricks for the DOM tree in the Elements Panel:

  1. When you are editing the DOM as HTML (Right click > 'Edit as HTML'), use the shortcut Shift + Tab to auto-indent the markup. Works on single lines or multi-lines.

  2. Get the corresponding CSS selector for a DOM node: Right click > copy > copy selector.

  3. Rearrange the DOM with a drag-and-drop action in the DOM tree. Useful for quick prototyping of alternative layouts.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.