Comments on: Update Symfony 2 Debug Bar on each ajax call

By: Fernando Arroyo

Fernando Arroyo — Tue, 28 May 2013 12:41:35 +0000

What if I’m developing an ajax application and I have a page with a number of ajax requests and I want to debug them all? The provided method overwrites all previous requests, so we end up only with the last one. If you use the following code, the debug bar for each request piles up on top of the previous one, so it might not be super beautiful, but it’s super useful:

$(function() {
$(document).ajaxComplete(function(event, XMLHttpRequest, ajaxOption) {
if(XMLHttpRequest.getResponseHeader(‘x-debug-token’)) {
$.get(
window.location.protocol+’//’+window.location.hostname+’/app_dev.php/_wdt/’+XMLHttpRequest.getResponseHeader(‘x-debug-token’),
function(data) {
$(‘body’).append(data);
$(‘.sf-toolbarreset’).each(function(i) {
$(this).css(‘bottom’, i>0?’+=38px':’+=0px’);
});
$(‘.sf-minitoolbar’).each(function(i) {
$(this).css(‘bottom’, i>0?’+=38px':’+=0px’);
});
}
);
}
});
});

By: Fernando

Fernando — Tue, 28 May 2013 10:38:51 +0000

If you need to see multiple debug bars, one per request (i.e. debugging a page with several ajax requests AND you want to see what happened on every request), one way to display all the generated debug bars is:

By: Schnaaf

Schnaaf — Sun, 12 May 2013 08:08:02 +0000

As of jQuery 1.8, the .ajaxComplete() method should only be attached to document.

To prevent the error – TypeError: XMLHttpRequest is undefined – I changed:

$(“body”).ajaxComplete

in:
$(document).ajaxComplete

Great snippet indeed!

By: Sacheen Dhanjie

Sacheen Dhanjie — Wed, 06 Mar 2013 10:44:37 +0000

Hi,

In my development environment, when developing i use the .htaccess to control the application environment,
thus eradicating the need to add the app_dev.php, also when in production mode, we don’t really want to show the debug bar :-D

By: Bence Meszaros

Bence Meszaros — Thu, 17 Jan 2013 15:57:27 +0000

Brilliant idea! It is a must have, if you develop ajax apps.

I only have one small comment. At symfony 2.1 its better to remove the .sf-toolbar div:

$(‘.sf-toolbar’).remove()

And maybe meaningful to call the app_dev.php instead of the prod environment:

… +window.location.hostname+’/app_dev.php/_wdt/’+ …