SubtleHoverInspect
SubtleHoverInspect Bookmarklet
I’ve tested it in Safari4 only. It might work in Firefox 3.5 too.
// SubtleHoverInspect Bookmarklet | |
// subtlehoverinspect.bookmarklet.js | |
/* | |
The MIT License | |
Copyright (c) 2009 Thomas Aylott (subtlegradient.com) | |
Permission is hereby granted, free of charge, to any person obtaining a copy | |
of this software and associated documentation files (the "Software"), to deal | |
in the Software without restriction, including without limitation the rights | |
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
copies of the Software, and to permit persons to whom the Software is | |
furnished to do so, subject to the following conditions: | |
The above copyright notice and this permission notice shall be included in | |
all copies or substantial portions of the Software. | |
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | |
THE SOFTWARE. | |
*/ | |
(function(document){ | |
var css = document.createElement('style'); | |
css.appendChild(document.createTextNode('\ | |
*:hover\ | |
{outline:2px solid red;}\ | |
caption:hover,\ | |
thead:hover,\ | |
tbod:hover,\ | |
tfoot:hover,\ | |
tr:hover\ | |
{outline:2px dotted red;}\ | |
td:hover,\ | |
th:hover\ | |
{outline:2px solid red;}\ | |
h1:hover,\ | |
h2:hover,\ | |
h3:hover,\ | |
h4:hover,\ | |
h5:hover,\ | |
h6:hover\ | |
{outline:2px solid green;}\ | |
ol:hover,\ | |
ul:hover\ | |
{outline:2px dotted blue;}\ | |
li:hover\ | |
{outline:2px solid blue;}\ | |
div:hover\ | |
{outline:2px dotted aqua;}\ | |
span:hover\ | |
{outline:2px solid aqua;}\ | |
')); | |
document.body.appendChild(css); | |
var id = document.createElement('div'); | |
id.innerHTML = 'Hover stuff!'; | |
id.style.position = 'fixed'; | |
id.style.bottom = '0px'; | |
id.style.left = '0px'; | |
id.style.right = '0px'; | |
id.style.backgroundColor = 'rgba(32,32,32,0.8)'; | |
id.style.color = '#fff'; | |
id.style.textShadow = '0 2px 2px #000'; | |
id.style.padding = '1em'; | |
id.style.fontSize = '12px'; | |
id.style.fontFamily = 'Lucida Grande'; | |
id.style.border = '1px solid #666'; | |
id.style.outline = '1px solid #000'; | |
document.body.appendChild(id); | |
function ID(el){ | |
return [ | |
String(el.tagName).toLowerCase(), | |
el.id && ('#' + el.id), | |
el.className && ('.' + el.className.split(' ').join('.')) | |
].join(''); | |
}; | |
function getAncestry(el){ | |
var ancestry = []; | |
do {ancestry.unshift(el);} while((el = el.parentNode)); | |
ancestry.shift(); | |
return ancestry; | |
}; | |
function getAncestryID(element){ | |
var IDs = []; | |
getAncestry(element).forEach(function(el){ | |
IDs.push(ID(el)); | |
}); | |
return IDs.join(' > '); | |
}; | |
document.body.addEventListener('mouseover',function(event){ | |
var el = event.target; | |
id.innerHTML = getAncestryID(el); | |
},false); | |
})(document); |
SubtleHoverInspect
Thomas Aylott / subtleGradient