Finding a Javascript error on mobile, when DevTools doesn't show it

[csdude55]

This is a tough one for me, ladies and gents, so I'm again turning to the great and powerful minds of WebmasterWorld :-D

I've done a bajillion or so changes in the last few weeks, and just use Chrome's DevTools to make sure everything is good on desktop and mobile. But today I opened my sandbox on my actual phone, only to find that none of my Javascript is working! Google ads load just fine and static content is fine, but nothing via Javascript works.

There's also another oddity that, when I click anywhere on the page, the screen sorta lights up for a second. I don't remember it doing that before, so this COULD be a CSS issue.

DevTools doesn't show any error messages, though, and when I set it to emulate mobile, everything looks and works just fine. But on both Android and iPhone, nothing works so there's clearly a fatal error.

This issue could be in one of 9 files! I have no clue when it began, so I have no starting point to track it down. I went through all references to .js and .css files and added an ?h=20200226202714 parameter (the actual current time) so that they won't load from cache, but that didn't help. I also ran all of my Javascript through a validator that I found, but the only errors were things like suggestions to use === instead of ==... nothing fatal.

[beautifytools.com...]

After that, other than removing things one at a time I have no clue how to track it down.

Any thoughts on where else to begin?

[Dimitri]

Finding a Javascript error on mobile, when DevTools doesn't show it

It might not be possible, or convenient, but the first thing which comes to my mind is to use try/catch statement.

try {
<your js code>
}
catch(err) {
 document.getElementById("debug").innerHTML = err.message;
}

This should output the error message into a <div> that you would have created with the id="debug" .

This is a raw basic code. To avoid the message to be displayed to visitors, you can also create the div only when your IP accesses the page, and then test in js if the div exists before doing the innerHTML code.

[Dimitri]

A random thought.

Remove adsense from the page, and try it again to be sure this is not the adsense code which is interfering with your own code, and if there is still the blinking effect your reported. (Keep in mind that adsense is not only injecting an iframe to your page, but also rewriting some of the CSS styles).

[csdude55]

Thanks for the idea, @Dimitri! Using try...catch didn't actually find any errors for me, but while poking around I DID accidentally stumble across the problem! I was reusing a variable name without resetting it, so I was getting false positives. That explains no error message; it was a logic error on my end.

I don't know why it worked in the emulator and not on the actual device, though. Obviously they can't be identical in every way, but it's worth the lesson that the emulator is JUST a guideline!

I also came across this website that might have helped had it been a fatal error:

[jsconsole.com...]

You start out by typing :listen, and it will assign a session ID that you paste in to the header of your page. In theory, after you refresh the page, any Javascript error would then show up on their website! It didn't actually work for me on this issue, but since I didn't have a fatal error then I think that's why it didn't work.