Display names of variables (or everything) in window[], html/javascript

Question

I'm trying to make a poor man's Firebug inside of an HTML page. I created an external script that is placed somewhere in the target page. Initialized with <body onload="monitor_init()">. It also brings in a style sheet to absolutely position a partially-opaque table with the results.

So it runs through everything (values) in window[], displays it in one column, as well as the typeof(window[i]) in another column. I'd also like to have another column that displays the name of the variable or object.

function monitor_init()
{
    var css = document.createElement("link");
    css.setAttribute("href","jsmonitor.css");
    css.setAttribute("rel","stylesheet");
    css.setAttribute("type","text/css");
    document.getElementsByTagName("head")[0].appendChild(css);
    var temp = document.createElement("div");
    temp.setAttribute("id","monitor_box");
    var temp2 = document.createElement("table");
    temp2.setAttribute("id","monitor_output");
    temp.appendChild(temp2);
    document.body.appendChild(temp);
    monitor();
}

var monitor_speed = 100;

function monitor()
{
    while(document.getElementById("monitor_output").childNodes.length > 0)
    {
        document.getElementById("monitor_output").removeChild(document.getElementById("monitor_output").lastChild);
    }
    for (i in window)
    {
        if (["function","undefined"].indexOf(typeof(window[i]))!=-1)
        {
            continue;
        }
        // This is where I tried to make a first column displaying the name, couldn't find anything that worked.
        // Disregard the .name, that was just last-ditch stuff
        //var temp = document.createElement("tr");
        //var temp2 = document.createElement("td");
        //temp2.appendChild(document.createTextNode(window[i].name));
        //temp.appendChild(temp2);

        var temp = document.createElement("tr");
        var temp2 = document.createElement("td");
        temp2.appendChild(document.createTextNode(typeof(window[i])));
        temp.appendChild(temp2);

        var temp2 = document.createElement("td");
        temp2.appendChild(document.createTextNode(window[i]));
        temp.appendChild(temp2);
        document.getElementById("monitor_output").appendChild(temp);
    }
    setTimeout("monitor()",monitor_speed);
}

By using typeof I was able to skip displaying the values of functions and some undefined things. I was hoping that if I could get access to the name I could also skip stuff like the history, location, and other things that aren't JavaScript numbers, strings, array objects, etc., i.e. global variables that I created in other scripts on the page.

Any reason you can't just use Firegut Lite? getfirebug.com/firebuglite — Craig M
– Craig M, Commented Jul 14, 2011 at 23:53

nnnnnn · Accepted Answer · 2011-07-14 23:58:37Z

1

You haven't really asked a specific question, but I think you're trying to say "How do I get the name of each property of window?"

In your existing code you're using a for-in loop to go through the various properties. What I think you need to know is that your index variable will hold the name of the (current) property:

for (i in window) {
  alert("Property name: " + i);
  alert("Property value: " + window[i]);
}

answered Jul 14, 2011 at 23:58

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user845573 Over a year ago

Thank you. I somehow forgot that 'i' contained each of the keys to the associative array.

digitalbath · Accepted Answer · 2011-07-14 23:58:01Z

1

The looping construct you're using will provide this information:

for (i in window) {
    // at the point, i is a string containing the name of the property
    // window[i] contains the value of that property
    document.write('window.' + i + ' is ' + window[i] + '<br>');
}

but as another poster asked - why can't you use firebug lite?

answered Jul 14, 2011 at 23:58

digitalbath

7,3842 gold badges19 silver badges15 bronze badges

1 Comment

user845573 Over a year ago

I wanted to try some more advanced and specific tracking based on this simple functionality. Thanks.

Collectives™ on Stack Overflow

Display names of variables (or everything) in window[], html/javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related