Entity view (Content)

Remote Debugging on Devices

By bmacdonell
Mar. 12, 2015

As a front end developer working with responsive design you can encounter a wide variety of devices that all need to look consistent. This can be a challenge in our ever expanding world of device options. It is no longer sufficient to test your site on your iPhone and move on. Luckily there are a number of techniques that you can use to make sure your site looks great no matter the end users device.

For most of the features that you are working on in responsive design the in browser device emulation should get you most of the way there. There are features available in Chrome and FireFox that will help you out here. To access them, open the web inspector tools and click on the mobile icon. This will bring up a number of options including an extensive list of device options. Simply changing the device will give you a better sense of how your layout and styling look. An added bonus to this is that they actually change the user agent, so you can see how things look in something like a Windows phone.

As good as these browser based emulators have become, sometimes you need to something closer to the actual device. This is where a tool like XCode comes in handy. Using this will allow you to launch a number of iOS based devices along with different operating system versions. That becomes quite useful when you get a bug for something like iOS7 and your device has already been upgraded.

Of course the emulators mentioned above are just that, a recreation of the actual device. There are times when you need to test on a real device to get a better sense of the user experience. There are a couple of different ways to perform remote debugging in this case. For iOS you can use Safari’s web developer tools and your phone connected via USB to inspect your site. A similar workflow is available on Chrome and Android provided your phone is connected.

Lastly I should mention that there are ways of testing over your wifi network as well. I have had great success using the built in network that come with Codekit. By including this option you can debug any device as long as they are connected to the same network. This has been essential on a recent bugfix for myself where I had a ticket for the default Android browser.

Thankfully emulators have come a long way and there are an ever increasing number of ways to debug your devices. You can no longer say that just because you don’t have the device you can’t test it out. Enjoy and happy remote debugging!

Post Tags: