{"id":368,"date":"2014-06-05T09:10:59","date_gmt":"2014-06-05T09:10:59","guid":{"rendered":"http:\/\/localhost\/__sites\/3d_blog\/?p=368"},"modified":"2014-06-08T13:04:33","modified_gmt":"2014-06-08T13:04:33","slug":"easy-trace-in-javascript","status":"publish","type":"post","link":"https:\/\/blog.silverterra.net\/?p=368","title":{"rendered":"easy trace in javascript"},"content":{"rendered":"<blockquote><p>Goal: to notice the console trace function<\/p><\/blockquote>\n<p>Who called my function? Easy question if you know about how you can trace.<br \/>\nJust put one line to your function:<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\n  ...\r\n  console.trace('I\\'ll catch you.');\r\n  ...\r\n<\/pre>\n<p>This is for functions. If you want to know about variable changes, use getter\/setter<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\n  ...\r\n  myVariable: 23,\r\n  ...\r\n<\/pre>\n<p>use this form<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\n  ...\r\n  _myVariable: 23,\r\n  set myVariable(val) {\r\n    this._myVariable = val;\r\n    console.trace('myVariable set to: ' + val);\r\n  },\r\n  get myVariable {\r\n    console.trace('myVariable read');\r\n    return this._myVariable;\r\n  },\r\n  ...\r\n<\/pre>\n<p>So this is nice but here is a more flexible mode.<br \/>\nI will extend the Object type with this:<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\n(function() {\t\/\/ _trace, _watch, _catch capability\r\n\r\n\/* usage\r\n  1. simple trace and watch\r\n    this._trace('myFunctionName'); ... or ... _trace.call(this, 'myFunctionName');\r\n    this._watch('myVariableName'); ... or ... _watch.call(this, 'myVariableName');\r\n  2. function bind on variable set\r\n    this._catch('myVariableName', function(){...}); ... or ... _catch.call(this, 'myVariableName', function(){...});\r\n*\/\r\n\r\n  TypeExtend(Object, '_trace', function(funcName) { \r\n  \r\n    if(typeof(this[funcName]) != 'function'){_watch.call(this, funcName); return false;}\r\n  \r\n    if(this['__' + funcName]){console.error('unable to apply _trace for ' + funcName); return false;}\r\n    this['__' + funcName] = this[funcName];\r\n    \r\n    this[funcName] = function(){\r\n      console.traceEx('_trace: ' + funcName, 'background: rgba(207, 181, 42, 0.6); color: #000;', arguments);\r\n      var a = arguments;\r\n      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]);\r\n    };\r\n    console.info('_trace applied to ' + funcName);\r\n    return true;\r\n  });\r\n  \r\n  _trace = function(fn){ this._trace(fn); }; \r\n  \r\n  TypeExtend(Object, '_watch', function(varName, binder) { \r\n  \r\n    if(this['__' + varName]){console.error('unable to apply _watch for ' + varName); return false;}\r\n    this['__' + varName] = this[varName];\r\n\r\n    Object.defineProperty(this, varName, {\r\n      get: function() {\r\n        !binder &amp;&amp; console.traceEx('_watch GET: ' + varName, 'background: rgba(97, 243, 126, 0.6); color: #000;');\r\n        return this['__' + varName];\r\n      },\r\n      set: function(val) {\r\n        !binder &amp;&amp; console.traceEx('_watch SET: ' + varName + '--&gt; value:' + val, 'background: rgba(243, 151, 151, 0.6); color: #000;');\r\n        this['__' + varName] != val &amp;&amp; (this._trigger('__set_' + varName, this['__' + varName], val), this['__' + varName] = val);\r\n        return this;\r\n      }      \r\n    });\r\n    \r\n    if(binder){ \/\/ ezt meg r\u00e1k\u00f6t\u00f6m figyel\u00e9snek\r\n      this._bind('__set_' + varName, binder);\r\n      console.info('_catch applied to ' + varName);\r\n    }\r\n    else{\r\n      console.info('_watch applied to ' + varName);\r\n    }\r\n    return true;\r\n  });\r\n  \r\n  TypeExtend(Object, '_catch', function(varName, binder) { \r\n    return this._watch(varName, binder);\r\n  });  \r\n  \r\n  _watch = function(vn, binder){ this._watch(vn, binder); };  \r\n  _catch = function(vn, binder){ this._watch(vn, binder); };  \r\n  \r\n}());\r\n<\/pre>\n<p>This is my universal mode to <strong>trace<\/strong> call chains or <strong>watch<\/strong> variable access or <strong>catch<\/strong> variable changes <span class=\"red\">(be careful bind triggered only on changes!)<\/span>.<br \/>\nThe setup is simple:<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\n  1. simple trace and watch\r\n    this._trace('myFunctionName'); ... or ... _trace.call(this, 'myFunctionName');\r\n    this._watch('myVariableName'); ... or ... _watch.call(this, 'myVariableName');\r\n  2. function bind on variable set\r\n    this._catch('myVariableName', function(){...}); ... or ... _catch.call(this, 'myVariableName', function(){...});\r\n<\/pre>\n<p>Just put this setup to the start of your code and watch the console window.<\/p>\n<blockquote><p>see also: <a href=\"?p=11\" title=\"extend the console\">extend the console<\/a>, <a href=\"?p=209\" title=\"extender \u2013 Object\">extender \u2013 Object<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>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: This is for functions. If you want to know about variable changes, use getter\/setter use this form So this is nice but here is a more flexible [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-368","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=368"}],"version-history":[{"count":21,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/368\/revisions"}],"predecessor-version":[{"id":475,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/368\/revisions\/475"}],"wp:attachment":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}