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.
It is to help us in this perilous task that jsconsole was created.
Go to the following address: http://jsconsole.com.
On the one hand, the tool will retrieve every call to console.log from your mobile and will display it on your desktop.
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.
The first step is to create the link between your site and jsconsole. To do this, enter the first command in the console:
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:
Similarly, you can also specify the identifier you want to use. For example:
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:
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
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 ();
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.