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.

Tip: Fix for iPhone voicemail stopping working after upgrading to iOS6

Along with a gazillion other people around the Globe I upgraded my iPhone to the new iOS 6 software that just came out, everything worked fine during the upgrade but afterwards both myself and my work colleague found that our iPhone voicemail no longer worked.

In this case my iPhone is on the UK’s Orange network (soon to be known as EE) which along with every other carrier apart from O2 doesn’t give you the nice Visual Voicemail the way that Apple intended. Instead voicemail is accessed just like any other mobile phone since the 1990’s by pressing a voicemail button which then dials a number and you then access the voicemail by pressing numbers on the keypad.

However, I couldn’t even get that far, tapping the voicemail button just came up with an error messaging saying that voicemail was not configured and to get in touch with the phone company (or words to that effect). I looked up some support forums for Orange and on the Apple site but didn’t find anything recent relating to iOS6 but I did come up with something from a while ago which seems to have done the trick!

First you need to find out what the actual number is that you need to call to access voicemail, for Orange this is simply ‘123’. The next and final step is to enter the following sequence into the phone dialer on your iPhone but making sure to substitute the ‘123’ in my example for whatever the number is for your phone service’s voicemail:

**5005*86*123#

Just enter that and hit dial, the screen should flash quickly and after that your voicemail should now be working! If it doesn’t then you’re probably best either contacting your phone operator or visiting an Apple Store. But hopefully it will fix it!

Bonus News – Visual Voicemail coming to EE:

A bonus bit of news I discovered whilst I was googling for a solution is that apparently EE (according to their Twitter account) are going to add visual voicemail to their service in the new year, so Orange and T-Mobile customers should hopefully get that on their iPhones in future.

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?"…

Dis-N-Gaged

Almost exactly seven years ago, before the launch of Apple’s iPhone and the ubiquity of the App Store, Nokia launched the N-Gage. The N-Gage was a combination mobile phone and gaming device that was intended to take on Nintendo’s Game Boy Advance.

The N-Gage (mk1 pictured below) was pretty much the first gaming phone and should really be considered a failed yet bold attempt to kick-start what is now a huge multi-billion dollar business globally. The N-Gage didn’t get the kind of success Nokia really hoped for despite the many millions invested in marketing. I actually liked this phone and did happily use it as both a phone and gaming device, although admittedly the main game I played was Tony Hawk’s Pro Skater! Combining a gadget with skateboarding is a sure way to catch my eye.

Sidetalkin’

The most obvious quirk of the phone’s design was that you had to hold the thin edge of it to your head to make calls, so it looked pretty comical! (Check out http://sidetalking.com/ !) Nokia subsequently brought out the ‘N-Gage QD’ which removed the side-talking feature and added a backlight and made it a bit smaller, as well as putting the game card slot on the outside instead of inside behind the battery!

The demise of the N-Gage started back in 2005 when the N-Gage as a hardware device ceased production leaving only N-Gage as a software component on various Nokia devices. However, September last year marked the final nail in the coffin (N-Gage 2003-2009: An Obituary) of the N-Gage when it was finished off completely.

As quirky as it looked, I think the N-Gage was an interesting concept which was ahead of its time – location-based multi-player networked gaming via bluetooth or over the internet via mobile-phone networks? Back in 2003? Who would ever be able to afford the data fees that the carriers would have charged you back then?!! Nokia spent a lot of money trying to make it a success, but the timing just wasn’t right for a device with those capabilities.

Nokia are really up against the wall these days with Apple’s iOS platform and the Android platform pushing the bar in both hardware and software capabilities. Although I’m a hardcore iPhone user I used to be a very happy Nokia user, the Symbian S60 OS integrated pretty well with my Mac. Once I got an iPhone of course that all ended, but I’ve still enjoyed using my various Nokia handsets such as the N80 and N95.

Pushin’ the envelope

Nokia do seem to be trying to find their feet in this changing mobile device landscape, certainly the Nokia N8 device has some great features, especially the 12MP camera which seems to produce some pretty spectacular photography.

Innovation like Nokia’s Push project also seems to demonstrate some of the same pioneering spirit behind the N-Gage, breaking new ground by exploring the use of mobile devices as part of our physical activities – of particular interest to me are the skateboarding and snowboarding prototypes (as I said earlier, a sure way to get me interested is to combine gadgets with skateboarding!).

I’m looking forward to seeing what comes out of these initiatives (I’d like to get my hands on either the skate or snow prototypes to play around with them!). For now I’ll just end with saying farewell to the Nokia N-Gage!

Review: ‘You Gotta See This!’

"You Gotta See This!" is a photography app by Boinx software for the new iPhone 4 which makes use of the gyroscope feature to quickly capture panographic images.

It’s a pretty fun app to use to capture some unusual images. You just press the button and it starts to record images as you move around the scene you’re trying to take photos of and then it overlays all the captured images rendered as one big image which can rendered using several themes.

You can then post these themes to Facebook, Twitter etc and save them to the camera roll on the iPhone.

if you’ve got an iPhone 4 it’s a cheap (£1.19) little app that makes use of the new hardware features offered by the iPhone 4. Here’s a few more sample images made using it:

More random thoughts on the iPad

I’ve already written my thoughts on the iPad, but here’s a few more thoughts about the iPad that have either been going through my mind or I’ve read about elsewhere and that I think are worth drawing attention to.

Another reason why Flash won’t be on the iPhone: Flash isn’t the only web plugin

If Apple allows Flash on the iPad (or iPhone / iPod touch) then the floodgates will be opened for other plugin such as Microsoft’s Silverlight and Java to be allowed onto the device. Possibly even opening Apple up to anti-competitive scrutiny for only allowing Flash. If Flash isn’t on the iPhone then no other plugin / runtime has any more of a right to be there either.

Mac OSX Snow Leopard an indication of OSX on iPad-like devices?

Reading this TechCrunch article about rumours of a possible larger iPad running something more like the full Mac OSX made me wonder whether the slimming down process involved in the development of Snow Leopard is a clue as to whether we’ll see OSX running on lower-powered, lower-energy processors. Perhaps we’ll even see Mac OSX running on the ARM processor architecture itself? Even if not on a different processor architecture then at least on some other efficient low-powered chip.

The controlled nature of the iPad’s OS has gotten some people worried that future versions of Mac OSX will end up being the same with no ability to install apps of your own choosing etc. It would be interesting to pose this question directly to Steve Jobs – just what is the future of Mac OSX? I guess we’ll find out at the next WWDC!

Many Flash games websites wouldn’t be playable on the iPad

Louie Mantia makes some really good points in his article “Flash Isn’t The Problem, Flash Design Is The Problem”. Many Flash based websites rely on you hovering over menus to navigate through them, and the majority of Flash games use the keyboard as the means of controlling them. Both of these methods of interaction are not applicable to the iPhone or iPad’s interface paradigms, as such even if Flash was on the iPhone or iPad you wouldn’t be able to use many of these sites or play many of the games!

~

If I think of anything else or find other interesting post I’ll add them here :)

Thoughts on the iPad

Apple have finally unveiled their tablet device to the public so we can finally stop hearing all of the pontification that has gone on for the last few months about a device that Apple had never given any public indication even existed (the pontification only to be replaced by the rumblings and grumblings of those who got too enamoured by some of the various rumours!).

In the true spirit of “Internet Journalism” I thought I’d add my own thoughts about Apple’s newly announced iPad. Here are a few thoughts / questions about the iPad and the impact it may have.

Flash on the iPad?

It’s a question being asked by many people, and with a move to a larger screen some would say it deserves even more to be on the device. However, I wouldn’t expect it soon, if ever to be honest. Unless the Flash plugin can be made more efficient processor, memory, energy wise it won’t happen.

I don’t think this is simply arrogance on Apple’s part as some might say, I think Apple approach the usage of the iPhone OS that runs on the iPhone and the iPad with a view to making it as efficient as possible. Some people were expecting or hoping for the iPad to use the full Mac OSX but are disappointed that it’s not on there, although some see that as a limitation I think it shows that Apple isn’t willing to put even their own more fully-featured OS on the iPad as it wouldn’t run as efficiently on the device. So if they do that with their own OS why should we expect an unmodified / unoptimised version of Flash to be allowed on the device?

I do think there is more to it than just the issue of efficiency though, John Gruber makes some good points in his recent post “Apple, Adobe, and Flash“. Personally I doubt Flash will ever be on the iPad or iPhone.

Will there be a new iPad App Store “Gold Rush”?

Even though I doubt Adobe will ever get Flash on the iPad I do look forward to seeing what native apps Adobe might bring to the iPad. Photoshop Mobile is a great little app for the iPhone so a larger sized version of that could be pretty cool. Apple have set a nice precedent for full-featured apps like Keynote, Pages and Numbers at $9.99 each so there could be some financial incentive to create a good image editing app.

It may only be a 1ghz processor in the iPad but it appears to be far more powerful than the raw ghz would suggest. It would be great if the $9.99 price point can remain as it might encourage developers of iPhone apps to develop more for it, as the race to the bottom and the $0.99 / £0.59 price point has made the supposed “Gold Rush” of the App Store an impossible dream for many, many developers.

Does the iPad signify the end of Mac OSX?

Some people have concerns that Apple’s focus on the iPhone OS is an indication that Apple is heading away from the geek or power user and is instead focused solely on the domestic / consumer end user. Whilst that may be true to some degree (Apple is a consumer electronic company after all) I think that Mac OSX has a strong future and a rightful place on the more powerful hardware that the MacBook, Mac Mini, iMac and Mac Pro computers offer.

I think that iPhone OS will influence the future development of Mac OSX in regards to user interface and aesthetics. Mac OSX 10.6 Snow Leopard brought a lot of efficiency improvements, largely thanks to the optimisation required to get iPhone OS running on the limited hardware requirements of the iPhone and iPod touch (along with the dropping of PPC support!).

The iPad is the gateway drug for Mac OSX development.

The iPod and iPhone have often been seen as a ‘gateway drug’ for Apple laptops / desktop computers – people like how nicely they work and are then attracted to Mac for the same reasons. In a similar way I think the iPad will be a gateway drug for iPhone developers getting into developing apps for the full Mac OSX that runs on Apple’s laptops and desktops.

Designing apps for the iPad will bring with it some new challenges for mobile device developers – more screen space for the user interface, processor and memory improvements. Apple are touting the iPad as a third category of device in-between a smart phone and a laptop, developers will have to get used to this paradigm as well.

The iPad isn’t just a laptop with a small screen (i.e netbook) it’s a new type of device with hardware and software tailored to suit the demands of a lower speed cpu and lower memory. Netbooks generally push the limits of their smaller hardware form and tend to run Windows XP or Windows 7 which are really laptop OS’s and as such really need to be running on at least a 1.6ghz atom cpu with 2GB of memory to be usable. The iPad is built a whole different way, with a focus on using the minimum of cpu speed and memory by maximising the efficiency of the OS.

Where the iPad becomes the gateway drug is that as iPhone developers (many of whom didn’t previously develop for Mac OSX) get into developing iPad apps they will get more familiar with developing for a larger screen resolution. They’ll bring with them the knowledge and experience of developing apps within the tight constraints of the iPhone’s cpu and memory and start to enjoy the freedom and power that the iPad’s higher spec offers them. It’s only a short step to see how a developer could then take the next step up and make their apps function on the full Mac OSX laptop / desktop OS.

I look forward to seeing an increase of very efficient programmers developing apps for Mac OSX in future, having learned to code Objective-C within very tight limitations. :)

Other media coverage etc.

Why Flash CS5’s export to iPhone App is better than native Flash support

Adobe announced at their annual MAX conference that the next version of Flash CS5 will include the capability to publish iPhone apps, and in fact that there are several games in the App store already that were created using a pre-release version of the software.

There’s been a lot of commentary on blogs that seem to think that Adobe have added this feature because they think that they may never get Flash as a plugin on the iPhone, indeed that this is some kind of ‘backdoor’ route for Flash on the iPhone. However, I disagree, I just don’t think that there’s any reasoning like that at all.

While it is great that Flash developers will have a way to get content onto the iPhone now I think that the ability to create iPhone apps is a much better opportunity for them than having native Flash on the iPhone.

Why? One simple reason: Money. A lot of people are willing to pay money for an iPhone app, but people are far less willing to part with money for Flash games that run in the browser. It simply presents a much better business opportunity for Flash developers.

iTunes 9 and other wonders…

Apple’s 09/09/09 Media event introduced some new things both expected and unexpected, many expected an iPod touch with a camera but instead there was an iPod nano with not only a camera but FM radio and a built-in pedometer! I was surprised about the FM radio as I never expected that to be added to an iPod. Here’s a few of the things Apple introduced today along with some thoughts / notes etc:

iPod shuffles – shiny rainbows

Now in multiple colours as well as a special edition stainless steel model. There were rumours that this tiny little iPod was going to be ditched but that didn’t happen. They also announced a new 2GB model along with shuffle-compatible third party headphones and controller peripherals. I’m not sure how much smaller you could make an iPod shuffle really. (iPod shuffle ?)

iPod nano – complete with camera

At first I didn’t think an iPod nano with a camera was that big a deal but after watching one of the video clips demoing the video features I found myself wanting one to carry around so that I could film things again. I’ve missed being able to film stuff since getting my iPhone 3G, however, there’s no way I’m buying yet another iPod so I’ll just have to look into getting an iPhone 3GS at christmas time instead! The nano’s video format is 640×480 pixel h.264 video and looks to be pretty good quality, it almost makes me wish Apple would just make a dedicated camera but I don’t think that will happen. (iPod nano ?)

iPod classic – memory bump

There’s nothing that different in store for the iPod classic, just a simple storage bump from 120GB to 160GB instead. I still like the classic iPod and the scroll wheel, it’s a great interface for accessing files. The iPhone / iPod touch’s touch screen is great but the scroll wheel is still very efficient I think. I wonder though how much time is left for these iPods? Probably still a fair bit, but once flash memory gets into at least 128GB sizes I think the iPod classic will be assigned to the history books. (iPod classic ?)

iPod touch – 64GB model and price drop

There was no rumoured iPod touch-with-camera announced, just a price drop on the existing model as well as a 64GB model announced. I think a new version with a camera is in the works, it just doesn’t make sense for the nano to have it and not the touch. Also the lineup is now 8GB, 32GB and 64GB, I’d expect to see it become 16GB, 32GB and 64GB when the new model is announced. That’s just my speculation though. Update: This press release from Apple about the new iPod touch updates paints a slightly different picture though, it indicates that the 32GB and 64GB iPod touches have the same internals as the iPhone 3GS, “The 32GB and 64GB models also include up to 50 percent faster performance and support for even better graphics with Open GL ES 2.0“. Interesting. (iPod touch ?)

iTunes 9

An expected announcement and one that took up the majority of the media event. iTunes 9 introduced a revamped interface (with it’s usual introduction of unusual / new interface aesthetics!) and a few other new features. One thing that’s disappeared though is the shopping cart feature, now you have to either add it to the also newly added Wish List feature or you have to use 1-Click purchasing! That’s a little bit scary.

There’s now also the option to share items on the store to either Facebook or Twitter, I was hoping for more integration with social networks, particularly last.fm but alas it’s not to be. One other thing I noticed is that iTunes now finally behaves like all other good Mac apps and will actually maximise when you click the maximise button! Previously this would toggle iTunes into it’s Mini Player mode, I’m really glad they’ve changed this.

Here’s a rundown of some of the new features of iTunes 9:

  • iTunes LP – Intended to introduce the digital equivalent of album covers complete with liner notes, lyric, videos etc. This is something that is long overdue, I look forward to checking out some of these. Another question though is how are these made? I’m pretty sure they won’t involve Flash but I’ll be keen to find out how they’re produced.
  • Home sharing – This basically allows you to easily share tracks between up-to five machines that you can authorise to play back songs. This seems really handy for households with more than one computer, drag and drop songs between shared libraries.
  • Redesigned iTunes Store – Improved navigation is one of the main tweaks, it now seems more like a web page with consistent navigation along the top of the window. You can also set an option in the preferences to use the full window when browsing the store, this basically gets rid of the list of options on the left hand side. It’s quite handy to get a bit more space when browsing the store.
  • iTunes Extras – Another long overdue feature! I’m not that impressed with the iTunes store’s video offerings, many movies are not available to rent until long after many other rental stores have had them. So these movies are only available to purchase, what’s more they’re a bit expensive too compared to picking them up in DVD format from somewhere like play.com or even at your local Tesco supermarket. Ok, rant over. iTunes Extras basically adds a bit more value by including the special features that you’d get on your regular (and cheaper!) DVD purchase. I’m a tiny little bit more likely to buy one now (I still probably won’t though).
  • Genius mixes – An interesting new feature, it finds songs that go well together and automatically makes mixes out of them. One thing to point out though is at first I couldn’t see where this feature was, you need to choose ‘Update Genius’ from the Store menu in iTunes in order to update and activate the feature.
  • Improved syncing – Undoubtedly one of the most sought after features by anyone who owns an iPhone or iPod touch and has a lot of applications on it, you can now organise the layout of all of your apps inside iTunes itself. It’s not quite how I’d proposed it but close ;)

iPhone OS 3.1

iPhone OS 3.1 for iPhone (and 3.1.1 for iPod touch) were announced too. It introduces a few new features that tie in with iTunes 9’s new features, nothing massively new but then again it is a point update. Amongst the various features shown on the iPhone OS software update page a couple of little tweaks caught my eye:

  • Remotely lock iPhone with a passcode via MobileMe
  • Warn when visiting fraudulent websites in Safari (anti-phishing)

Being able to lock an iPhone remotely enhances the already brilliant MobileMe feature of locating your iPhone via GPS and also remotely wiping a lost iPhone. Anti-phishing support in Mobile Safari is a great feature too, something all browsers need these days.

Anyway, enough writing about it all, I’m going to go and re-organise my iPhone apps :)