如何查看当前加载的JavaScript构造的结构？

Question

我开发了一个PHP框架，以应用程序的形式生成 ExtJS代码。

这涉及在第一次调用时构建完整的 ExtJS对象文字，例如：

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

然后在应用程序中导航由事件处理程序组成，它通过输出ExtJS代码的AJAX加载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结构？

Answer 1

在firebug的“脚本”标签下是否列出了您的评估脚本？这个当然不是你的应用程序的“当前”状态的表示，但如果我是正确的话，至少有evalled脚本存在。

Answer 2

您也可以为您的eval脚本命名： http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/