Skip to content

Instantly share code, notes, and snippets.

@ifthenelse
Last active November 14, 2019 04:39
Show Gist options
  • Save ifthenelse/8963c810333e9ad0f072c7e29a8abb86 to your computer and use it in GitHub Desktop.
Save ifthenelse/8963c810333e9ad0f072c7e29a8abb86 to your computer and use it in GitHub Desktop.
A cross-browser tiny DOM inspector to use as a bookmarklet when inspection on is forbidden
function onTinyInspectorMouseOver(evt) {
if (evt.target == p || evt.target == c) { return; }
p.innerHTML = evt.target.tagName + " " + evt.target.className;
c.innerHTML = window.getComputedStyle(evt.target).getPropertyValue("width") + " x " + window.getComputedStyle(evt.target).getPropertyValue("height");
evt.target.style.backgroundColor = "rgba(255, 0, 0, 0.15)";
evt.target.style.border = "1px solid rgba(255, 0, 0, 0.5)";
}
function onTinyInspectorMouseOut(evt) {
if (evt.target == p || evt.target == c) { return; }
evt.target.style.backgroundColor = "";
evt.target.style.border = "";
}
var b = document.body || document.getElementsByTagName("body")[0];
var p = document.createElement("p");
var c = document.createElement("code");
p.id = "tinyinspector-selector";
p.style.cssText = "position: fixed; top: 10px; right: 0; left: 0; z-index: 9999; display: block; width: 400px; height: 30px; margin: auto; padding: 8px; font-size: 14px; line-height: 1em; background-color: white; color: black; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75); resize: both;";
c.id = "tinyinspector-style";
c.style.cssText = "position: fixed; top: 50px; right: 0; left: 0; z-index: 9999; display: block; width: 400px; height: 30px; margin: auto; padding: 8px; font-size: 14px; line-height: 1em; background-color: lightblue; color: blue; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75); resize: both;";
b.appendChild(p);
b.appendChild(c);
document.addEventListener("mouseover", onTinyInspectorMouseOver, false);
document.addEventListener("mouseout", onTinyInspectorMouseOut, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment