Monitoring all AJAX requests made by JQuery on WooCommerce

Is there is a way to monitor all Ajax requests made using JQuery on WooCommerce?

I’m trying to detect which Ajax event on WooCommerce cart page causes an infinite loop sometimes on My WordPress webSite.

Answer

You can use:

• ajaxSend() that attach a function to be executed before an Ajax request is sent,
• ajaxComplete() that register a handler to be called when Ajax requests complete.

Both gives details related to the Ajax event that is triggered on a readable XHR Object in your browser Javascript console.

Here is a code example, that displays Ajax triggered request details:

add_action( 'wp_footer', 'monitor_jquery_ajax_requests' );
function monitor_jquery_ajax_requests() {
    ?>
    <script>
    jQuery(document).ajaxSend( function( event, xhr, options ) {
        console.log('------- ' + event.type + ' -------');
        console.log(xhr);
        console.log('------------------------');
    }).ajaxComplete( function( event, xhr, options ) {
        console.log('----- ' + event.type + ' -----');
        console.log(xhr);
        console.log('----------------------------');
    });
    </script>
    <?php
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

After checkout page load for example you will get something like:

Related: Monitoring all AJAX requests made by JQuery?