Comment mettre à jour la barre d’outils du profileur Web pour afficher des données sur une requête ajax

Je suis en train de construire une application qui supporte pleinement le chargement de pages ajax. Après le chargement initial de la page, la navigation sur le site Web ne charge que le contenu et non l’en-tête ou le menu.

L’application entière fonctionne très bien, mais j’aimerais actualiser la barre d’outils du profileur Web pour afficher les informations de la dernière demande ajax.

J’ai reçu le jeton xdebug de l’en-tête de réponse et j’essaie d’étendre la partie javascript pour remplacer le contenu actuel de la barre d’outils mais je n’ai pas encore réussi.

Comment puis-je accomplir cela? Y a-t-il quelque chose de spécifique dont je devrais être au courant?

J’ai finalement “inversé” la méthode de load de l’object Sfjs et il s’avère que ça fonctionne plutôt bien.

Voici la solution

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

Je suis venu avec ma propre version de la barre d’outils.
S’il vous plaît voir les commentaires du code.

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