{"id":492,"date":"2014-06-09T14:07:43","date_gmt":"2014-06-09T14:07:43","guid":{"rendered":"http:\/\/localhost\/__sites\/3d_blog\/?p=492"},"modified":"2014-06-18T11:12:19","modified_gmt":"2014-06-18T11:12:19","slug":"show-the-function-call-chain","status":"publish","type":"post","link":"https:\/\/blog.silverterra.net\/?p=492","title":{"rendered":"show the function call chain"},"content":{"rendered":"<blockquote><p>Goal: catch the call chains in javascript<\/p><\/blockquote>\n<p>I want to see my program&#8217;s footprint.<br \/>\nSo the hard way is to build a log mechanism&#8230; The easier is to use my _trace utility.<br \/>\n<strong>_chain<\/strong> function.<br \/>\nTo achieve my goal I need to watch all my functions. This is not a complicated task if I use the _trace for all functions of my object like this:<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\n(function() {  \/\/ _chain\r\n\r\n\/* usage\r\n  1. I have only a simple way to do this\r\n    this._chain();\r\n*\/\r\n\r\n  TypeExtend(Object, '_chain', function() { \r\n\r\n    for(var i in this){\r\n      if(typeof this[i] === &quot;function&quot;) {\r\n        this._trace(i, true);\r\n      }\r\n    }\r\n    console.obj('_chain applied to', this);\r\n\r\n  });\r\n\r\n}());\r\n<\/pre>\n<p>The result is in the console window. I can follow the call chain. I can see the called functions with the arguments.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"wp-content\/uploads\/2014\/06\/chain-300x168.jpg\" width=\"300\" height=\"168\" class=\"alignnone size-medium wp-image-493\" srcset=\"https:\/\/blog.silverterra.net\/wp-content\/uploads\/2014\/06\/chain-300x168.jpg 300w, https:\/\/blog.silverterra.net\/wp-content\/uploads\/2014\/06\/chain.jpg 341w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>I&#8217;ve extended the <strong>object<\/strong> class again and modified the <strong>_trace<\/strong> method<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\n(function() {  \/\/ _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\nvar _trace_level = 1;\r\n\r\n  TypeExtend(Object, '_trace', function(funcName, useChain) { \r\n  \r\n    if(typeof(this[funcName]) != 'function'){_watch.call(this, funcName); return false;}\r\n  \r\n    if(this['__' + funcName]){return false;}\r\n    this['__' + funcName] = this[funcName];\r\n    \r\n    this[funcName] = function(){\r\n      var a = arguments, _tl = _trace_level;\r\n    \r\n      arguments.callee.caller.toString() &amp;&amp; _trace_level++;\r\n    \r\n      var aa = '', aar = [];\r\n      for(var ar in a){ a[ar] &amp;&amp; aar.push(a[ar].toString()); }\r\n      aa = aar.join(',');\r\n    \r\n      if(useChain){\r\n        if(_tl &lt; _trace_level){ console.group(funcName + ' (' + aa + ')'); }\r\n        else{ console.log(funcName + ' (' + aa + ')'); }\r\n      }\r\n      else{\r\n        console.traceEx('_trace: ' + ' '.repeat(_trace_level) + funcName, 'background: rgba(207, 181, 42, 0.6); color: #000;', arguments);\r\n      }\r\n      var ret = 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      if(_tl &lt; _trace_level){ console.groupEnd(); }\r\n      _trace_level = _tl;\r\n      \r\n      return ret;\r\n    };\r\n    !useChain &#038;&#038; console.info('_trace applied to ' + funcName);\r\n    return true;\r\n  });\r\n  \r\n  _trace = function(fn){ this._trace(fn); }; \r\n[\/js]\r\nTo show the call chain just put this to the start point of your code. &lt;strong&gt;this&lt;\/strong&gt; is my class to investigate.\r\n[js]\r\n  this._chain();\r\n<\/pre>\n<blockquote><p>see also: <a href=\"?p=209\" title=\"extender \u2013 Object\">extender \u2013 Object<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Goal: catch the call chains in javascript I want to see my program&#8217;s footprint. So the hard way is to build a log mechanism&#8230; The easier is to use my _trace utility. _chain function. To achieve my goal I need to watch all my functions. This is not a complicated task if I use the [&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-492","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/492","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=492"}],"version-history":[{"count":10,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/492\/revisions"}],"predecessor-version":[{"id":651,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/492\/revisions\/651"}],"wp:attachment":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}