如何更新web探查器工具栏以显示有关ajax请求的数据

How to update the web profiler toolbar to show data about an ajax request

本文关键字：显示 ajax 数据 请求 工具栏 何更新 更新 探查 web      更新时间：2023-09-26

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

整个应用程序运行良好，但我想刷新web探查器工具栏，以显示最后的ajax请求信息。

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

我怎样才能做到这一点？有什么具体的事情我应该知道吗？

我最终对对象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);
    }
})

我带来了自己版本的工具栏
请参阅代码的注释。

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

相关文章：