Debugging Mobile with jsconsole

Web development for mobile devices has several major limitations.

There are strongly divergent screen resolutions (from iPad to the first generation of Blackberry), multiple browsers (webkit but also IEMobile, Firefox, Opera mini and mobile, etc.) and multiple operating systems (Windows Phone, Android, iOS, Palm, Blackberry). Each device has its own constraints and performance.

When it comes time to debug all this, the task is not easy because there are only few tools permitting it – and because of the size of the screen, even then we are not out of the woods.

Dragonfly for Opera already offers a native solution for remote debugging, but this technique is quite limited, especially when one has to take into account other mobile / browsers. Several phone manufacturers also offer emulators, but they don’t compare to the use of a real device offering  “feel and touch” – especially on the side of the web-client programming, and especially JavaScript.

It is  to help us in this perilous task  that jsconsole was created.

A JavaScript Console for Mobile

Go to the following address: http://jsconsole.com.

Jsconsole will allow you to debug a JavaScript application remotely through a console located on your desktop, which will be used to debug directly on your phone. To make an analogy, it is as if you were using the Firebug JS console remotely.

On the one hand, the tool will retrieve every call to console.log from your mobile and will display it on your desktop.

On the other hand, jsconsole will allow you to inject JavaScript code directly into your pages.

Understand that this tool is normally used only in the development phase or debugging and should always be removed prior to the production start of your website.

Initialize jsconsole

The first step is to create the link between your site and jsconsole. To do this, enter the first command in the console:

:listen

This command will return an identifier and a tag <script> to integrate to your website. The code you receive will look like this:

 

Now you just have to add this line to the desired location in your HTML code (in the head, for example).

If you end up using this tool frequently to avoid having to change the tag <script> for each test, you can reuse the same identifier by specifying the following command:

:listen FAE031CD-74A0-46D3-AE36-757BAB262BEA

Similarly, you can also specify the identifier you want to use. For example:

:listen party

That goes along with this <script>:

<script src="http://jsconsole.com/remote.js?party"> </ script>

Once this code is inserted on your site, you can test the connection with a single line in your web page, for example:

<script type="text/javascript">
console.log ("Connection");
</ script>

Then log on to your site using your mobile and make sure that you have received notification in the console on your desktop.

Send directives from jsconsole

Once the connection is established correctly, you can send any line of JavaScript code on your mobile. To do this, you can simply type the line of code to run directly into the console.
For example:

document.innerHTML = "Hello World !";

You can also use your regular libraries, for example with jQuery installed on your site, you could send this piece of code:

$ ("# myElement") fadeOut ();

Conclusion

That’s an overview of a tool that is more than necessary when we program for mobile devices, and especially when we use the functions that are linked to them. Jsconsole also has other interesting features that are less important. For this, I invite you to read the documentation the jsconsole site.

Frequently Asked Questions about Debugging Mobile with JSConsole