Last active
November 14, 2019 04:39
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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