If you are a web developer, the strangely named MIHTool (MIH for “make it happen”) will make you happy. If you mostly work on mobile web applications, this will change your life. It’s the missing developer tool you wanted for so long, and Apple didn’t give you. MIHTool really does makes it happen.
You say “Wait, you’re trolling. This can’t possibly be true or I would know about it?”. Well, what can I say. In all fairness, the app isn’t very old (a couple weeks). Every week, the developer is continuing to add new exciting features. What kind of features, you ask?
The high-level overview
- An inline Web Inspector (yes! running on the actual iOS device!)
- A remote Web Inspector (weinre)
- A live view-source style web editor (just because you can)
- Full featured remote control through an HTTP server
- Full screen and iPhone size emulations
- WebKit Debug Borders (layers) (!)
- Webkit Repaint Counter(Paint Rects)
- User agent switching
- Developer bookmarklets (Firebug, YSlow, JS Console, WhatFont…)
- Cache disabling and pruning
Let’s dig into the four most important features.
1. Web inspection done right
Of course you can always debug the UIWebView of MIHTool using iOS 6′ new remote debugging feature, but only if you happen to run Mac OS X with Safari 6. But didn’t you secretly wish you could open these dev tools right on the actual device you are testing on? Well now you can. MIHTool bundles weinre and makes it accessible right within the app. It’s a brilliant hack that allows you to debug many aspects of your site directly. And for those that develop on Windows and Linux and don’t want to fiddle with the small screen, weinre also runs the classical way – “(ip)/devtool/client” will open weinre on the Chrome of your choice.
2. Advanced performance profiling
WebKit has two advanced debug flags that come in very handy when trying to debug client performance aspects of your site. Enabling them on Desktop is relatively simple, but until I’ve seen it in MIHTool, I didn’t even know it was possible on iOS.
The pre-MIHTool way to do something similar is to connect your iOS device with XCode’s Instruments, and then use the Core Animation debugger to enable certain flags on a lower level. These will show you the draw rate and repaint areas in your iOS app, but unfortunately not specific to the browser.
MIHTool lets you enable the two most helpful debug flags directly – Layer composition debug borders and the repaint counter. The debug borders will outline hardware accelerated layers in different colors, and the repaint counter shows the number of repaints on each element on your page. These tools are godsent.
3. Automated testing using the built-in HTTP Server
The integrated HTTP Server allows you to control MIHTool entirely remotely. It’s a feature request I submitted to build a fully featured load tracking solution that cycles between various production urls of your sites and automatically logs back the load time.
The whole API is super simple. You send a specific command to the right URL, i.e. “http://(ip of device):1630/loadurl/www.google.com” will load google.com. Here’s a list of the current accepted commands:
- loadurl/(url) – loads the site specified
- injectjs/(url) – injects the JS at the given URL into the current site
- reload/ – reloads the current page
- disablecache/(on|off) – disables or enables the cache
- clearcache/ – clears the browser cache
- clearcookies/ – clears cookies
- clearlocalstorage/ – clears local storage
- clearall/ – clears all caches
- fullscreen/(on|off) – toggles fullscreen
- keepawake/(on|off) – toogles keep awake
4. Total cache control
You likely hate going to the iOS preferences to clear the browser cache as much as I do. Well, MIHTool has very helpful shortcuts for those actions! Not only does it allow you to clear various caches individually (and all together), but it can also disable the cache entirely.
UIWebView !== Safari