AspectJS - Supplementary: Trace-Debugging Library Source - Source Code for a JavaScript-Library for Displaying Debugging Information

Source
Tutorial
API

he need to trace the actual sequence of statements and functions executed at run-time arises frequently when developing complex JavaScript applications. One approach to this is to use a dedicated debugging-tool, or (if a given platform provides no such support) to use 'alert' boxes to indicate that the execution thread has reached a particular point, and/or to report the value of critical variables. At best, however, this can be inconvenient, moreover, AspectJS suppresses any exceptions that are generated by function prefixes and suffixes.

Given this, a simple reporting-mechanism is of value and this page offers a small, free, JavaScript library that can be used to display debugging information to a pop-up window. It uses JavaScript calls that should be common to all browsers, and is very simple to use.

See the Supplementary Section's Introduction and Overview page for terms of use, a summary and comparison of the libraries available from this site, and other general technical-information.


 function TracerManager_CloseAll () { TracerManager.CloseAll (); }

 var TracerManager =
    {
    WinID        : 0,
    Tracers      : [],

    CloseAll     : function ()
       {
       for (var Idx = 0; Idx < this.Tracers.length; Idx++) { this.Tracers[Idx].CloseWin (); }
       },

    CreateTracer : function ()
       {
       var NewTracer = new this.Tracer (this.WinID);

       this.Tracers[this.Tracers.length] = NewTracer;
       window.onunload                   = TracerManager_CloseAll;

       this.WinID++;

       return NewTracer;

       },

    // ----------------------------------------

    Tracer : function (WinID)
       {
       this.WinID      = WinID;
       this.MsgCounter = 0;

       this.On         = function () { this.MsgOut = this.RouteMsg;          };
       this.Off        = function () { this.MsgOut = function (Message) { }; };

       // ----------------------------------------

       this.MsgOut_Numbered = function (UsrMsg)
          {
          this.DispConcatMsg (this.MsgCounter + ": ", UsrMsg);
          this.MsgCounter++;
          };

       this.ResetMsgCounter = function (UsrMsg)
          {
          this.DispConcatMsg ("--- Message Counter Set to Zero ---", UsrMsg);
          this.MsgCounter = 0;
          };

       this.DispConcatMsg = function (Stub, Extended)
          {
          if (Extended) { this.MsgOut (Stub + "  " + Extended); }
          else          { this.MsgOut (Stub); }
          };

       // ----------------------------------------

       this.MsgOut    =
       this.RouteMsg  = function (Message)
          {
          if (this.OutStream.MsgOut (Message) == true) { return true }

          this.OutStream = this.MsgBuffer;
          this.MsgBuffer.MsgOut (Message);

          return false;

          };

       this.OutStream =
       this.MsgBuffer =
          {
          Messages     : [],

          Close        : function ()        { },
          MsgOut       : function (Message) { this.Messages[this.Messages.length] = Message; return true; },
          DispMessages : function (Target)
             {
             for (var Idx = 0; Idx < this.Messages.length; Idx++) { Target.MsgOut (this.Messages[Idx]); }
             this.Messages.length = 0;
             }

          };

       // ----------------------------------------

       this.CloseWin  = function () { this.OutStream.Close  (); this.OutStream = this.MsgBuffer; };
       this.OpenWin   = function (Left, Top, Width, Height)
          {
          if (this.OutStream != this.MsgBuffer) { return this; }

          this.OutStream =
             {
             Win    : window.open ("",
                                   this.WinID.toString (),
                                   "alwaysRaised = yes, location = no, toolbar = no",
                                 + "status = no, resizable = yes,left = " + Left
                                 + ",top="    + Top
                                 + ",width="  + Width
                                 + ",height=" + Height),
             MsgDiv : null,

             Close  : function () { this.Win.close (); },
             MsgOut : function (Message)
                {
                if (this.Win.closed === true) { return false; }

                this.MsgDiv.innerHTML += Message + "<br \/>";
                this.MsgDiv.scrollTop  = (this.MsgDiv.scrollHeight - this.MsgDiv.offsetHeight);

                return true;

                },

             Init   : function ()
                {
                this.Win.document.write ("<body><div id = 'Messages'"
                                       + "style = 'height:100%;width:100%;overflow:auto;font-family:arial;"
                                       + "font-size:70%'>--- Buffered Messages ---"
                                       + "<br /><\/div><\/body>");

                this.MsgDiv = this.Win.document.getElementById ("Messages");

                }

             };

          this.OutStream.Init         ();
          this.MsgBuffer.DispMessages (this.OutStream);
          this.OutStream.MsgOut       ("<br \/>--- Tracing Started ---");

          return this;

          };

       }

    };