Webstack - JavaScript Debugging

Created by: Lester Caine, Last modification: 15 hours 51 minutes ago

The starting point is to actually verify which version of the JavaScript libraries is being used as much of the debugging would have been avoided had I realised I had cloned an older set of externals code to the rebuilt server. I know for next time and will archive ALL the older versions now that I do have github working to review changes in the code base.

The first bit of debug JavaScript was simply testing versions, but while the jQuery code was correct, it was the Bootstrap3 .js file which was the problem. Perhaps I need to add some actual checks as part of the installer upgrades. Anyway to print to the debugging console in Firefox ...

$(document).ready(function() {
    // Detailed logging
    console.log('jQuery version:', $.fn.jquery);
    console.log('Bootstrap version:', $.fn.modal ? 'Loaded' : 'Not loaded');

This script poked the console when a dropdown was clicked on and just confirmed that the bootstrap code was running.

$(document).ready(function() {
    $('.dropdown-toggle').on('click', function(e) {
        e.preventDefault();
        var $parent = $(this).parent('.dropdown');
        
        // Manual toggle of dropdown
        $parent.toggleClass('open');
        
        // Close other open dropdowns
        $('.dropdown').not($parent).removeClass('open');
        
        console.log('Dropdown clicked', $parent);
    });
});

The basic dropdown button is coded as <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a> but Claude recommended changing the #, which was appearing in the bug reports with href="javascript:void(0);" and while that made no difference, I suspect it is a relevant move when updating the code. Need to check this out further.

Before Claude timed out for the day it came up with the following which I do need to follow up.

(function() {
    console.log(&amp;#39;jQuery Version:&amp;#39;, $.fn.jquery);
    console.log(&amp;#39;Bootstrap Version Check:&amp;#39;, 
        $.fn.modal ? &amp;#39;Bootstrap Loaded&amp;#39; : &amp;#39;Bootstrap Not Detected&amp;#39;
    );
    
    // Trace file paths
    $(&amp;#39;script&amp;#39;).each(function() {
        if (this.src.includes(&amp;#39;bootstrap&amp;#39;) || this.src.includes(&amp;#39;jquery&amp;#39;)) {
            console.log(&amp;#39;Script Path:&amp;#39;, this.src);
        }
    });
})();