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.
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.
Display performance timing data in a form easier to understand. View resource timing (for android) and XHR calls information sent by your devices.
Inspect localStorage, cookies, stylesheets, scripts and images.
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.
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/