2 years ago

Bookmarklet for outlining html elements on a website

Category: Webdev

If you ever need to outline all html elements on a website without the need to involve a specific browser extension (or lacking a proper debug extension such as in older Internet Explorer versions) there comes a very handy bookmarklet to the rescue:

Using a handy bookmarklet for 1-click-outlining all elements

Click and drag to your bookmarks: outline

What does it do?

I inserted line breaks in order to make it more readable:


javascript:var s=document.createElement('script');
s.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
document.getElementsByTagName('body')[0].appendChild(s);
var $k =jQuery.noConflict();
$k(document).ready(function(){
    $k('*').css('outline','1px solid #80ff00');
});

It attaches/loads the jquery library to the document, sets jQuery to noconflict Mode (so it will not interfere with anything already probably present on the website) and sets a 1px solid green border to all elements. Special: It does not set a "real" border with the css-border-property, but uses the outline property instead. This way it will not break layouts or positioning (since the outline does not add to the total with and height of an element). Adjust line color and style to your liking…

Using the bookmarklet to spot layout errors

  • This article is my 10th oldest. It is 170 words long.