Debug javascript on mobile devices

    Recently I had a need to create a small html5 application for smartphones.
    Why html5? Everything is extremely 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 support only one version of the code without spraying onto various platforms.

    To build the application, I used Phonegap(I will not go into descriptions of tulza, as there are enough articles on the Habré). HTML, javascript seems to have been debugged on the desktop, successfully assembled and uploaded to test smartphones, but not everything is so smooth. In the process of testing, I had to encounter several glitches peculiar only to specific platforms and browsers (Say in android 2.1-2.2 if you insert input with an event handler in a certain place in the DOM, the browser will just crash and the main thing is there’s nothing to be done, it's pure a bug of the android and its browser, this problem “spoiled me a lot of blood,” since in the beginning I did not understand what was going on and sinned on the phonegap curve until I connected with a debugger and looked what was happening there).

    the problem arose quite real, how to see what happens in a mobile browser, what errors occur and when. At the midpoint I found a solution through window.onerror, but for me this approach is good for catching bugs in a long period, when something doesn’t work for you right now, I want to have more convenient tools

    for debugging an html application for android Eclipse is good (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 linkthis can be fixed), then in the views you can find logCat, which when connected to the device will display all the information received, including console.log () messages displayed by javascript + all actions performed with the phone are displayed, this helps to debug if there is some problems with event handling.
    LogCat can be used by the way even without an eclipse, it is an android sdk tool, but for me this option is not entirely convenient.

    There is a good utility weinre for iphone, by the way, guys from phonegap recommend it. You can read more about it by reference, but the essence is this: you download the program, start it, and it starts listening to the computer port. Add js to the code of your application, which is loaded by the server you are running, connects to it, and begins to communicate with the application. Further, all debugging occurs according to the standard scenario in the chrome debugger. which runs the program, IMHO this is the most convenient option. Quick Start Guide:
    1. Download and unpack the archive
    2. install
    3. go to daddy ~ / .weinre / (if we don’t create it) we create a server.properties file with this text
      boundHost:    -all-
      httpPort:     8081
      reuseAddr:    true
      readTimeout:  1
      deathTimeout: 5
      
      settings of course you can change for yourself.
    4. then we find out the ip of our machine and add to our application this line will load js code to communicate with the weinre server. Accordingly, it is necessary that the phone and the computer are on the same network and replace abc with your ip. We launch the application on the phone or the simulator and begin to debug in the familiar environment.


    It seems to me that it would be possible to experiment and implement the code it produces into an android application, although I haven’t gotten my hands around digging into js so far to understand what is used there.

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

    Of course, these are not all possible options, I came across a description of others as well, but the difficulty of using them made me exclude them from the list. If someone can supplement the list with a worthy candidate, then I am only for! (I will include it in the article with copyright of the author)

    Also popular now: