10

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:

enter image description here

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

enter image description here

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.

Community
  • 1
  • 1
Нет войне
  • 1,139
  • 1
  • 11
  • 21
  • 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? – Alexander Nied Oct 12 '16 at 03:13
  • @anied That line does debug in Chrome. `debugger;` is a good idea - I will try. – Нет войне Oct 12 '16 at 20:59
  • check out http://stackoverflow.com/questions/11788081/chrome-javascript-debugger-breakpoints-dont-do-anything – programmer 05 Oct 14 '16 at 12:14
  • another way to check is put alert in js file and get the desired value as output in alert – Jay Shah Oct 15 '16 at 07:02

3 Answers3

0

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.

opticon
  • 3,494
  • 5
  • 37
  • 61
  • 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. – Нет войне Oct 12 '16 at 21:00
0

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).

Nick Ribal
  • 1,959
  • 19
  • 26
0

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:

enter image description here

I also get better error descriptions and line numbers:

enter image description here

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

Нет войне
  • 1,139
  • 1
  • 11
  • 21