How can I hit breakpoints (and see error line numbers) when debugging javascript on Android?

Question

I'm trying to follow these instructions for debugging android javascript.

I am aware of How can I debug javascript on Android?, but it's not clear to me how (or if) I can hit breakpoints - either using Chrome on the Android device, or the Android browser.

I can see and 'inspect' the device OK:

But breakpoints don't get hit, nor can I see line numbers on the errors in the console:

Between these two problems, I'm not getting much useful information from the debugging experience! I have tried going to 'about:debug' in the android browser, and do see the debug options appear.

I will add that the js I am debugging works fine in the latest Chrome on the same Android device.

Weaken

Are you sure that none are hitting? The line you have marked above is on the start of a IIFE-- not sure if that would debug ever. Also, have you tried dropping a debugger; statement in your code to see if the tools will break there? – Parasitic

@anied That line does debug in Chrome. debugger; is a good idea - I will try. – Polynices

check out #11788581 – Backset

another way to check is put alert in js file and get the desired value as output in alert – Wellington

Answer 1

First off, it seems like there are a bunch of syntax errors that may be preventing mustache.js from executing at all - see if you can take care of those first.

I'd try setting a breakpoint on the next line down - line #9 - to see if anything in that IIFE is running at all.

Fetch

This is some JS that works fine in the latest Chrome on the same device - these syntax errors only appear on the Android browser. I've tried setting breakpoints in a whole bunch of places... pretty sure I'd have hit one if they were able to be hit at all. That one is only supposed to be illustrative. – Polynices

Answer 2

Assuming you are using a module bundler (such as Webpack) in development (based on port 8080 in your screenshot), most likely the code you're trying to debug is executed via eval. In which case by the time you can see it in the devtools, it has already run.

You can either use the debugger statement in your code, or running in production mode - where there's a real script file being executed. In both cases, you should attach the remote debugger first, and only then navigate to your page (or refresh it).

Efthim

it's just 8080 'cos that's the default port of npmjs.com/package/http-server – Polynices

Answer 3

I have now tried the same thing again, and this time didn't experience the problem. Unfortunately I can't put my finger on what the problem was exactly, as due to my dev machine dying I am running a new windows 10 installation, and potentially a different version of the Android SDK and ADB. The phone and android browser haven't changed.

Anyway, I can now set and hit breakpoints as I'd expect:

I also get better error descriptions and line numbers:

FWIW, the only problem that needed fixing was changing some 'let' declarations to 'var'.

Weaken