Let’s face it. Mobile web development today sucks. You don’t get the fancy console and debugging tools you have in modern desktop browsers like Firebug or Webkit’s Inspector. At most, you can enable a simple debug tab that reports the number of JS errors and allows you to console.log one variable at a time—and if you’re using embedded web views you don’t even get that much. For anything else you pretty much have to revert to the old days of javascript popup alerts or tailing your server logs.
Enter Weinre. Weinre is a beta project written in Java that allows you to have a remote Webkit inspector-style debugging console on your desktop that can communicate with your mobile device. You can send alerts, do full console logging—even inspect the remote DOM tree. It’s in beta and occasionally a little buggy but totally useable.
To use it, run the java server on your local machine and add a single script tag to your project. You can also just download the Mac executable here. The full documentation is here – (its not very straightforward so post here if you have questions.)
At work, we use Charles to redirect production apps to our local dev server. My local server.properties file looks like this:
~/.weinre]$ cat server.properties
boundHost -all-
httpPort: 8081
reuseAddr: true
readTimeout: 1
Thanks goes to coworker Jim for being the first Guinea Pig to try it out.
We were experiencing consistent bootup crashes for a game with embedded web views. Took us a while to track it down but if you use
with
-webkit-transform: translate3d(0,0,0);
or
-webkit-transform: translateZ(0);
in the same CSS declaration, it will trigger a bug in Mobile Safari and the game will crash.
I’m optimizing the web views of an iPhone app in preparation for Christmas traffic and one of the ideas I had was to use small increments of Expires header to cache files client-side. I assumed this would be no problem as all my work with Safari on the iPhone has shown it a very capable browser—as good as any desktop one.
Turns out after some testing that using Expires Header isn’t possible— not because of cache size limitations as one would assume. It looks like the guys in Cupertino wanted to limit this ability on the iOS as every HTTP request made by an iOS device issues a pragma: no-cache directive. I’ve yet to understand why. Better fire up more memcache servers.
Here’s the raw headers if interested:
GET /expires/ HTTP/1.1
Host: readystate4.com
User-Agent: Mozilla/5.0 (iPad; U; CPU OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5
Accept: application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Cookie: __utma=244034822.428964265.1285289496.1290546798.1290723961.13; __utmz=244034822.1285289496.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); __utma=1.1229958817.1285277083.1288920090.1292540519.14; __utmc=1; __utmz=1.1285277083.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Pragma: no-cache
Connection: keep-alive
The 4.2.1 firmware update that rolled across all iOS devices brought a lot of new advertised features such as AirPrint, AirPlay, Game Center, and even welcomed small improvements such as the ability to search in page in Mobile Safari, but out of all devices it affected, the iPad was the device to benefit the most: bringing it up from the ancient 3.2.2 firmware and enabling it to do something the rest of the iOS devices have been able to do for awhile, namely drag-and-drop folder creation and multitasking.
For web developers like myself, some of the unadvertised updates that came from 4.2.1 are an Accelerometer API, WebSockets, and better HTML5 support (enhanced forms, canvas and SVG).
Out of all these updates, my favorite things about this update (besides finally being able to multitask on the iPad) is the iPad’s support for onhashchange and the HTML5 audio tag. The iPhone has been able to do both for a good long while but since the iPad lacked it, I had to do some code forking in my Flash to HTML5 JavaScript interpreter. Previously In the place of an audio tag, I used the video tag – a really similar element with identical API’s but different in many ways. My next entry will cover these differences as well as the benefits and pitfalls of working on a project that specifically targets webkit and webkit mobile devices.
Learn more about the developer specific improvements of 4.2.1 here.
Happy Holidays!
I decided to jailbreak my iphone again so that I can access the terminal as root, create wifi for my ipad, facetime without having to be connected to a wifi point, etc.
Jailbreaking for the iPhone 4 OS with it’s multitasking support is a whole new architecture but surprisingly most jailbroken apps are already working. MobileTerminal unfortunately just crashes when opened. After doing some research I found that it hasn’t been finished being ported yet but you can install a prerelease copy through the following steps:
- Download the 426 version from http://code.google.com/p/mobileterminal/downloads/list
- Rsync the folder to your root/Applications/
- reboot (you can just type reboot right from your desktop SSH session if you’re lazy.)
I’ve tested out SSHing into a few boxes with it as well as using the gestures it allows you to set up. Working pretty sweetly. Now I just need to find out how to enter the meta key…
Taken from comment #11 here.
