Home/ Questions/Q 6135713
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T17:30:44+00:00

I’m trying to make a poor man’s Firebug inside of an HTML page. I

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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]);
}
    • 0