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

My favourite new feature in OSX 10.7 Lion

This has got to be one of my favourite new ‘features’ in OSX Lion, it’s found inside the iCal app:

That unnecessary ‘s’ when displaying ‘1’ unit of time has bugged me for at least the last two versions of OSX, such a simple attention to detail but one strangely overlooked by Apple for such a long time! Now my OCD brain can stay calm when adding new events into iCal!

Why Apple won’t make ‘Reading List’ a digital locker for web content

Apple have added a new "Reading List" feature to the next version of Mac OSX which is currently under development, 10.7 Lion. Reading List allows you to collect web pages and links for later reading, as such obvious but slightly inaccurate comparisons have been made to services like Instapaper and Readability, however, Reading List is different from those services as it doesn’t seem to actually cache, modify or strip back the content of the pages added to it. I was a bit surprised by this seeing as Apple added the ‘Reader’ function to Safari a while ago which basically adds the same kind of stripping back of content for easy reading that these other services offer. It seems like an obvious marriage of the two features.

Reading List + Reader = A step too far?

In light of this disconnect between these two features in Safari I’ve been wondering if there is a deeper motivation for not blending the two together. If users had the capability to use a version of Reading List which automatically used the Reader function to strip content back then I wonder if publishers would complain that Apple was robbing them of page views / ad revenue or manipulating their content without consent?

These are accusations that some have thrown at Instapaper and Readability, interestingly Readability does actually give 70% of the monthly fees that users pay to the publishers of sites that their users visit so there is obviously merit to this kind of service but also a conscience about the impact that it may have on websites which depend on visitors and advertising revenue.

I wonder if Apple are aware of this and feel that merging these two features in Safari would be a step too far? From an end user perspective the ability to strip out adverts from web pages and store website content for offline reading is a great user experience compared to browsing many of the advert-filled, cluttered websites out there. From a web publisher perspective the potential impact on revenue a service like this, albeit with the goal to provide an enhanced reading / user experience for web content, could be huge if a company like Apple integrates it directly into Safari.

Digital Locker / Cloud Streaming

Another couple of items of tech news recently were the launch of Amazon’s Cloud Drive and Google’s Music beta both of which offer what is known as Digital Locker or Cloud Streaming services for music.

Both of these services allow you to upload your own music to the cloud so that you can play it back via various net connected devices.

Now where this gets interesting is that both Amazon and Google have launched these services without any specific permission from the record labels, specifically they claim that there is no need for any special licensing terms as the service is intended for music that people own already or in Amazon’s case music which is purchased via the Amazon MP3 store.

In contrast to both Google and Amazon’s approach there is a lot of speculation about an upcoming cloud streaming offering by Apple, rumoured to be called iCloud it is thought that the service will offer cloud storage and streaming of music and movies that can be accessed via iTunes on Mac or via any iOS device. The difference between Google / Amazon and Apple is that Apple are apparently actively seeking licensing agreements with the Music companies in regard to providing this cloud based digital locker / streaming storage service and as such have the backing of the music industry.1

It’s obviously a hot topic – and which is the legitimate approach? Should Apple have to negotiate and pay money to the music companies to allow users (us!) the ability to stream content that we have already purchased? Or are Amazon and Google right that no licences are required or money due to the music companies? It’s a tricky one, but the music labels are adamant that licences are required and so it seems likely Amazon and Google will have to come to some kind of agreement or otherwise face some long drawn out legal challenges.

Reading List will not be a digital locker for web content

Apple’s stance in regard to the whole situation of digital locker / cloud streaming shows that Apple wants to keep things straight between themselves and the rights-holders of the content that will be stored in their rumoured ‘iCloud’ service. If you apply this same respect for rights-holders and publishers content to a feature like Reading List then it’s not too big a jump to surmise that Apple may not want to do the same thing to web publishers content.

It’s hard to know if there’s anything of substance to this theory, it’s just something I’ve been wondering about. The fact that even the Reader feature itself exists in Safari could be viewed as being a sign that Apple doesn’t think there’s a problem offering features that manipulate web publishers content without their consent. But given that there is / has been debate about services like Instapaper2 and that services like Readability do give money back to the publishers whose content is being accessed and read via their services, it is obviously not a clear cut situation either way. As such it would be entirely responsible for Apple to consider the implications of such a feature.

Discuss!

1. I also suspect that another difference with Apple’s service may be that it only supports content purchased directly via iTunes rather than letting you upload any music or video content. Two things back this up, 1: the music labels do not like the idea of users being able to upload their own content due to piracy fears, and 2: the Ping social network within iTunes only lets you like and share music that is in the iTunes Store.

2. I should point out that Instapaper does offer integration with Readability and as such allows Instapaper users to give back to the web publishers whose content they consume via the service. I definitely don’t intend to give the idea that the creator of Instapaper or similar services don’t respect the rights of web publishers! In fact it is possible for publishers to request that content be excluded for parsing by both Instapaper and Readability’s services – something that doesn’t seem to be possible for the Reader function built into Safari! I am myself a user of Instapaper and use the bookmarklet and RSS feed as a simple way to manage a list of articles to read at a later date.

Apple previews Final Cut Pro X at NAB in Las Vegas

Apple made their presence felt at the NAB show in Las Vegas with a preview of the next version of their Final Cut Pro video editing app, Final Cut Pro X.

In what is no doubt a long overdue update Final Cut Pro X brings what a lot of Pro video users have been waiting for: a totally redesigned interface, 64-bit memory addressing, multi-processor support, background rendering (no more render window), GPU rendering, use of more than 4GB RAM, video sizes from standard def up to 4k, real-time native format video processing – that’s quite a list!

The other announcement that is pretty awesome – a new price: $299 (not sure what that’ll be in £GBP yet, about £199 I’d guess) and, similar to Apple’s Aperture software which had a price drop recently, Final Cut Pro X will be available through Apple’s Mac App Store.

Native AVCHD?

An often featured subject in blog posts here on Suburbia is the AVCHD file format. Previously AVCHD required transcoding into some other format such as ProRes in order to edit it in Final Cut Pro, so a good question is whether the new ‘real-time native processing’ feature means that this transcoding will be a thing of the past? This is a feature that Adobe’s Premiere Pro has had for a while, albeit one that requires quite powerful hardware to make use of it. It will be interesting to see how Final Cut Pro X compares with this.

June launch date

Final Cut Pro X is due to be launched through the Mac App Store in June. In the mean time you can find out more about the new features via a couple of YouTube clips filmed at the preview announcement:

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!

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 :)

Tip: Setting up a Minolta PagePro 9100 printer under Snow Leopard

Mac OSX 10.6 brought quite a few new but subtle features and changes, one of those subtle changes was the dropping of support for the AppleTalk protocol. Many people who upgraded to Snow Leopard (or newer versions of OSX) got caught out and suddenly found themselves with a non-functioning printer.

I was aware of this change but even so I found myself in the same position, and despite all the various articles and posts I read I couldn’t get my Konica Minolta PagePro 9100 printer working. I resorted to sharing my printer via an old iMac that was running OSX 10.4 and printing that way, it worked but would take a long time to print a single page and frequently had to be rebooted to keep it working.

After running like that for a few months I decided to try and figure out how to get the PagePro 9100 working directly again as I couldn’t handle using the same slow process any more. Amazingly I managed to find a Konica Minolta setup guide and it actually worked! So here’s the process:

Configuring a PagePro 9100 printer under Snow Leopard

I followed instructions in an old Konica Minolta support PDF document that you can download from the Konica Minolta site, unfortunately their site is rubbish and doesn’t let you link to files easily so here’s a link to download it:

http://dl.dropbox.com/u/18567/Crown-MacOS10_3-installation.pdf

Note: Before you start you’ll need to know your printers IP address, the PagePro 9100 can be set to have a fixed IP address but this wasn’t needed when printing using AppleTalk so yours may not be set up with one. You’ll need to get that changed using the printer’s controls on the top. You really need to get this sorted out before you can proceed any further. Update: See end of article for help with IP address settings on your printer !

Ok, here’s the simple setup process:

  • You need to set the printer up using the IP printing method, you’ll see a blue circular globe icon in the Add Printer dialog so click that option.
  • Use the Line Printer Daemon option under the ‘Protocol’ drop down.
  • Enter the fixed IP address of your printer into the ‘Address’ field.
  • Enter a queue name in the ‘Queue’ field (I used PagePro 9100).
  • The ‘Name’ field will probably have taken the IP address automatically but this can be changed to PagePro 9100 too.
  • Select the ‘Select Printer Software’ in the ‘Print Using’ dropdown at the bottom. You should be able to find the Konica Minolta PagePro 9100 PPD file in the list. Choose that from the list.

Set the appropriate trays / bins etc for your printer etc and then that should be you set up hopefully!

Addendum: Configuring the IP address settings on the PagePro 9100

In response to a request for help in the comments below I’ve added some instructions on how to configure the IP address settings on the PagePro 9100. Configuring the settings is a bit of a pain due to the tiny little single-line display on the printer, but hopefully these instructions will help!

You need to make sure the printer is not getting a dynamic IP address via DHCP, so you need to disable DHCP on the printer. Once that is switched off you can then set the fixed IP Address that is required in order to set it as per the instruction in this article.

To get to the settings to do this press the green ‘Online’ button on the printer controls to put the printer into Offline mode, then use the ‘Select’ / ‘Next’ / ‘Previous’ buttons to move through and select options.

You need to drill down to the following settings:

Menu -> Administration -> Communications -> Optional NIC -> Crownnet -> TCP/IP

Now that you are in the TCP/IP options you need to disable DHCP, select ‘DHCP’ from the available options (there are quite a few to choose from, just keep clicking through using the Next/Previous buttons), set this to ‘#disabled’ and then click the ‘Menu’ button once to move back up one level.

You now need to set the fixed IP address, you should be back up one level with ‘DHCP’ showing in the screen. Click next a few times and select ‘Internet Address’, you should now be able to enter all the digits of your IP address. Please note that you need to include 3 digits for all four parts of the address, so rather than just ‘192.168.0.4’ you need to enter ‘192.168.000.004’.

Make sure to use whatever IP address range your network runs on, routers use various different ranges so you need to set an IP address that is appropriate for your network’s range.

Addendum #2: Get default page size on PagePro 9100 to be A4 instead of ‘Other’

If you’re using the PagePro in the UK or at least with UK region settings in order to print to A4 paper then you may find that whenever you print that the printer always uses a default page size of ‘Other’ instead of A4. Although this actually prints to A4 correctly it always bothered me that it showed this way, so I decided to figure out what the problem was.

After a bit of looking around in the PagePro 9100 OSX EN.PPD file I found all the entries relating to A4, in PPD files the dimensions of paper sizes are configured using a dimension called points, basically there are 72 points to an inch. In the case of A4 in this PPD the dimensions used are 596 by 842, however, A4 is a metric-based page size of 297mm by 210mm so I checked out what these convert to in points.

It turns out that the PPD rounds all of the page dimensions to the nearest point, so I then edited the PagePro’s PPD file to use the accurate point dimensions for A4 which are 595.28 by 841.89 (you need to replace it in a few locations in the file). I then re-setup the printer with the updated PPD and it now uses A4 as the default page size once more! It seems that OSX 10.6 is fussier about the specific page dimensions than OSX 10.5 was, but this tweak sorts it out. I’m sure you could modify the PPD for any other paper format that you wanted to use, just google the correct point dimensions for your page size and the update it in the file.

Here’s a link to an already modified PagePro 9100 PPD file with updated A4 dimensions to save you having to tweak it yourself.

Addendum #3: OSX 10.7, 10.8, 10.9, 10.10, 10.11, 10.12

These instructions will basically work for all version of OSX since Snow Leopard, so 10.7 Lion, 10.8 Mountain Lion, 10.9 Mavericks, 10.10 Yosemite, 10.11 El Capitan definitely all work and 10.12 Sierra should be fine too as the protocols used are the same.