Tag Archives: browser

Debugging the iPhone Safari browser, html, and css on the fly

Lightweight Browsers = Lightweight Tools

Testing applications on mobile browsers has always been interesting to me. It goes without saying that testing solely on desktop html browsers with a mobile user agent request header is not sufficient when testing mobile applications. Too many actions cannot be replicated on a browser, such as swiping, pinching, landscape vs. portrait orientation, specific screen specifications and resolution, phone call interruption, text message interruption, push alerts, loss of service etc.

However, with the desktop browser comes the myriad of extensions and tools that is essential for good website testing. This includes Firebug, Chrome Developer Tools, and various other plugins and add-ons that check everything from font size to request header parameters to image size. On most mobile devices themselves, however, there just isn’t that many tools such as these. I guess their intent is to keep the browser lightweight and limited resources free.

(NOTE: same as above also goes for virtual devices and emulators. Some are advanced nowadays, but I can come up with quite a few issues that will not be caught by emulators.)

Break away from the jailbreak

Is there a way to obtain browser jscript/html/css debugging functionality such as that inherent in the tools just mentioned? Of course the easy answer to access the source itself on the fly is “jailbreak” or “root” the phone. Ugh. As a legitimate Quality Assurance Analyst, nothing is more annoying and a sign of a newbie than to hear that “solution.” To me, that is definitely giving up and if jailbroken, definitely not a legitimate control test device. That’s akin to, in automation, when you cannot “click a certain drop-down” to hacking out a javascript function to “drop it for you.” That’s not what the user does, and immediately breaks away from the model of QA Automation, which is to imitate the user as much as possible.

When jail-breaking or rooting a phone, you are compromising the designed functionality of the Operating System, and testing on a now non-standard device. Even if you are now able to access functionality of the browser, who is to say that any defects you find, or DON’T find are replicable on someone else’s standard non-jail-broken device. Even if there is no one solution for all devices, please do not root the phone. There are solutions, you just need to be a little resourceful. But I digress slightly.

The Safari Web Inspector

On a recent project I was on, there was a menu header/footer that, per requirements, could not cover 3 lines per the requirements. However in our required device matrix, an older phone, with a smaller screen width was stubbornly wrapping over 3 lines. This code base, annoyingly, takes approximately 30 minutes to push to a test server so trial and error was out of the question. Of course, locally, we were not able to see the issue. I figured we needed a tool with capabilities such as Firebug so we could shimmy around with the css styles and see if decreasing font size, or spacing would solve the situation on the suspect device, while maintaining visual integrity on the previously passing devices, all while without having to do a trial and error on x number of successive builds.

Our developer came up with reasonable design solutions that worked on the trouble-making device, such as smaller font, smaller padding between the menu divider (in this case “|”) etc. Since there is a shared css file, we needed to figure out if any of these solutions would be feasible on the iPhone Safari browsers. Enter the Safari Web Inspector. Built into Safari and Mobile Safari, I was able to, like Firebug and Desktop browsers, navigate to the troublesome pages, and after they loaded and rendered, directly edit their css and html, and get a realistic idea of how these changes would appear when implemented in the source code.

Turns out, these changes were not to be for the iPhone and we had to abandon the requirement for this particular device, but I did save the team at least an hour of making changes, pushing to test, testing on all devices, and most likely, another hour to revert these changes, or try other variations in the source code before pushing it to test yet again.

Setting up the Safari Web Inspector for Mobile Safari

Requirements:

  • Any device (from Apple of course) running iOS 6 (or greater, if this is read in the future)
  • USB cable
  • Safari 6 (or greater)
  • Mac OSX Lion – 10.7.4 (or greater)

Steps:

1. In Safari, go to Preferences –> Advanced –> Select “Show Develop menu in menu bar”
2. On your iPhone, go to Settings –> Safari –> Advanced –> Turn “ON” “Web Inspector”
3. Go to your iPhone and open up your Safari browser
4. From Safari, go to Develop –> [User’s iPhone] –> [tab name on iphone safari browser]
safari_browser_debug_menu_demo

 

 

 

 

 

 

 

 

 

 

 

You should now be able to see the Safari Web Inspector for the mobile Safari instance on your iphone and be able to directly edit, view, and change css and html elements and values in real time.

safari_browser_web_inspector