Skip to content

Instantly share code, notes, and snippets.

@Leglaw
Last active September 22, 2015 21:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Leglaw/f97f503475bc0ea16993 to your computer and use it in GitHub Desktop.
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.
/***************************************************
* 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