神刀安全网

Another Tool to Make Mobile Web Debugging Easier

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!

Another Tool to Make Mobile Web Debugging Easier

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.

Another Tool to Make Mobile Web Debugging Easier

To try it in your phone: http://liriliri.github.io/eruda/

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Another Tool to Make Mobile Web Debugging Easier

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址