One of the things I have to do when developing a new tracker for the Roundup Issue Tracker is test on mobile browsers. When I run into issues, I used to hook up a remote debugger. This usually requires finding a USB cable as wifi is less reliable.
I really wish that mobile browsers had a native console that I could use to see console.log output and javascript errors. While not native, MobileConsole by hnldesign provides quite a bit of power by including one script and one style tag in my HTML page. At 45k uncompressed (17k gzipped) it's sized between the smallest and largest mobile consoles I found.
It can be seen at the bottom of the web page:
It supports the usual console output functions (error, ... debug). Plus it supports console.time/timeEnd and console.trace along with the group family. It also displays objects collapsed and allows you to toggle them open. The console can be resized allowing you to reduce the screen real-estate used on a mobile device.
It has some areas for improvement:
- it only opens objects one level deep. So an array in an object is displayed but you can't expand the array further to get access to its elements.
- grouping is not nested or collapsible. But this is noted as an area for improvement.
If you do a lot of logging, you might want to download the library, open your editor, and apply a change that reduces redraws triggered by console output.
One thing to note is that running commands in the console will not work if you are using a Content Security Policy (CSP). Any CSP that does not allow 'unsafe-eval' will prevent console commands from running. But at least you will see the error in the console 8-).
There are other mobile consoles as well:
- mobileConsole is the smallest at 5k, but appears to only support console.log. Documentation is sparse and there is no demo.
-
B1naryStudio js-mobile-console - is 6k in size. It has methods to show/hide, enable auto-opening on error, and create command aliases.
However, in its demo, I had issues with it displaying
document.querySelect('body'). All it showed was an empty object{}. - Eruda is a console with a size of 130k gzipped. However, with that size, you get an element browser, network monitor, and other tools you know from your desktop browser's DevTools. It also has a plugin ecosystem. It properly handles console.group as a toggle. Also you can submit multi-line scripts. I think the only thing Eruda is missing is a debugger 8-).
Using hnldesign's MobileBrowser I was able to figure out why my javascript was crashing. If your hardware can handle it though, Eruda has many more features to make debugging on mobile device easier. Now the only time I need to find a USB cable is when I have to debug using breakpoints.
Do you have recommendations for other tools or techniques for debugging on mobile devices? If so leave them in the comments.
Top comments (0)