Mobile debugging for web developers is not as easy as it is on desktop side. It’s fine on development stage since we have remote debugging tools such as Vorlonjs or weinre. However, once deployed, bugs can be easily found because it is tested by many others. When my boss asked me why the page stopped responding on his phone, I stared at the screen and found nothing useful. There’s no F12! And of cause, the famous “But it works on my machine!” didn’t help at all. The only thing I can do is to grab the phone and go back to my computer to debug it. And that’s really a bad experience, especially if it happens many times.
So why can’t we have a mini version of DevTools on mobile phones? It’s totally possible to build one. Then I started the creation of Eruda, a console for mobile browsers. It took me about two weeks to finish the first version. I used it in my projects immediately, and it worked so well that I don’t need tools like weinre anymore. What’s best? I can deploy it directly to production environment and enable it via a url query if something goes wrong, nice!
Currently Eruda has eight default panels for different use purposes.
Console
This panel will override log, error, info, warn, dir, clear, time, timeEnd methods of window console object. It also catches global error, prints it out with error stack. Of course, entering JavaScript code to be executed in global scope is well supported.
Elements
Inspect the dom tree and its corresponding styles and attached listeners. What’s better then other remote debugging tool? It’s possible to select a particular element and highlight it from page directly.
Network
Display performance timing data in a form easier to understand. View resource timing (for android) and XHR calls information sent by your devices.
Resources
Inspect localStorage, cookies, stylesheets, scripts and images.
Sources
Display formatted JavaScript, css, json data.
Info
By default, it displays url and browser user agent. You can call its api to add more useful information such user id to help checking user logs.
Snippets
Console panel allows you to input JavaScript code. But I don’t think it’s a nice experience coding with mobile keyboards. I prefer to write small test snippets on desktop editors and use this panel to trigger them.
Features
I once encountered a bug caused by webview not enabling localStorage. That’s why I added this panel to detect features supported by browser. Thanks to Modernizr project, it only took me a few hours to finish it:)
It is possible to enhance Eruda with more features by writing plugins. I created a plugin to switch between test and production environment. It really improves the development efficiency a lot.
The tool is now an open source project in Github: https://github.com/liriliri/eruda. Let me know if you have any idea about how to make it a better debugging tool, I really appreciate it.
To try it in your phone: http://liriliri.github.io/eruda/
