Simple Object Inspector/Visualizer for JavaScript

Introduction

In JavaScript, everything is an object. But most of the times, nobody cares to give full information on the attributes of any of those objects, thinking 'it must be obvious'. When it is not, this simple utility function will visualize, in a concise and efficient way, the contents of a given object.

Background

When you try to use the code of JavaScript libraries, one of the biggest headaches is the uncertainty of the documentation. Open source is nothing without proper explanations. Very often, you are left wondering about the attributes of an obscure variable or parameter that floats around in the code. It seems that most of the authors think you should know what they thought. The best way to start to understand what is going on and how you can work in your code is to inspect the obscure object(s) instead of searching lousy documentation. This simple utility function will just return a string, formatted in the most efficient way, explaining what the attributes of a given object are and what values are present in them. Very simple and useful. There are some such functions around, but this one does not inflate the return string with lots of unnecessary characters, especially those got from the typeof() JavaScript function that is too verbose. The types of the attributes are converted into single characters that take the shortest space and are still informative. Also, there is an option for the separator string so that you can format the result as you like, for an alert() call or a log string.

Using the Code

The code is very easy to use, just put it inside a <script> tag on your HTML page and call it from any of your functions passing as parameters the object to inspect, the separator string to be inserted between attributes and an optional start string:

function ObjInspect(Obj, sSeparator, sText)
{    
    if (typeof sText == 'undefined') sText = '';
    if (typeof sSeparator == 'undefined') sSeparator = ',';
    
    if (sText.length > 64) return '[MAX LEN!]';
    var r = [];
    for(var p in Obj)
    {
          var t = typeof Obj[p];

        if (t == 'number') t = 'n';
        else if (t == 'string') t = 's';
        else if (t == 'boolean') t = 'b';
        else if (t == 'function') t = 'fnct';
        else if (t == 'null') t = 'N';
        else if (t == 'undefined') t = 'undef';
            
        r.push(sText + p + '[' + t + ']=' + (t == 'object' ? 'obj:' + 
          ObjInspect(Obj[p], sText + ';') : Obj[p]));
        }
    return r.join(sText + sSeparator);
}

The separator string defaults to a comma (","), the best option to generate strings to be used in logging operations. If you use the output for an alert(), pass "\n" to format the string with a line for each attribute. The types of the attributes are shortened to single characters with these values:

• n for numerical
• s for string
• b for boolean
• N for NULL
• fnct for function
• undef for undefined

In the sample code, there is a simple HTML page that shows the usage of this function to display an alert() message to the user. You can access the sample page at http://www.ultramundum.org/obj_inspect.html.

Points of Interest

The resulting strings from other similar functions were bloating my logs, so I shortened the information to the maximum. The result may be more difficult to read and may not cover all situations, but it is efficient and during the debugging of JavaScript, this is important. Also, the type characters are reminiscent of the Hungarian notation method, that I find most efficient and informative. I know you may will not like the formatting of the code, but I think it is more readable in this way. :-)

History

• Rel. 1.0