Silverterra 3d blog

Goal: to notice the console trace function

Who called my function? Easy question if you know about how you can trace.
Just put one line to your function:

  ...
  console.trace('I\'ll catch you.');
  ...

This is for functions. If you want to know about variable changes, use getter/setter

  ...
  myVariable: 23,
  ...

use this form

  ...
  _myVariable: 23,
  set myVariable(val) {
    this._myVariable = val;
    console.trace('myVariable set to: ' + val);
  },
  get myVariable {
    console.trace('myVariable read');
    return this._myVariable;
  },
  ...

So this is nice but here is a more flexible mode.
I will extend the Object type with this:

(function() {	// _trace, _watch, _catch capability

/* usage
  1. simple trace and watch
    this._trace('myFunctionName'); ... or ... _trace.call(this, 'myFunctionName');
    this._watch('myVariableName'); ... or ... _watch.call(this, 'myVariableName');
  2. function bind on variable set
    this._catch('myVariableName', function(){...}); ... or ... _catch.call(this, 'myVariableName', function(){...});
*/

  TypeExtend(Object, '_trace', function(funcName) { 
  
    if(typeof(this[funcName]) != 'function'){_watch.call(this, funcName); return false;}
  
    if(this['__' + funcName]){console.error('unable to apply _trace for ' + funcName); return false;}
    this['__' + funcName] = this[funcName];
    
    this[funcName] = function(){
      console.traceEx('_trace: ' + funcName, 'background: rgba(207, 181, 42, 0.6); color: #000;', arguments);
      var a = arguments;
      return this['__' + funcName](a[0],a[1],a[2],a[3],a[4],a[5],a[6],a[7],a[8],a[8],a[10]);
    };
    console.info('_trace applied to ' + funcName);
    return true;
  });
  
  _trace = function(fn){ this._trace(fn); }; 
  
  TypeExtend(Object, '_watch', function(varName, binder) { 
  
    if(this['__' + varName]){console.error('unable to apply _watch for ' + varName); return false;}
    this['__' + varName] = this[varName];

    Object.defineProperty(this, varName, {
      get: function() {
        !binder && console.traceEx('_watch GET: ' + varName, 'background: rgba(97, 243, 126, 0.6); color: #000;');
        return this['__' + varName];
      },
      set: function(val) {
        !binder && console.traceEx('_watch SET: ' + varName + '--> value:' + val, 'background: rgba(243, 151, 151, 0.6); color: #000;');
        this['__' + varName] != val && (this._trigger('__set_' + varName, this['__' + varName], val), this['__' + varName] = val);
        return this;
      }      
    });
    
    if(binder){ // ezt meg rákötöm figyelésnek
      this._bind('__set_' + varName, binder);
      console.info('_catch applied to ' + varName);
    }
    else{
      console.info('_watch applied to ' + varName);
    }
    return true;
  });
  
  TypeExtend(Object, '_catch', function(varName, binder) { 
    return this._watch(varName, binder);
  });  
  
  _watch = function(vn, binder){ this._watch(vn, binder); };  
  _catch = function(vn, binder){ this._watch(vn, binder); };  
  
}());

This is my universal mode to trace call chains or watch variable access or catch variable changes (be careful bind triggered only on changes!).
The setup is simple:

  1. simple trace and watch
    this._trace('myFunctionName'); ... or ... _trace.call(this, 'myFunctionName');
    this._watch('myVariableName'); ... or ... _watch.call(this, 'myVariableName');
  2. function bind on variable set
    this._catch('myVariableName', function(){...}); ... or ... _catch.call(this, 'myVariableName', function(){...});

Just put this setup to the start of your code and watch the console window.

see also: extend the console, extender – Object

Thursday, June 5th, 2014 at 09:10.
Filed under javascript.