如何更新 Web Profiler 工具栏以显示有关 ajax 请求的数据

Question

我目前正在构建一个完全支持 ajax 页面加载的应用程序。初始页面加载后，浏览网站仅加载内容，而不加载标题或菜单。

整个应用运行良好，但我想刷新 Web Profiler 工具栏以显示最后的 ajax 请求信息。

我从响应头中获得了 xdebug 令牌，我正在尝试扩展 javascript 部分以替换工具栏的当前内容，但我还没有成功。

我怎样才能做到这一点？有什么需要特别注意的吗？

Answer 1

我最终“逆向工程”了对象Sfjs 的load 方法，结果证明它工作得很好。

解决办法

// Query the proper URL
$.get('/my-url', function (data, status, xhr) {
    // Get the xdebugToken from response headers
    var xdebugToken = xhr.getResponseHeader('X-Debug-Token');

    // If the Sfjs object exists
    if (typeof Sfjs !== "undefined") {

        // Grab the toolbar element
        var currentElement = $('.sf-toolbar')[0];

        // Load the data of the given xdebug token into the current toolbar wrapper
        Sfjs.load(currentElement.id, '/_wdt/'+ xdebugToken);
    }

})

Answer 2

我带来了我自己版本的工具栏。
请看代码的cmets。

$(function () {
    /**
     * When we make an ajax request, a new debug toolbar is created on top of the previous one, so that we can
     * keep track of every request made to the page.
     *
     * @see http://funktion-it.co.za/2012/12/update-symfony-2-debug-bar-on-each-ajax-call/
     * @see https://gist.github.com/pinano/5677062
     * @see http://stackoverflow.com/questions/17646127/how-to-update-the-web-profiler-toolbar-to-show-data-about-an-ajax-request
     * @param  event
     * @param  XMLHttpRequest
     * @param  ajaxOption
     */
    $(document).ajaxComplete(function (event, XMLHttpRequest, ajaxOption) {
        if (XMLHttpRequest.getResponseHeader('x-debug-token')) {
            // window.location.protocol + '//' + window.location.hostname +
            // the url with the debug token
            var url = '/app_dev.php/_wdt/' + XMLHttpRequest.getResponseHeader('x-debug-token');
            // If the Sfjs object exists
            if (typeof Sfjs !== "undefined") {
                // create a new id
                var id = 'sfwdt' + XMLHttpRequest.getResponseHeader('x-debug-token');
                // when the first ajax call is made
                if ($('.sf-toolbar').length === 1) {
                    // clone the default debug toolbar
                    var clone = $('.sf-toolbar:eq(0)').clone(true);
                    // change the id of the clone (you cannot have the same id twice)
                    // fmake sure the toolbar containing info about the ajax call
                    // is the one on the bottom
                    clone.attr('id', id).find('.sf-toolbarreset, .sf-minitoolbar').css('bottom', '+=0px');
                    // hide the main toolbar (for improved visual experience)
                    $('.sf-toolbar:eq(0)').find('a.hide-button').click();
                    // and mage sure it will be located on top of the new toolbar
                    $('.sf-toolbar:eq(0)').find('.sf-toolbarreset, .sf-minitoolbar').css('bottom', '+=38px');
                    // append the clone after the main toolbar
                    // append after because you want the main toolbar to
                    // continuously be updated with each ajax call
                    $('.sf-toolbar:eq(0)').after(clone);
                } else {
                    // if a repeated ajax call
                    // just update the second toolbar (not the default)
                    $('.sf-toolbar:eq(1)').attr('id', id);
                }
                // Load the data of the given xdebug token into the current toolbar wrapper
                Sfjs.load(id, url);
            }
        }
    });
});