Remotely debugging mobile devices: Remote web inspection in Safari and iOS6

It doesn’t take a genius to note that mobile devices are pretty much overtaking the web, and that a huge amount of people – the majority depending on the statistics you pay attention to – are accessing the web via a mobile device such as an iPhone, iPad or other smartphone / tablet.

As such there has been a huge buzz about responsive design and how to make sites adapt well between a range of screen sizes and resolutions, and moving away from the concept of a fixed size of screen such as the ubiquitous 960 pixel grid framework. One of the biggest challenges in this new era of web design and development has been the lack of good tools to aid you in the process of creating responsive, adaptive websites.

Media Queries and Responsive Design

The ability to work in code and create media queries to handle various device widths and related styles has been possible for a while, but it can be a bit mind-melting trying to keep track of all of this and to test as you work through the development process. Fortunately we are now beginning to see a range of tools to help you develop responsive sites, one of the most recent being Adobe’s new Edge Reflow tool which is an app that lets you visually adjust the viewport and tweak the CSS of various media queries. It’s a simple, focused app that lets you resize the viewport and tweak the styles as you go. At the time of writing it hasn’t been released yet but when I get a chance I will definitely be checking it out and writing something about it.

Remotely Debugging Code on Mobile Devices

Another challenge with working with mobile devices is that you really need to test on actual mobile devices to get an understanding of the true behaviour of them. Although you can set the width of your desktop browser to be the same as that of an iPhone it won’t necessarily behave exactly the same way due to the differences in the way the browsers handle CSS or JavaScript.

One of the difficulties in testing on devices themselves is that it’s not very easy to debug when things don’t work as expected. On a desktop browser such as Safari you can use the Web Inspector to see the live code as you interact with it and also see any JavaScript errors that are triggered, but on a mobile browser there is often little available to help you detect the errors.

Thankfully there are now tools being developed to allow remote access to the code running on the device itself, Adobe developed a tool codenamed ‘Shadow’ (now formally released as Edge Inspect) which works by providing apps for various mobile devices such as iPhone, iPad, Android phones and tablets.

With these apps installed on your devices you then run a desktop app on your computer as well as an extension in Google Chrome. You can then view websites in Chrome and they will be simultaneously displayed on the mobile devices running the apps, but the key feature is that you can remotely inspect the HTML, CSS and JavaScript running in the app on those devices. A really excellent tool.

Remotely Debugging in Safari

Adobe Edge Inspect (formerly Shadow) is a great tool, but what if, like me, you prefer to work in desktop Safari as your main browser and don’t want to or can’t use Chrome to test sites? In case anyone thinks this is just down to a matter of personal preference of browser I can give a legitimate example of why having to use Chrome can be a problem – Chrome’s in-built support for Flash gets in the way of testing content that is intended as fallback or alternative content on the desktop.

Screenshot of Web Inspector settings in iOS6 on an iPhoneFortunately the recent release of iOS6 offers a new feature that enables remote web inspection of mobile Safari on iPhone or iPad.

To make use of it you need to go into the ‘Settings’ app on your iOS device, and drill down into ‘Safari->Advanced’ where you’ll find a new toggle button for ‘Web inspector’, (this replaces the old ‘Debug’ option in mobile Safari which really offered little functionality).

Switch this on and you’ll see a small paragraph of text appearing which explains that you need to connect your device to your computer with a cable for this feature to work.

Once you’ve enabled Web Inspector on your iOS device(s) then you should find them listed in the Develop menu in Safari on your computer, it should looks something like this:

You can select the device and then it opens up a menu showing the available applications that web inspector can open. Note that you need to have mobile Safari open on your iOS device for any sites to be listed in the menu, if they’re not open then you’ll get a message saying ‘No Inspectable Applications’.

Once you select a site from the menu then the familiar Web Inspector window in Safari on your computer will open, the difference is that you are seeing the HTML, CSS and JavaScript from your iOS device. You can then browse around and interact with the site on your iOS device and inspect all of the changes occurring right in Web Inspector. Here’s a view of the HTML from a site on my iPhone:

Debugging via the console remotely

Just as with the ‘regular’ web inspector you can interact, view and update HTML and CSS and then see these temporary tweaks appear right on your iOS device. The main benefit in debugging for me has been in dealing with JavaScript / jQuery code, I can make use of console.log messages and debug via the console just as I would when working on my computer:

In a recent jQuery mobile based site I was developing I encountered code that was failing in mobile Safari but working fine in Safari on my Mac – exactly the kind of situation I mentioned earlier in this article where code is handled differently in mobile Safari. But thanks to this new remote web inspector functionality I was able to easily add some console messages and figure out what was going on and adjust the code to work around the problem.

A Great Solution for iOS Web Development and Testing

iOS6’s remote web inspection functionality is definitely a huge improvement if you are making sites that you need to test on iOS devices. With the increase in Android-based devices such as Google’s Nexus 7 and Amazon’s Kindle Fire tablets you will of course need to test on other devices besides iPhones and iPads. So tools like Adobe’s Edge Inspect are definitely something you will need to make use of too for testing across the various platforms and devices, but the simplicity of this iOS-specific testing workflow is very easy to set up and work with. A definite two-thumbs up from me!

I’m going to take a look at some of the other tools available to aid in the contemporary web development workflow of responsive, mobile-friendly design and write some more posts about them soon. In particular an updated look at Adobe’s Edge Animate tool and also a look at the Edge Reflow tool once it has been released.

Why the next iPhone won’t be called ‘iPhone 5’…

I’ve been getting more and more bugged by people referring to the next iPhone as being the "iPhone 5", so I thought I’d make this simple graphic to explain why numerically it makes no sense for the next iPhone to be referred to as number 5!

You can download a 300dpi A4 sized version from this link if you want to print your own out and annoy inform any of your co-workers / friends / family / bloggers / podcasters when they start saying "what will the iPhone 5 be like?"…

Free phones, now free computers, why not free TVs?

If you’re in the UK reading this then you’ve quite probably seen the TV adverts for PCWorld which offer Laptops for free (or a discount of £300 on other laptops) if you sign up for a 2 year Orange broadband contract.

I’d heard about Orange in France offering some kind of deal like this but it’s interesting to see it happening here now. The fact that they are doing this raises a few issues, or points of interest anyway.

PC’s are now a commodity

This is kind of a sweeping statement but mainly I mean that PCs, and laptops especially, have become much cheaper. To the point that they are cheap enough to offered for free upon signing up for a 2 year contract for internet access!

Mobile phones are already a commodity

That whole model is pretty familiar, sign up with any mobile phone company for 12 months, 18 months or even better 24 months and they’ll offer you an increasingly better range of free mobile phones to choose from. Interestingly though, a lot of these phones are worth a lot more than a £300 laptop!

Seeing the parallel between these two business models it’s making me wonder why the cable and satellite TV companies don’t do the same?

Calling Sky & Virgin, where’s my free HD TV?

In as much as phones and laptops have become something of a commodity High Definition HD TVs are quickly following suit. PC World list 26" HD Ready LCD TVs for about £350, if a TV costs only this much then why not offer a good deal on televisions when signing up for a contract with you local cable or satellite TV company?

The costs of all these products is fairly similar, I can’t see any reason why this couldn’t be done? One added benefit is that it would greatly increase the uptake in viewing HD television and help bring more momentum behind the HD format It’s really common to change mobile phones every year or so (at least on pay monthly contracts in the UK it is anyway!) and people often upgrade computers on average between 2 – 4 years of usage. But Televisions have always had a much longer shelf life, it’s not uncommon for people to have TVs that are at least 5 years old but possibly over 10 years old!

Many people’s timescale for buying a new TV will be several years away, but they will likely switch between cable or satellite TV providers several times within the lifetime of that TV, so why not offer free TVs in exchange for signing up for a fixed contract?

Well, I do have one reason why not…

Just to balance this whole argument I have one reason why this would be a bad thing, it’s basically why the frequent offering of free mobile phone and now free computers is a bad thing – the environmental impact.

I’ve written above that phones (and computers now) are a commodity, there’s something about that I don’t like. People’s attitudes towards technology increasingly becomes far more throw away. A recent upgrade for my mobile phone landed me a shiny new Nokia N95 for free in exchange for an 18 month contract, the reality is that this device sells on Amazon at the time of writing for about £450. There’s no way I would ever have spent that kind of money on a phone, despite how smart a gadget it is. It’s easy to see how the true cost of these devices is lost on people, they’re just seen as free phones1.

It’s a little bit of a scary thought to see computers go that way and perhaps be even worse to see TVs be viewed that way. The environmental impact could be pretty huge. Not that the impact of these devices isn’t huge already of course! I appreciate that this kind of technology fills landfills regardless but at least when you pay for something you are likely to value it more than if it is just given to you. Wow, that sounds like a life lesson a parent would teach their child!2

~Rick

  1. This is a purposeful decision by Apple in regards to the cost of the iPhone, it is not sold as a subsidised device but rather at it’s full market cost. Apple products tend to buck the trend of being ‘commodity’ items but rather as desirable objects.
  2. Well, I am a parent and I will teach my child that lesson ;)

Nokia N95 first thoughts – my iPhone substitute!

Picture of Nokia N95I just got a Nokia N95 today, I’m pretty stoked to get this phone especially as I got it for free, although on condition of an 18 month contract with Orange. I notice that Amazon list the N95 without sim card for £459 so I’m happy with the deal I got from Orange.

iPhone substitute?

The phone is pretty slick, it’s a slider phone but it opens up both ways, one way for keyboard, the other for media player controls.

Although not quite as easy as simply rotating the device like the iPhone it is very easy to toggle from portrait to landscape view in most applications. This is especially good for web browsing I’ve found.

This is a rough list of features of the N95:

  • 5 megapixel camera, Carl Zeiss optics
  • DVD-like video, 640×480 pixel MP4/AAC
  • WIFI
  • Integral GPS & mapping functionality
  • 2.6" display 320×240 pixels
  • 160mb internal memory, Micro SD card slot
  • Symbian S60 Series 3.1 OS

I’m beginning to play around with it so I’ll write some more once I’ve gotten into it. I’m interested to see how the still images and video footage works out, the little I’ve used them so far is indoors with fairly low-light conditions and it’s definitely an improvement over my old Nokia N80 for still images.

Snappy interface

One thing I did notice is that it felt very responsive when navigating around the various applications. I read a few reviews of the N95 which criticised the N95 for being sluggish, I found the total opposite, maybe there was an earlier version of the firmware which didn’t work so well for the people who wrote these reviews. It’s certainly a lot better than any other Symbian based phone I’ve had.

Symbian Applications

One of the reasons I love the Symbian OS is the various applications that are available, not just commercial apps but various freeware / open source apps.

I’m going to have a good look for some interesting applications that really make use of all the hardware thats packed into the N95. One application I came across already is Movino:

Movino is a collection of applications for streaming and broadcasting live video from smartphones. The main applications are the following:

  • A client for S60 smartphones
  • A smartphone client for J2ME
  • A gui application and a QuickTime component for OS X
  • A video server for linux
  • A drupal web front end

Basically it lets you use the phone as a webcam source for things like Skype chats etc. I’m going to have to try this on my G5 tower at work and see how it goes, it sounds pretty cool though.

I’ll write more once I’ve used it a bit more.

~Rick

So, would you use an iPhone?

There’s a stack of rumours abound that Apple are hard at work making an ‘iPhone’, an iPod and phone combination. Their recent partnership with Motorola and the ROKR and SLVR phones with iTunes signifies some interest at least in the mobile phone area.

I read an article on ITWire – An Australian IT site called “iPod soon a museum item as cellphones rule” and I wasn’t sure I agreed with the point that the writer Stan Beer was making. Basically his point was that standalone mp3 players such as iPods and also PDAs will be made redundant by mobile phones due to phones getting better mp3 features and bigger storage making them more competitive.

He suggests that the fact that phones come with a lot of other features like cameras, pda-like functions, TV access that this makes them a more attractive option to people, additionally he states, “they also offer a better way to get music“. It’s basically on that point that I think he’s missing something.

The missing issue is that mobile phone companies like to charge a good premium for things like buying music or ringtones online. Unless the cost of buying music is the same £0.99 / $0.99 or less that people pay per track via normal web access then people won’t sign up wholesale to purchase music via mobile phones, it means that people would use it much like the Motorola ROKR phone with iTunes and just transfer from their desktop computer.

Hopefully companies like Helios in the US with their new approach in providing price plans and services targeted at letting people use mobiles to access services such as MySpace or chat apps etc will push the bar for this kind of thing and make the price of mobile web access much much cheaper. Just now it’s pretty expensive, just take a look at Japan and then apply the kind of services they have to the UK and US and maybe people using the “iPhone” to buy music wirelessly will happen. Maybe Apple will just add WiFi to the phone and people can avoid having to use the carriers networks altogether and just download from the ever-increasing amount of wi-fi access-points instead.

Another thing is that not everyone wants an all-in-one device, not everyone wants a mobile phone or wants to pay phone fees, iPods are a cheaper and cheaper commodity and the cost of ownership is low, it doesn’t cost more to own apart from buying new music, cell phone costs are kind of expensive for many people so I would hesitate to say that a standard iPod is going to be redundant in a years time.

One final point is that the iPod isn’t successful because of it’s wealth of features but perhaps rather the dearth of features – it’s simple to use – how many people say that about their mobile phones? All the additional features in the world haven’t helped companies like Creative or even the once-mighty Sony to make a significant dent in the iPod’s success, there’s a huge army of third-party accessory makers for the iPod, I really don’t think the iPod as it stands is becoming obsolete, probably just even cheaper and more prevalent!

~Rick

Turning Japanese…

I just read some interesting stuff on an Italian Mobile phone blog:

Japan is the world’s #1 in the mobile business with over 90 million mobile subscribers, of which 78 million are using mobile Internet services and 40 million 3G users, with DoCoMo and KDDI increasing at a rate of 1 million a month each. The 3G has services with speeds up to 2,4 Mbps and next year, the 3,5G services will be live with speeds up to 14 Mbps.

It’s interesting because 02 have just launched their ‘i-mode’ service over here in the UK and it’s something I’ve looked into for a while due to the fact that you can use Flash to build applications for it.

Read the whole article on MobileMonday.it