Need to outline all HTML elements on an open web page? I’m sure there has been a time when you’ve used something like this to do so:
* { border:1px solid red; } Which gives you a quick visual look at all elements on the page and how they align. It’s simple and by all means works just fine.
To make things even more convenient, here’s a quick and handy little JavaScript bookmarklet for you web developers to save. Full credit and thanks go to “beaver82” in the following /r/webdev/ thread. I’ve edited one of his/her original scripts to include a border instead of outline, in case you do want to affect the box size.
Snippets:
The border/outline scripts are distinguished by the file names listed above.
Usage
- Drag or save the JavaScript snippet desired (either js_border_elems.js, js_outline_elems.js, or both) to your browsers bookmarks bar.
- Name it something useful, such as “Outline * Elements“
- Click on the snippet to outline/border elements on the current page. Click again to remove the outlines/borders.
Enjoy! If you have any similar useful snippets, please do share them in the comments section.
