In desktop web browsers, you generally get a web inspector / debug console that lets you do all kinds of fun stuff, including debugging your JS code.
But on mobile, well, no such luck.
In fact, most mobile browsers give you absolutely nothing! Fortunately, there’s a neat trick that fixes everything.
As I said, mobile browsers give you nuttin, honey.
For example, in iOS, you actually need a Mac connected to your iDevice in order to debug JS web apps.
Android isn’t much better. You still need a desktop or laptop, and then all you have to do is use the ADK and connect your Android smartphone in debugging mode and then type cryptic commands and then make a pilgrimage to Google’s HQ, and then sacrifice a chicken or two, and then…
Obviously, mobile browsers are designed to be light and fast, so they just decided to forego stuff that makes developers’ lives easier.
In Google’s defense, they do give you the ability to simulate mobile browsers in desktop Chrome.
But alas, that’s not quite the same thing as debugging natively…
Enter hnldesign’s mobileConsole!
There, we read:
Yup, that’s about right!
Fortunately, all you have to do is grab hnl.mobileConsole.js on github.
Then, include it immediately after the opening <HEAD> tag in your page, like so:
Don’t forget to change the path if you copy/paste the above, and also replace the í with regular i.
Then, reload your web page. TA-DA!
It supports the following goodies:
No elaborate remote debugging setup required – it just works like you expect it to.
Ah, that’s better!