Mobile Safari Web Inspector on Safari on Mac.

If you tweak HTML and CSS and JavaScript on webpages, then you may appreciate how simple and convenient the plugin that goes by the name of Firebug for Firefox has made your life. I know it has for me. It is simply an indispensable piece of technology that I use every time I have to debug a CSS or HTML or JS issue on a webpage. Other browsers, notably Chrome and Safari, have built-in web inspectors which allow similar features.

I have of late been working on a lot of Mobile versions of websites, particularly those optimized for Mobile Safari and iOS devices using the fascinating jQuery Mobile framework. One of my biggest pet peeves while debugging issues on Mobile websites was not being able to debug the sites live on a mobile browser. More times than I’d care to acknowledge a particular mobile site, when viewed on a normal browser would look fine, but would have slight aberrations when viewed on a mobile browser. Those kind of issues are a real pain in the neck, because you are, more often than not, left to get sucked in an annoying cycle of wildly making changes in the HTML/CSS and refreshing the page on the mobile browser continuously in the hopes that the problem would fix itself.

However, today I bumped into a way to inspect and debug a mobile site on Mobile Safari by using Safari on a Mac computer (I am sure that it may work equally well for Safari on Windows, but I have not had reason nor occasion to try to find out). It not only works so well, but is also very straightforward to set up.

My testing environment includes an iPhone 4S running iOS 6 and a MacBook Pro running OS X Lion 10.7.5. Here are the steps you must follow in order to be able to inspect mobile web pages live via Safari on your Mac:

  • On your iOS device, turn on “Web Inspector” inside the Advanced settings for Safari. You’ll find these under the Settings app.
  • On the Advanced tab under Preferences for Safari on your Mac, you must check the “Show Develop menu in menu bar” setting.
  • Connect your iOS device to your Mac via the data cable.
  • You may now load on Mobile Safari the mobile webpage you want to inspect.
  • On Safari on Mac, open the Develop menu in the menu bar, select the name of your iOS device that will appear in the list, and click on the webpage shown on the pop-up that slides to the right.

The web inspector in Safari will kick in. You may explore the different tabs and functionality available there. The only downside is that no preview of the page is available on the inspector. Instead, the live page open on your Mobile Safari is the preview. You may go through the HTML source displayed inside the inspector, selecting the elements you want to inspect and notice that the corresponding elements are highlighted on the device. What’s more, you can also live edit the source as well as CSS, and they take effect almost immediately. How awesome is that!

iPad

I own a Nokia E72 mobile phone. While I have not owned mobile phones longer than five years, I have in that time span been through two mobile brands. My very first mobile phone, gifted to me by father when I was early on in the University, properly convinced that I didn’t need a mobile phone, was a Sony Ericsson. It was a small mobile phone, the name of which escapes me now. I may still have it, somewhere, in some drawers, lost but not forgotten. I used it until it nearly died out. The engravings on the buttons grew muddled, colour on the handset faded out, the battery dead, replaced and dead again, etc. It would be safe to say, in hindsight, that I used it heavily.

My second mobile phone was another Sony Ericsson. It was the first mobile phone I bought. I was immensely excited the night I bought it, on way from work. The excitement of buying a new gadget is one that doesn’t ever diminish in its intensity, never goes away, no matter how many gadgets you buy. It is there right around the time you decide to buy a new gadget, and lasts well until after you’ve bought it. That was my second Sony Ericsson phone, and would be my last.

After I had made heavy use of it, I slowly moved away from it over to Nokia. I had a mammoth but reliable Nokia E61 lying around, which I was using for testing Symbian applications. Yes, this was roughly the time when I worked on Symbian application development. And that is all I am going to say of it.

My fourth and current mobile phone is a successor to E61: Nokia E72. I loved that phone when I bought it. I still love it in some ways. While E61 could be said to be too, E72 is what you would call a proper smart-phone. It features a lot of things that could help you do all sorts of things on the Internet, besides the usual functions of phone. It also has a full QWERTY keyboard. While I had owned an iPod Touch, I’d not been a big fan of touch screen and touch phones. I strongly believed that I could never be able to reliably use a phone with touch screen as the only form of input. This bias was in part due to my reliance on and affinity for physical QWERTY keyboards on phones.

Over the past couple of months, I was growing a little frustrated with my E72. While it worked as anyone would expect of it, I found that as far as applications that let me run wild on the Internet were concerned, it was severely limited. Sure, there were applications to do anything from using Facebook to Twitter to Foursquare. But I felt stifled. There were browsers but I didn’t feel the urge to browse anything on my mobile, unless it was an absolute emergency. I could post tweets on Twitter, but I didn’t enjoy interacting with others’ tweets. The same could be said of my experiences with Facebook (as far as I can tell, there is no native, official application for Facebook from Facebook for Symbian S60) or Foursquare applications. It just wasn’t fun, or even comfortable.

So for the past couple of months, I had been strictly debating getting an iPhone. iPhone 4S was out by then and it made no sense to get anything below that model. Some friends suggested time and again to go for the iPad instead. Where I was almost convinced that iPhone 4S would be my fifth phone, the recommendations for iPad threw my mind back in a state of confusion. Naturally, I compared the pros and contrasted the cons of both devices. Of course, one is a phone, the other a tablet, but when I compared the iPhone to the iPad, I actually compared it with iPad and my E72. That is, if I were to get an iPad, I would continue to use my E72 for the phone needs. There was a big difference in price as well, with a factory unlocked iPhone 4S coming at an exorbitant 67k PKR locally, while an iPad2 with WiFi cost only 48k PKR.

I still remember clearly the night I was at the club on the courts, playing tennis with my partner. He had finally bought the iPhone 4 a day before, after having looked for the white one for under a week. That night, I came home, and finally made up my mind.

The next afternoon, I was at the Apple Store I regularly buy from, purchasing an iPad2 WiFi with 16GB disk space. I had decided it. As I would find out, it was one of the best decisions I had made in my life in a while.

Those familiar with the different iPad2 models available will know that there’s a WiFi + 3G one available. Apart from having to pay under 10k PKR more, the main reason why I decided against getting the 3G model was the unavailability of 3G in the country. I know that you don’t necessarily have to have 3G to be able to use the connection, because any type of data-plan from your provider, such as GPRS or EDGE, will work. However, as I will explain, iPad is a content consumption device. When I say that it is a content consumption device, I mean it in a massive way. It has been designed for consuming a lot of content, including in the form of video, audio, and text. When I decided to buy it, I imagined myself using the iPad like I do my laptop. And I can’t ever imagine using my laptop over EDGE/GPRS in a way that satisfies me. Similarly, I didn’t think the iPad would shine on an EDGE/GPRS connection.

In the next post, I will explain exactly how the arrival of iPad has changed my life, how it has affected it, how I use it, where and when I use it. I will also list down the wonderful apps I use frequently, and make an argument for iPad being an awesome device for reading books/content in particular.

Browsing on the BlackBerry simulator

     I am not a big fan of BlackBerry smart-phones. I realize that there are a lot of people who can’t seemingly exist without access to their emails virtually all the time, and for those lot, BlackBerry, with its prominent push email feature, is perhaps a better fit than any other smart-phone platforms out there. When it comes to me and my smart-phone usage, I would not go so far as to say that I can’t live without my phone. I can. By every measure, I consider myself a hardcore geek, perhaps more hardcore than most others, but I am by no means a gadget freak. While it will be unfair to say that I absolutely abhor typing on small (semi-) keyboards, I don’t also quite enjoy the experience. When it comes down to typing, I would much rather prefer a full-fledged keyboard. That is why to me a compact laptop is many times more important than a fully equipped smart-phone. (For the curious reader, I own a Nokia E72.)

     For a recent mobile website project that I worked on, I had to face a complaint from the client where the layout of certain pages on the site didn’t look quite as expected on BlackBerry devices. Naturally, I didn’t have a BlackBerry handset nor an easy equivalent to test the issue for myself, so I did what anyone stuck in the same corner as I would do: I went over the BlackBerry developer portal online to look for BlackBerry simulators.

     Unlike the Epoch simulator for Symbian/Nokia phones and the iPhone simulator, the BlackBerry simulators were spread out such that for each possible BlackBerry smart-phone model in existence, there was a simulator available for it. And each one of the download was anywhere from 50 to 150 MB in size.

     I chose the simulator for one of the latest BlackBerry handsets, and downloaded it. Like the Epoch simulator, BlackBerry simulators are Windows-specific, in that, they are available in the form of Windows executable binaries. I didn’t have Windows anywhere in my study, so I had to set up a Windows guest inside VMware Fusion in order to set up the simulator. To cut a long, painful story short, I was able to install the simulator after tirelessly downloading a big Java SDK update, without which the installation wouldn’t continue. And then, I powered up the simulator. I was instantly reminded of the never-ending pain I had to suffer through the hands of the Epoch simulator in my previous life where I used to be a Symbian developer. The BlackBerry simulator took ages to start up. I almost cursed out loud because that fact alone opened up old, deep gashes that I had thought I had patched up for good. I was mistaken. Never in my dreams had I thought of having to deal with such monstrosity ever again. And, to my utter, absolute dismay, here I was.

     Eventually, after what seemed to have been ages since I booted up the simulator, I was able to navigate my way to the BlackBerry browser. I let out a deep sigh and thought that I could now finally concentrate on the problem I set out to tackle. But, no! I couldn’t browse on the BlackBerry browser at all. No amount of fiddling with the 3G and WiFi settings all over the BlackBerry OS got browsing working. From what I could tell, both the 3G and WiFi networks were alive, but there was no traffic flowing through. I almost gave up.

     After groping on the Internet with a wince on my face, I was finally able to find out why. Apparently, by default, the BlackBerry simulator are unable to simulate network connections. In order to do this, you have to download and install an additional, supplementary BlackBerry simulator that is called the BlackBerry MDS Simulator. Once this simulator is up and running, your actual BlackBerry simulator will be able to simulate network connections, browse, and do all sorts of network related functions. Who knew!

     As an aside, there’s also the BlackBerry Email Simulator that simulates messaging functionality.

Opera Mini 5 Beta, character map, and Nokia phones

     I am really impressed with what Opera has managed to do with what they proudly claim “the next generation of mobile browsing” in the form of Opera Mini 5 Beta. It is as good a browser as I have never before used on a mobile device. Any words that I could concoct to describe how great it is won’t by any stretch of one’s imagination do justice to the product.

     I am using it exclusively on my Nokia E61 mobile phone. The E61 features a QWERTY keyboard with a limited set of special characters available on top of the alphabets as function keys. These include characters such as hyphen, exclamation mark, double and single quotes, parenthesis, etc, among others. However, these are not all of the commonly used special characters, and in order to get to a full list, a “chr” key is provided on the keyboard, pressing which brings up a character map.

     While Opera Mini 5 Beta is still fairly robust and stable for a beta software, there is one issue I’ve found that I feel has a rather inconspicuous solution. On the keyboard of E61, the rather common underscore character is not available as a function key. In order to use that character, you have to get to the character map, and select it from there. The underscore character becomes even more common on the web, where you may tend to have it as part of usernames, passwords, or email addresses, in particular. I do. And here’s where Opera Mini 5 Beta gets a trifle quirky: If you’re editing any text box within the browser, you cannot access the character map, not through the “chr” key, not through any other key or combination thereof. When I initially bumped into this quirk, I was both sorely disappointed and pissed. I couldn’t log in to any of the websites where I had a username or email address with an underscore in it. And for a while, it kept me apprehensive about using Opera Mini 5 Beta frequently.

     However, after toying around in Opera’s settings, I was able to finally find a workaround. Inside “Advanced” options inside “Settings” menu for the browser, there is an option, turned off by default, for “fullscreen edit”. Once enabled, you can edit all text boxes in a native, Symbian-esque text editor, where the character map is easily available via a press of a key.

     Bliss!