Observing scoped variables via custom console.observe and chrome live expressions.

README.md

console.observe

Sometimes when debugging or testing, you use console.log() in a loop, or in a callback that is fired rapidly. Usefull, but when you only want to see the live value, your console can be flooded with entries. And even though there is the Live Expression option in chrome, your variable is sometimes not accessable in the window scope. This is where console.observe steps in.

console.observe(var, key);

This will create a window object variable window.consoleObserve that will contain updated value of the key you provide. This way you can selectivly create a live expression for your defined key.

Useage

window.addEventListener('mousemove', function(e) {
    const {clientX, clientY} = e;
    // provide the variable you're observing and the keyname.
    console.observe({clientX, clientY}, 'mouse_position');
});

Then in chrome create a live expression for consoleObserve.mouse_position.

Live Expression Limitations

You can technically observe the entire consoleObserve object, but the object won't be expanded to see the variables.

Live expressions are only updated every 250ms.

console.observe.js

/**
 * Create an observable var to reference via Chrome's Live Expression
 */
console.observe = function consoleObserve(value, key) {
    if (!window.hasOwnProperty('consoleObserve')) {
        console.log(`[observe]: Create a live expressions for 'consoleObserve' to observe variables.`);
        window.consoleObserve = {};
    }

    if (!window.consoleObserve.hasOwnProperty(key)) {
      console.trace(`[observe]: ${key}`);
      console.log(`[observe]: consoleObserve.${key} is now available for live expression`);
    }

    window.consoleObserve[key] = value;
}