Tag Archives: javascript

JavaScript Bookmarklet: Outline/Border all Elements of Site for Quick Development & Debugging

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.

Demo of the Outline Elements JavaScript Snippet

Demo of the Outline Elements JavaScript Snippet

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.jsjs_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.