How to see any website's layout structure with this easy CSS trick

Use this simple CSS trick to put a red border on all website elements. Quickly see structure, debug common CSS issues, and best of all, you can apply this to any website on the internet!
1. Right click and inspect
2. Right click to Edit the HTML of the bottom section of a page
3. Add code from the video in the section and press CTRL + ENTER (KZbin doesn't allow me to put angled brackets in)
-----------------------------------
🌟 Brendan O’Connell 🌟
🎨 WordPress | Design | Development | Automation | Tech 🖥️
Want to connect or work together?
🌐 Website: brendan-oconnell.com
🐦 Twitter: / brendanocwp
🔗 LinkedIn: / brendan-o-connell1
☕ Buy Me a Coffee (or Tacos): buymeacoffee.com/brendanoconnell
----------------
Aff Links:
Get Bricksforge: bricksforge.io?aff=d768d61b
Get ACSS: automaticcss.com/ref/138/
Get Frames: getframes.io/ref/11/

[@-Cocell]

For anyone wondering, an even more efficient method: Step 1 : Click the plus button on the style panel. Step 2: Type "*" and hit tab and then type: `border: 1px solid red`.

[@BrendanOConnellWP]

Thanks! haha where were you a few days ago before i posted this! 🧐

[@-Cocell]

@@BrendanOConnellWP Ehh 😅

[@szecse]

Hi thank you for useful tip. Do you know suck an easy way to see spacing of the component? Thanks

[@BrendanOConnellWP]

ctrl+shift+C brings up the inspect element quickly, other than that, there's probably browsers extensions