Update Symfony 2 Debug Bar on each ajax call

Using JQuery and a bit of javascript, we can update the Symfony 2 debug tool bar on Ajax complete.

 

Posted in PHP, symfony2
5 comments on “Update Symfony 2 Debug Bar on each ajax call
  1. 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/’+ …

    • 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

  2. Schnaaf says:

    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!

  3. Fernando says:

    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:

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

  4. Fernando Arroyo says:

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

Leave a Reply to Fernando Arroyo Cancel reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">