如何查看當前加載的JavaScript構造的結構？

我開發了一個PHP框架，以應用程序的形式生成ExtJS代碼。如何查看當前加載的JavaScript構造的結構？

這涉及構建完整ExtJS的第一呼叫對象常量，例如：

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

然後在應用程序導航包括事件處理程序經由AJAX該輸出ExtJS的代碼負載PHP文件，然後用此功能執行此代碼：

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

這很好。

不過，我現在有時會錯誤，這些錯誤說syntax error在具有沒有語法錯誤線或有一個missing } in the XML structure當有沒有一人失蹤（據我瞭解JavaScript的結構在那個時候）。

由於我不斷更換的JavaScript的塊是這樣的：

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);

其中：

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(); 
}

主要ExtJS的對象改變其結構。

在Firebug中，我可以查看當前的CSS，HTML DOM和原的Javascript結構，但怎樣才能查看當前的Javascript結構？

來源

2011-03-03 Edward Tanguay