Saturday 23 February 2019

How to find a problem when Chrome Developer Tools doesn't show one

I've been learning how to use the Chrome Developer Tools (CDT) for debugging.

I'm trying to add some functionality to an application written in HTML/Javascript/jQuery/MySQL. Basically it loads an Ajax created table from MySQL using jQuery, along the way it checks a cookie for a numeric list representing the columns to toggle() on or off.

When first loaded it checks the cookie and dutifully loads the requested columns. But when I refresh the table (not a page reload) and it again reads the cookie it momentarily shows the columns but then immediately toggles them off again.

Walking through the javascript with CDT brings me out of my code and into jQuery v3.3.1 at the line that starts //callback or about line number 9523 of the uncompressed version. After bouncing around a bit it stops and my page is displayed without the additional columns. But no errors are shown in CDT and nothing it does "looks" wrong to my eyes.

I know the first thing many of you want is the javascript, but its quite a large program so I don't know how to provide a non-working, working model if you get the drift. Besides I'm more interested in learning to use CDT to figure out problems like this. But I don't know what to do next, I've watched a bunch of YouTube videos, I've asked a few friends, but none of that is helping much.

It appears now that the problem of it "flashing" is happening in the 'complete' portion of the callback function @ line 9548 in jQuery-3.3.1.js. Isolating it by commenting it out makes things worse, nothing seems to work. So I'm back to square one.

What should I be looking at and for in CDT?



from How to find a problem when Chrome Developer Tools doesn't show one

No comments:

Post a Comment