How can I view the structure of the JavaScript construct currently loaded?

I've developed a PHP framework that generates ExtJS code in the form of an application.

This involves building the full ExtJS object literal on the first call, e.g.:

Ext.onReady(function(){
    menuItemStart = new Ext.Panel({
        id: 'panelStart',
        title: 'Start',
        html: 'This is the start menu item.',
        cls:'menuItem'
    });
    ...

and then navigation in the application consists of event handlers which load PHP files via AJAX that output ExtJS code, and then execute this code with this function:

function loadViewViaAjax(url, paramTargetRegion) {
    Ext.Ajax.request({
        url: url,
        success: function(objServerResponse) {
            var responseText = objServerResponse.responseText;
            var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
            while(scripts=scriptsFinder.exec(responseText)) {
                eval(scripts[1]);
            }
        }
    });
}

This works well.

However, I now sometimes get errors which say syntax error on a line which has no synta开发者_开发百科x error or that there is a missing } in the XML structure when there is not one missing (as far as I understand the JavaScript structure at that time).

Since I am constantly replacing chunks of JavaScript like this:

var start_info_panel = new Ext.Panel({
    padding: 10,
    style: "margin: 10px",
    width: 300,
    html: 'This is an <span id="internal_link_001" class="internal_link">internal link to modules2</span>.<p>'
});
replaceComponentContent(targetRegion, start_info_panel);

where:

function clearExtjsComponent(cmp) {
    var f;
    while(f = cmp.items.first()){
        cmp.remove(f, true);
    }
}

function replaceComponentContent(cmpParent, cmpContent, clear) {
    clear = (typeof clear == 'undefined') ? false : clear;
    if(clear) {
        clearExtjsComponent(cmpParent);
    }
    cmpParent.add(cmpContent);
    cmpParent.doLayout();
}

The main ExtJS object is changing its structure.

In Firebug I can view the current CSS, HTML DOM, and the original Javascript structure, but how can view the current Javascript structure?

Aren't your evalled script listed under the "scripts" tab in firebug? This ofcourse is no representation of the "current" state of your app but at least the evalled scripts are there if i'm correct.

You can name your eval scripts as well: http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/