Bookmarklet: Reveal Tags

This bookmarklet will reveal all tags on a page and display hidden elements such as HEAD. It will not show end tags for HTML elements that are EMPTY. It is designed for HTML and XHTML, but might work for other XML languages aswell.

javascript:(function() {
  /* reveal tags */
  var arrElms = document.getElementsByTagName('*');
  for (var iElmCounter = 0, iElms = arrElms.length; iElmCounter < iElms; ++iElmCounter) {
    var objElm = arrElms[iElmCounter],
        strTag = objElm.nodeName,
        strLocal = objElm.localName,
        strNamespace = objElm.namespaceURI,
        arrAttrs = objElm.attributes,
        strAttrs = '';
    for (var iAttrCounter = 0, iAttrs = arrAttrs.length; iAttrCounter < iAttrs; ++iAttrCounter) {
      var objAttr = arrAttrs[iAttrCounter];
      strAttrs += ' ' + objAttr.nodeName + '="' + objAttr.nodeValue.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;') + '"';
    }
    if ((strNamespace == null && (strTag == 'STYLE' || strTag == 'SCRIPT')) || 
        (strNamespace == 'http://www.w3.org/1999/xhtml' && (strLocal == 'style' || strLocal == 'script'))) {
      /* don't mess up styles or scripts */
      objElm.insertBefore(document.createTextNode('/*<' + strTag + strAttrs + '>*/'), objElm.firstChild);
      objElm.appendChild(document.createTextNode('/*</' + strTag + '>*/'));
    } else {
      objElm.insertBefore(document.createTextNode('<' + strTag + strAttrs + '>'), objElm.firstChild);
      /* skip empty elements */
      if (strNamespace != null || (strTag != 'AREA' && strTag != 'BASE' && strTag != 'BASEFONT' &&
          strTag != 'BGSOUND' && strTag != 'BR' && strTag != 'COL' && strTag != 'EMBED' && strTag != 'FRAME' &&
          strTag != 'HR' && strTag != 'IMG' && strTag != 'INPUT' && strTag != 'ISINDEX' && strTag != 'KEYGEN' &&
          strTag != 'LINK' && strTag != 'META' && strTag != 'PARAM' && strTag != 'SPACER' && strTag != 'WBR')) {
        objElm.appendChild(document.createTextNode('</' + strTag + '>'));
      }
    }
    /* display hidden elements */
    if ((strNamespace == null && (strTag == 'HEAD' || strTag == 'BASE' || strTag == 'BASEFONT' ||
         strTag == 'BGSOUND' || strTag == 'LINK' || strTag == 'META' || strTag == 'PARAM' ||
         strTag == 'SCRIPT' || strTag == 'STYLE' || strTag == 'TITLE')) ||
        (strNamespace == 'http://www.w3.org/1999/xhtml' && (strLocal == 'head' || strLocal == 'base' ||
         strLocal == 'basefont' || strLocal == 'bgsound' || strLocal == 'link' || strLocal == 'meta' ||
         strLocal == 'param' || strLocal == 'script' || strLocal == 'style' || strLocal == 'title'))) {
      objElm.style.display = 'block';
    }
  }
})()

To use it, bookmark the bookmarklet Reveal Tags and then load it on any page. To "un-reveal tags", simply reload the page.