I’ve been using the Drupal ninesixty theme recently. One of the nice things about it is the ability to add a show-grid class to the <body> tag to display a grid as a background image grid for development / debugging.

But, rather than manually adding and removing this class to the page.tpl.php, I created a bookmarklet to toggle the show-grid class on and off. The code looks like this:

(function() {
  if (document.body.className) {
    var b = document.body;
    if (b.className.indexOf(' show-grid') !== -1) {
      b.className = b.className.replace(' show-grid', '');
    } else {
      b.className += ' show-grid';

It does make the assumption that your <body> tag will always have a class attribute, although it should be fairly straight forwards to modify the code to allow for cases where the <body> tag does not have a class attribute.

To save it as a bookmarklet, drag this link to your bookmarks bar: Show Grid