Tag Archives: extensions

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.

My Software – Subdomain Launched and Being Updated

I’ve finally found some free time to get a new sub domain setup for all of the software I’ve created.

You can check out the new site at software.creatingdrew.com.

I’ll be merging my existing software, plugins, & extensions into the site over time. Many of the plugins and extensions from Dev-Tips.com (now closed) will be merged into the new site as well.

I’ve just added an Alfred App extension to allow you to toggle hidden files super quickly on your system. I’ve also put up a much requested update about the “Are You Sure?” WordPress plugin that some of you used in the past.

If you have some time to swing by the new site or give it a share, I’d appreciate it.

Stay well and keep smiling. 🙂