What Why & How     Browser Support     Get the bookmarklet

Bookmarklet Hacks

To employ these hacks, you need to know CSS and JavaScript and be able to use an editor.

Hover Highlight

This frequently requested hack is finally available. It helps to visually track mouse location using coordinating container colors.



Paste the bookmarklet code into an editor and replace its CSS with the CSS below. BE CAREFUL to leave the enclosing single quotes and ending semicolon in the bookmarklet.

div { padding:5px;margin:7px;font-family:verdana;font-size:10px;word-wrap: break-word;}#headTag { border:dashed 1px #dcdcdc; }#titleTag { color:#556b2f;font-weight:bold;border:dashed 1px #556b2f; }#scriptTag { color:#009900;border:dashed 1px #009900; }#statements { border:1px dashed; }#styleTag { color:#8b008b;border:dashed 1px #8b008b;background-color:#ffffff; }#rulesChar { margin:0px 3px 0px 7px; }#bodyTag,#canvasTag,#svgTag { font-family:verdana;font-size:10px;border:dashed 1px #000000; }#divTag { background-color:#e6e6fa;border:solid 1px #d8bfd8; }#divTag:hover {background:#E8D2FF;} #spanTag{background-color:#ffffe0;border:solid 1px #FFDF80;}#spanTag:hover{background:#FFEFBF;} #tableTag,#articleTag,#headerTag,#sectionTag,#asideTag,#footerTag,#navTag,#figureTag{ background-color:#E8F0FF;margin:9px;border:solid 1px #99ccff;}/*#CDE9FF*/#captionTag { text-align:center; }#tbodyTag { margin:7px 7px 7px 3px; }#theadTag { margin:7px 7px 7px 3px; }#tfootTag { margin:7px 7px 7px 3px; }#trTag{background:#E8F0FF;border:dashed 1px #99ccff;border:dashed 1px #99ccff; }#thTag { border:dotted 1px #99ccff;border:dotted 1px #99ccff; }#tdTag,#figcaptionTag {background:#E8F0FF; border:dotted 1px #99ccff;border:dotted 1px #99ccff;}#tableTag:hover,#trTag:hover,#tdTag:hover,#articleTag:hover,#headerTag:hover,#sectionTag:hover,#asideTag:hover,#footerTag:hover,#navTag:hover,#figureTag:hover,#figcaptionTag:hover{background:#D4E8F9;} #framesetTag { margin:7px;background-color:#ffe4ca;border:solid 1px #deb887; }#iframeTag { background-color:#c2e0ec;border:solid 1px #94c8de; }#ulTag,#olTag,#dialogTag,#dlTag{background-color:#E6F7DA;border:solid 1px #ADCA98;} #ulTag:hover,#olTag:hover,#dialogTag:hover,#dlTag:hover{background:#D0E5B7;} #dtTag {background-color:#E6F7DA;border:dotted 1px #ADCA98; }#ddTag { background-color:#E6F7DA;margin:7px 27px 7px 27px;border:dashed 1px #ADCA98; }#liTag{background-color:#E6F7DA;border:dotted 1px #ADCA98;}#liTag:hover,#ddTag:hover,#dtTag:hover{background:#D0E5B7;} #pTag{background-color:#e0ffff;border:solid 1px #48d1cc;}#pTag:hover{background:#B7E5E0;} #blockquoteTag{background-color:#FBF0E9;border:solid 1px #F3D9C7; }#commTag{color:#999999;border: dashed 1px #999999;border: dashed 1px #999999; }#aTag { color:#000099;margin:0px 3px 0px 7px;}#emTag { font-style:italic;margin:0px 3px 0px 7px; }#iTag { font-style:italic;margin:0px 3px 0px 7px; }#strongTag { font-weight:bold;margin:0px 3px 0px 7px; }#bTag { font-weight:bold;margin:0px 3px 0px 7px; }#uTag { text-decoration:underline;;margin:0px 3px 0px 7px; }#h1Tag { font-weight:bold;;margin:0px 3px 0px 7px; }#h2Tag { font-weight:bold;;margin:0px 3px 0px 7px; }#h3Tag { font-weight:bold;;margin:0px 3px 0px 7px; }#h4Tag { font-weight:bold;;margin:0px 3px 0px 7px; }#h5Tag { font-weight:bold;;margin:0px 3px 0px 7px; }#h6Tag { font-weight:bold;;margin:0px 3px 0px 7px; }img { margin:0px 3px 0px 10px; }#centerTag { margin:0px 3px 0px 7px; }#fontTag { margin:0px 3px 0px 7px; }#formTag { margin:0px 3px 0px 7px; }#selectTag { margin:0px 3px 0px 7px; }#fieldsetTag { margin:0px 3px 0px 7px; }#legendTag { margin:0px 3px 0px 7px; }#textareaTag { margin:0px 3px 0px 7px; }




Tab or Window?

If you want the bookmarklet to launch a chart in a new window instead of a new tab (default), just add Javascript popup window properties to the "wprops" variable located at the beginning of the script:

Find:

wprops='';

Replace with (and any additional properties you choose):

wprops='height=650,width=850,scrollbars=1,resizable=1';




Support Additional Tags

New tags can be supported easily by editing the bookmarklet code in 2 steps.

Step 1

Find:
(?=head(?= |&)|title|
And replace with the following, where "NEWTAGHERE" is the HTML tag you are adding
(?=head(?= |&)|title|NEWTAGHERE|

Then Find:
head|title|
And replace with the following, where "NEWTAGHERE" is the HTML tag you are adding head|title|NEWTAGHERE|

Note: if the new tag you add is a stem of another tag (e.g. "<li" is a stem of "<link"), specify it like this:
li(?= |&)|

Step 2

Find:
'div {
After the complete div selector rule, add the new rule to an ID selector:
#newtagTag{ property:value; }
The ID selector name must be the newly added HTML tag name in lowercase followed by the word "Tag" with an uppercase "T".




3D Effect Hack

Effect of this Hack seen in the video below:


Find:

moString = ' onmouseover="this.title=

For Chrome and Safari, Replace with:

moString = 'onmouseout=\"this.style.webkitBoxShadow=\'\'\" onmouseover="this.style.webkitBoxShadow=\'0 0 1em #999\'\;this.title=

For Opera and Firefox (4 only), Replace with:

moString = 'onmouseout=\"this.style.boxShadow=\'\'\" onmouseover="this.style.boxShadow=\'0 0 1em #999\'\;this.title=

Screenshots
Hacks
Green Coding
Bug Reports

"This Simple Tool can make it easier and faster for any Web developer to debug a design"
-Macworld Magazine

"...the most accessible DOM inspector available to web developers. (This) extension should be standard in every web developer's toolkit."
-John Resig, creator of jQuery, from his book, Pro JavaScript Techniques.

Mentioned in these books...