Debugging custom frontend scripts with WooCommerce variation AJAX?

• Browser Developer Tools: Start with your browser's DevTools (e.g., Chrome, Firefox). Use the "Console" tab to look for any JavaScript errors immediately after a variation change. The "Network" tab is crucial to verify if the AJAX request for variation data is sent and returns a valid response (status 200). Pay attention to the "Sources" tab to set breakpoints and step through your custom scripts and even WooCommerce's native scripts for thorough JavaScript debugging.
• Conditional Script Disabling: The most direct way to confirm a conflict is to systematically disable your custom theme's JavaScript files. You can do this by commenting out their enqueue calls in your theme's `functions.php` file, or by using a plugin like "Health Check & Troubleshooting" which provides a "Troubleshooting mode" to disable themes/plugins without affecting live visitors. Re-enable them one by one until the issue reappears, indicating the conflicting script.
• Event Listener Inspection: In DevTools, on the "Elements" tab, select the product variation dropdown or the product form itself. In the right-hand panel, navigate to the "Event Listeners" tab. This will show you all JavaScript event listeners attached to that element and its ancestors. Look for any custom listeners that might be overriding or interfering with WooCommerce's native `change` or `submit` handlers related to variation selection, which can impact frontend performance.
• Strategic `console.log` and `debugger;` statements: Insert `console.log('My script is running here');` statements at key points within your custom scripts, especially those that interact with product forms or AJAX events. For more intricate debugging, place `debugger;` statements to pause script execution and inspect the call stack, scope, and variable values at that exact moment. This is particularly useful within callbacks for `found_variation` and `reset_variation`.
• WooCommerce Debugging Constants: Ensure `WP_DEBUG` and `SCRIPT_DEBUG` are set to `true` in your `wp-config.php` file on a staging environment. This can sometimes reveal additional errors or non-minified script versions, making debugging easier.

Regarding checking the event listeners, I actually found a custom debounce function attached to the variation dropdown's change event that was unexpectedly delaying WooCommerce's update logic.