Programatically output variable and object names as literal text strings

Question

I'd really like to track variables without switching between Firebug console windows or clicking around so much, so I want to draw a runtime viewer of variable names and their corresponding values that will display on the page of the app I am building.

I'd like to two functions, show(variableName) and freeze(variableName). They will output both the variable's value and the name of the variable or object as a literal string which will serve as the text label in the viewer. freeze(variableName) is the same as show(variableName) except with a setTimeOut timer for tracking loops.

I'm sure I'm missing something basic, but I haven't found out a way to get the string that comprises the name of a value programmatically so I can use it as a label. I guess I could create the table with hardcoded labels prior to runtime and just populate it with values at runtime, but I really want to generate the table dynamically so it only has those variables I specifically want to show or freeze. Simple functions:

foo1 = "Rock"; show(foo1);

foo2 = "Paper"; show(foo2);

foo3 = "Scissors"; show(foo3);

should output this via getElementById('viewer-table'):

<table>\<tr><td>foo1</td><td>Rock</td></tr><tr><td>foo2</td><td>Paper</td></tr><tr><td>foo3</td><td>Scissors</td></tr></table>

I've tried this solution:

How to convert variable name to string in JavaScript?

and eval() but it's not working for me...I dunno, shouldn't this be easy? Getting frustrated...

Thanks, motorhobo

Answer 1

I am not sure you can actually get the "name" of the variable that is being passed into a function for two reasons:

1) The variable is just an identifier. In fact, you could have multiple identifiers reference the exact same object. You are (generally) passing that reference, not any actual object.

2) The show/freeze function is going to stomp on the identifier name, either through named arguments in the function declaration or by referencing them through the arguments array.

I was trying to think if there was some clever way to use the arguments.callee or the stack property on an exception in Firefox... but I can't see anything that would expose the arguments as you desire.

What I would recommend is to simply add the name of the variable and its value to a simple object, and call one of the various jsDump methods (I prefer the one in QUnit):

function show(o) {
  document.getElementById("viewer-table").innerHTML = QUnit.jsDump(o);
}

// actually use the method
show({"foo1":foo1});

Answer 2

There's no easy way to solve this as the called function simply doesn't know the original name of the variable. You couldn't solve this with reflection even (esp. in javascript) so you'll have to pass the name of the variable to the function too. To follow the link you posted:

function show(varObject)
{
    for(name in varObject)
    {
        alert(name + ": " + varObject[name]);
        // save both name and reference to the variable to a local "to observe array"
    }
}

And call it with

var test = "xxx";
show({'test' : test});

Within the for loop you could add easy variable to a monitor array and update your gui in fixed time intervalls (you can't be notifed when a signle variable changes it's value. You need some kind of global monitor/observer which exactly you're trying to create).