showHTML: JavaScript bookmarklet to get web page HTML details

UPDATE: showHTML is now available as a Chrome browser extension, an Opera browser extension, and a Firefox browser extension.  All three versions include new features, including the ability to customize how the extension looks and behaves.  See the extension support page for more details.


If you're writing a JavaScript bookmarklet or browser extension to target a specific web page (for example, to remove the Archive button from Yahoo! Mail) you'll probably need to find out certain information about the web page such as an element's tag name, class, or ID.  Often you can get this information by viewing the page source, but it can require time-consuming digging, and if the element in question was created with JavaScript, you may not be able to find it that way.

showHTML is a small bit of JavaScript that, when run on a web page, will place a small status bar at the top of the browser window that shows HTML information about any element that's hovered over.  You can see the element's tag name, it's ID (if it has one), and any classes that the element has attached to it.

Simply highlight the code below and drag it to your browser's bookmark bar to create a bookmark for it (in all major browsers except for Internet Explorer) then when you want to see information about a web page, load that page and click on the bookmarklet.  You can rename the bookmarklet in most browsers by right clicking on it and selecting Properties or Edit.

javascript:
(function (){
    var nStyle, dispID, dispClass, dispTag, showString;
    var body=document.getElementsByTagName('BODY')[0];
    var newDiv=[];
    var numDivs=0;
    var elems=document.getElementsByTagName('*');
    (function addHover(){
        for (var i=0;i<elems.length;i++) {
                elems[i].addEventListener('mouseenter',elemShow);
                elems[i].addEventListener('mouseleave',elemRem);
        }
    })();
    function elemShow(){
        numDivs++;
        dispID=this.id;
        dispClass=this.className;
        dispTag='\&#60;'+this.tagName+'\&#62;';
        showString=' Element: '+dispTag+'\&nbsp;&nbsp;&nbsp; ID: '+dispID+'\&nbsp;&nbsp;&nbsp; Class(es): '+dispClass;
        newDiv[numDivs]=document.createElement('div');
        newDiv[numDivs].innerHTML='';
        newDiv[numDivs].id='id'+numDivs;
        nStyle=newDiv[numDivs].style;
        nStyle.fontFamily='monospace';
        nStyle.color='black';
        nStyle.display='inline-block';
        nStyle.position='fixed';
        nStyle.fontSize='0.9em';
        nStyle.fontSize='0.9rem';
        nStyle.height='1.1em';
        nStyle.height='1.1rem';
        nStyle.width='100%';
        nStyle.zIndex=(999999+numDivs);
        nStyle.left='0px';
        nStyle.top='0px'; 
        nStyle.backgroundColor='lightyellow';
        nStyle.margin='0px';
        nStyle.padding='1px';
        newDiv[numDivs].innerHTML=showString;
        body.insertBefore(newDiv[numDivs], body.firstChild);
    }
    function elemRem() {
        body.removeChild(document.getElementById('id'+numDivs));
        newDiv[numDivs].id='';
        numDivs--;
    }
})();

Note that when copying and pasting this code in Opera, the browser will erase the javascript: at the beginning, so you'll probably need to retype it.

If the page you are calling showHTML on has a header with a z-index of greater than 999999 (which isn't likely) you will need to increase the z-index in showHTML in order for it to be visible.  If there are multiple HTML elements occupying the same space (for example, a <button> inside a <div>) the most-nested element will typically be the one shown.

There may still be a few bugs with this function, so if you notice any weird behavior, please leave a comment with the details.