g3debug

Javascript debugger

Parsing the members of an object should be relatively easy but, what happens when:

• we want to represent the tree-hierarchy of an object as a string for debugging (or not) purposes?
• we want to provide a formatting when exporting the hierarchy?
• there are circular references from a member to it's parent or even worse from a member deep in the hierarchy tree to another one hidden between others?
• there are different type of values that are printed in a non-descriptive way? (like the value of null, '' empty string, undefined, true/false etc.)
• we try to parse custom, host, native, DOM or CSSOM objects?
• we want to easily extend the behaviour of our debugger?

I hope some answers are answered well with a helpful object like 'g3debug'.

Suppose the following object with circular references:

        obj2
         |__ foo = 'bar'
         |__ loop2 = obj2
         |            :
         |__ another = obj1
                        |__ a1 = 1
                        |__ b1 = 'baz'
                        |__ loop1 = obj1
                        |            :
                        |__ c1 = true
                        |__ d1 = ''
                        |__ e1 = [1,2,3]

The display then is:

1. 0, foo, 'bar'
2. 0, loop2, 'contains a circular reference to object at index 0'
3. 0, another, 'object'
4. 1, a1, 1
5. 1, b1, 'baz'
6. 1, loop1, 'contains a circular reference to object at index 2'
7. 1, c1, 'true'
8. 1, d1, ''
9. 1, e1, [1,2,3]

See it at: http://jsfiddle.net/centurianii/wLJz4/1/

Debug it

• Get a string with newlines \n describing the analyzed object at unlimited depth: g3.debug(obj).toString().
• Get a string with newlines describing only the first members of the analyzed object: g3.debug(obj, 0).toString().
• Get a string with newlines describing the analyzed object up at depth n: g3.debug(obj, n).toString().
• Get an html describing the analyzed object up at depth n: g3.debug(obj, n).toHtml().
• Get an ordered list describing the analyzed object up at depth n in a new window: g3.debug(obj, n).popup('o').
• Get an unordered list describing the analyzed object up at depth n in a new window: g3.debug(obj, n).popup('u').
• Get a preformated description using method debug.toString() of the analyzed object up at depth n in a new window: g3.debug(obj, n).popup('pre') or g3.debug(obj, n).popup().

Depends

None.

Design

Internally, the whole design exploits a variation of the module pattern and builds on a bigger library as it would be revealed in the forthcoming projects.

A note on my library symbol:

It's the $$ internally but if you edit it at the last line window.$$ = window.$$ || {} you can name it whatever you want and call it like so externally!
Now, it's g3, see: Update.

A note on jQuery:

My library is independent but can become a jQuery plugin with a simple assignment!

A note on modularity:

Everything can be broken apart to pieces and become part of different files that are called by <script></script> tags:

<script src="jsutils.js"></script>
<script src="jsdebug.js"></script>
...

The only restriction is to wrap the pieces to anonymous self-invoking functions like so:

(function($$, $, window, document, undefined){
...
}(window.$$ = window.$$ || {}, jQuery, window, document));

Also, read Update.

Issues that was faced:

• handling js primitive types
• browser compatibility
• handling circular references
• testing the dreadful 'StyleSheet' object especially with Mozila's number-attributes or even 'document.body' (see http://stackoverflow.com/questions/957537/how-can-i-print-a-javascript-object)
• representing internally a tree as a single array, what I call the 'flattened tree representation' already successfully tested on my bigger projects :)

Update

v.0.1

1. My namespace moved from $$ to g3 and so all my projects moved from js<project-name> to g3<project-name> meaning: at global object g3 look for member <project-name>, ex.
   
   • g3debug object g3.debug
   • g3utils object g3.utils

v.0.1.1

1. Exploits toString() prototype function when encounters Object and Function members: now it prints a message about an object, like [object CSSRuleList] and just the signature of the function's definition.
   A mesterious thing that was found was this one: after a second execution of the debuger an error was thrown when a property of a child object was evaluaded in the following block:

   try{
      value = obj[property];
   }catch(e){
      str = [-1, 'Error:', e];
      //new record
      tree.push(str);
      break;
   }
   

   it was found that when an empty string was added to the results of value.toString() the failed attempts diminish and the source of errors was lower down at the updated block:

   if(!circular){
      ....
      if(value.toString)
         tmp += value.toString() + '';
      ....
   }
   

2. It was corrected an endless for loop that was started when 0 was passed as the 2nd argument. Now, unlimited search happens only at negative numbers or null.

v.0.1.2

1. Now, handles any native type (number, boolean, string, date, array), functions and objects of any type native, host or custom.
2. A third argument force was added to bypass any boolean result of function g3.utils.isEmptyObject() because it fails on css host objects.

Have fun!