Debugging javascript on mobile devices

I recently had the need to create a small html5 application for smartphones.
Why html5? Everything is very simple: if you have a mobile version, you can finish the site in a couple of days to the required state or write from scratch (which is not so important) and continue to work on supporting only one version of the code without splashing on different platforms.

To build the application, I used Phonegap (I will not go into the descriptions of the tool, since there are enough articles on Habré). HTML, javascript seems to have been debugged on the desktop, successfully compiled and uploaded to test smartphones, but not everything is so smooth. In the process of testing, I had to face a few glitches inherent only to specific platforms and browsers (Let's say in android 2.1-2.2 if I insert input with an event handler to a specific place in the DOM, the bowser will just fall and the main thing is to do nothing, the androyd and its browser bug, this problem “spoiled my blood a lot”, because in the beginning I didn’t understand what was happening and sinned on the phonegap curve until I connected with the debager and didn’t see what was happening there).

the problem got pretty real, how to see what happens in the mobile browser, what errors arise and when. I found a solution through window.onerror, but for me this approach is good for catching bugs in a long period, when something is not working for you right now, I want to have more convenient tools at my disposal
')
For debugging html applications under android, Eclipse will work well (most likely you use it to build the application). If you have installed android sdk and a plugin for eclipse (if not, by clicking on the link you can fix it), then in the views you can find logCat, which, when connected to the device, will display all received information, including console.log () messages javascript output + output all actions performed with the phone, it helps to debug if there are any problems with event handling.
LogCat can by the way be used without an eclipse, this is the android sdk tool, but for me this option is not quite convenient.

There is a good weinre utility for the iphone , by the way, the guys from phonegap recommend it. More konkteno with it can be found on the link, but the essence is this: you download the program, start and it starts to listen to the port of the computer. In the code of your application, add js, which loads the server running by you, connects to it and starts communicating with the application. Further, all debugging occurs according to the standard script in the chrome debugger. which runs the program, IMHO is the most convenient option. A quick start guide:

1. download and unpack the archive
2. install
3. go to the daddy ~ / .weinre / (if we don’t create it), create a server.properties file with this text
   

   boundHost: -all- httpPort: 8081 reuseAddr: true readTimeout: 1 deathTimeout: 5 

   Of course, you can change the settings for yourself.
   
4. then we will learn the ip of our machine and add this line to our application. This will load the js code to communicate with the weinre server. Accordingly, it is necessary that the phone and computer were in the same network and abc replaced with your ip. Run the application in the phone or simulator and start debugging in a familiar environment.

It seems to me that it would be possible to experiment and inject the code that it issues into the application under android, although I didn’t get my hands on digging into js in order to understand what is being used there.

In conclusion, I would like to tell you about another interesting way, I recently came across it, the principle of work is similar to weinre. There is such a site jsconsole.com , which provides a tool with which you can reach html on a remote device and receive messages from console through log.log, as well as work with its DOM tree. This is certainly not a full-fledged debager, as is the case with wienre, but the simplicity and accessibility of the method makes it worth paying attention to it! The site has excellent documentation and a couple of training videos, so no one should have problems using it.
If in a nutshell, you need to go to the site, enter the ": listen" command, copy the issued script into your site or application and voila - everything works.

Of course, not all possible options, I came across a description and others, but the difficulty of using them made me exclude them from the list. If someone can add a worthy candidate to the list, then I'm all for it! (I will include it in an article with the author's copyright)