Tips for debugging js and/or jQuery

[NickMNS]

I'm working on a page updating all kinds of stuff, when suddenly I realized that a feature I built earlier is no longer working. By suddenly I mean that it could have not been working for a while. But it did work before, but something I since I last checked is causing the bug. The real problem is that the bug is not throwing any errors in the console so there is no way to know the root cause is.

To complicate matters, the code in question is part of my navbar and is included on almost all the other pages, where it works just fine.

Does anyone have any recommendations or tips on how to find the source of problem.

I have tried commenting out various blocks of code, but no luck.

The code in question is jQuery, and it appears on page created with html5, CSS3, Bootstrap V4a6, and Python Bottle.py. I'm testing the page on my localhhost with the Bottle.py built-in server.

[NickMNS]

To answer my own question (at least partially).
I used console.log('some message'). This prints a "some message" to the browser console (eg: inspect element in chrome).
By inserting it at various points in the script I was able to track down the line of code causing the problem. In my case I have narrowed it down to $.get() which is not firing. But as I said it works on other pages, so it is nothing with $.get itself but some interaction with something else on the page.

The search goes on....

[keyplyr]

Both Firefox & Chrome have Developer Tool addons that *may* support jQuerry debugging.

[NickMNS]

Thanks, I'm using firefox, but I now realize that the problem is not jQuery related, at least not directly. There seems to be an issue with bottle.py, the get request is sent to the server but for some bizarre reason it isn't sending the correct request. It is so strange that it has to be something stupid like misplaced curly brace.

[NickMNS]

Found it! ARRrrrgh!
One of the changes I made before realizing there was a problem was to change the url structure of the page where the problem was occurring, I added slashes to look like this:

example.com/widget/green/small

Now for some reason this changed how the server interprets the the ajax requests. My original request looked like this:

$.get('search-modal', function () {

Since the change, the server was taking 'search-modal' and appending to the end of the page's url. But by adding a slash in front so '/search-modal' it was now requesting the correct url. On pages where the url only has one slash such as example.com/login this problem did not arise and adding the leading did change anything.

This was entirely a Bottle.py issue.

So solved. Time for a beer...

[keyplyr]

Good sherlocking :)