Last active
September 22, 2015 21:56
-
-
Save Leglaw/f97f503475bc0ea16993 to your computer and use it in GitHub Desktop.
Display latest value of a variable instead of flooding your console with log entries with this handy script. Call dbgWatch with 2 parameters: variable name, variable value, and it places it in a fixed-position div on the page. You can move the div around as needed.
This file contains hidden or 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
/*************************************************** | |
* Debugging | |
***************************************************/ | |
(function() { | |
var body = document.getElementsByTagName('body')[0], | |
divWatch = document.createElement('div'); | |
cssText = "font-family: 'Lucida Console', monospace;" + | |
"font-size: 12px;" + | |
"line-height: 1em;" + | |
"white-space: nowrap;" + | |
"text-align: left;" + | |
"padding: 10px;" + | |
"background: white;" + | |
"color: black;" + | |
"position: fixed;" + | |
"top: 90px;" + | |
"left: 90px;" + | |
"box-shadow: 0 0 10px rgba(0,0,0,0.7);" + | |
"cursor: move;" + | |
"user-select: none;" + | |
"-webkit-user-select: none;" + | |
"-moz-user-select: none;" + | |
"-ms-user-select: none;" + | |
"z-index: 9999;"; | |
divWatch.id = 'debug-watch'; | |
divWatch.style.cssText = cssText; | |
body.appendChild(divWatch); | |
divWatch.addEventListener('mousedown', addMoveEvent); | |
divWatch.addEventListener('mouseup', removeMoveEvent); | |
function addMoveEvent() { | |
body.addEventListener('mousemove', moveDiv); | |
} | |
function removeMoveEvent() { | |
body.removeEventListener('mousemove', moveDiv); | |
} | |
function moveDiv(e) { | |
divWatch.style.top = e.y + 'px'; | |
divWatch.style.left = e.x + 'px'; | |
} | |
window.dbgWatch = function(name, value) { | |
var watcharea = document.querySelector('#debug-watch'), | |
var_name = name.replace('.','-'), | |
text = name + ': ' + value; | |
try { | |
var elWatch = watcharea.querySelector('#var-' + name); | |
if (elWatch) { | |
elWatch.textContent = text; | |
} | |
else { | |
// Create new var space on the #debug-watch output | |
var newElWatch = document.createElement('div'); | |
newElWatch.id = 'var-' + name; | |
newElWatch.textContent = text; | |
watcharea.appendChild(newElWatch); | |
} | |
} catch(e) {} | |
}; | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment