Remote debugging a Sencha Touch application

Meanwhile, there are many tools on the market for remote debugging, but remote debugging is still damn tricky.

In this post I'd like to introduce http://jsconsole.com in combination with a Sencha Touch application to you.

jsconsole is a simple JavaScript command line tool. However, it also provides the ability to bridge across to other browser windows to remotely control and debug that window - be it in another browser or another device altogether.

First we need to create a new ID for the device that we want to debug. Jump to http://jsconsole.com and enter the following command in the console:

:listen

After the command ":listen" is entered, the following output appear:

As can be seen in the output, a new ID is generated.

Hint: It is also possible to listen to a predefined device. Just type: ":listen <ID>".

The next thing we have to do is to include the script in our application. The script can be integrated as follows in the "app.json":

  "js": [
    {
      "path": "http://jsconsole.com/remote.js?AE61E3FB-7B1B-4367-8DEC-AD476FC9CA5F",
      "update": "full",
      "remote": true
    },

Now any calls to console.log from your application will display the result in the jsconsole session that is listening to your ID.

It is also possible to inject code into the remote application. As a simple example, write "alert ('test');" in jconsole. On the remote application, a message box with the text "test" should appear. Of course it can also be injected much more complex code.

For this reason, this script should never be used in a production environment!

More information about jconsole is available here.