Inspect Element on Devices
Guru’s next release, slated for beta in early October, marks the start of a new beginning for the company – responsive design. I would be lying if I said I wasn’t nervous to be working on the marketing material for the release that plays up the to-be responsive-ness. While the simple HTML mock-ups, which pull in no data, may look beautiful across multiple devices, how this will evolve from backend development into testing and go-live is still a mystery to me. Our small team has planned out the user experience of breakpoints, responsive images and even dealt with the most important part, speed, to prepare for the release. I decided to take it upon myself to focus on how to transition our design team’s beautifully designed HTML mockups into a beautiful responsive design on the live site.
Test on Devices
I had my first official conversation about the plan to test across multiple devices at work last month. With responsive being a new addition to our process, it’s important there is a plan of attack on device testing. I started poking around asking questions to people on the team. My first conversation left me a bit defeated. One sentence, in particular, stood out:
…there are these plugins for Chrome which can change browser size to the device specific values.
Ahhh! No, please, no! Testing on a Chrome plugin that will resize your desktop browser is not an okay substitute for testing a large scale responsive website. Keep those tools handy for the beginning of the project when you are trying to mess around with breakpoints and set up a foundation and design. Under no circumstance will a resize tool work in place of using actual devices. Sure, we aren’t going to be able to test on every device out there. However, testing on some of the actual devices most commonly used will allow you to see some of the things that resizing that browser window of yours won’t show… things like elements skipping and jumping around on the screen.
iOS Devices
Inspecting elements on iPad and iPhone is extremely easy. I hope this inspires you designers out there to get your designs looking good on all kinds of devices. In order to do this, you’ll need your iPad or iPhone device (obvi), an Apple computer (sorry PC users) with Safari and the USB cord that connects your device to your computer. Let’s dig in.
- First, go to Settings > Safari and check ‘Enable Web Inspector’, shown below:
- Open up Safari on your device and go to the page you want to inspect. I am going to our homepage.
- Plug your ipad/iphone into your computer and open up Safari on your desktop.
- Go to Develop > Your iPad/iPhone Device > the tab you want to inspect.
- Inspect away! It’s that easy.
Android Devices
As per usual, things aren’t quite as easy when you aren’t on an Apple. Never fear, they are still simple, we just need to install the ADB Chrome extension on our development machine. My research shows this method is only good for Chrome 28 and above. If you don’t have an up to date browser, you may require more steps. We’ll need our Android device, Apple computer, Chrome 28+ on the dev computer with the ADB Chrome extension installed and a USB cord. From my research, inspect element only works on Chrome 28 and above without some more difficult steps. Here goes…
- Once you have installed the ADB Chrome extension, connect your device to your beautiful Apple machine with a USB cable.
- You will most likely get a message asking if you want to allow USB debugging. Check ‘Always allow’ to avoid annoying repeated messages and then click Okay.
- On your Android device, launch Chrome. Open Settings > Developer Tools (under Advanced) > Check ‘Enable USB Web debugging’.
- In Chrome on our shiny Apple, you will see a little Android icon on the right of the url bar. Click it and check start ABD. When you aren’t using this to test, you can turn it off.
- Once this is on and your device is plugged in, click the icon which will be lit up to green with a 1 next to it for your plugged in device. Select ‘View Inspection Targets’. This will bring up a new tab with a list of your open tabs. Next to the tab you want to work with. Click ‘Inspect’ and your Developer Tools window will open.
That’s it. Happy inspecting! 🙂
Comments (18)
Leave a Reply
Hi Lauren,
Adobe Edge Inspect is pretty fantastic for allowing you to preview your design across multiple devices and keeping the page you’re looking at in sync. You can also take screenshots on all the devices at once. Inspect also provides access to developer tools for live debugging.
I also find forwardhq indespensible. This service will enable you to have a temporary URL for demoing and previewing website on your laptop. Just send a client a link to your HTML mock ups, or get some work done at a coffee shop and cut the USB cord.
BTW, you can learn to code. Really I promise you, it’s hard but rewarding and with responsive design it’s more important than ever.
Link to commentAwesome Asa, thanks for the suggestions! I will definitely have to try those out.
I decided to split the learn code into another post, since there was so much to say about it. 🙂
Link to commentDefinitely want to play with Edge Inspect. I did a while back when it was in it’s infancy, but I’m sure it’s a ton more powerful now.
Link to commentHi Lauren, thanks for the interesting post!
Link to commentFor iOS devices, I’d like to mention the free MIHTool which works as Web Inspector both inline and remotely via weinre.
Hi. i connected my ipad to desktop(windows). now when i go to develop tab there is no ipad listed. can i use windows desktop or should i use apple desktop only ?
Link to commentAs far as I know Safari remote debugging is Mac only at this point. You may be able to use a third party tool, like Adobe Edge inspect.
Link to commentthank you very much .. i installed it and it’s working great…
Link to commentUhm, you could inspect Mobile Safari on Linux and MacOS with https://github.com/google/ios-webkit-debug-proxy
Hopefully, Windows support will come soon.
Link to commentIt’s really nice post. So helpful. Thanks a lot.
Link to commentHi,
Great article, just what I was looking for! Been a developer for a couple of years now & only just come across an iPad specific issue (I must be lucky!).
Although this doesn’t seem to work for older versions of iPads, on mine I don’t see ‘web inspector’ under the advanced settings, maybe a future article could include that too =)
Thanks
Jo
Link to commentThere is also a option available to remotely debug firefox browser on android devices
https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android
Link to commentGreat article, it pointed me forward to the right direction. My Imaq is still on 10.6 – Snow Leopard with Safari 5. After searching Google I found out that connecting devices from the developer menu is available from Safari version 6. Therefore I need to upgrade my Mac OS X version. But reading the comments I understand there are other ways to inspect elements on IOS devices. Thanks.
Link to commentFor iPhone users id will not longer work.
Link to commentHi
I am a test engineer for Roku TV applications, I wanted to write automated test scripts to test Roku app – does any one know how to inspect elements of a Roku app. Thanks !
-NRM
Link to commentThanks for posting this! I was trying to figure out how to do that for a task at work.
Link to commentWhat I’m looking for is a way to inspect an element on my iPad via usb to my macbook. I have the usb set up and can see the safari web inspector on my macbook correctly and as I mouse through the code it does highlight the sections of the webpage on my iPad. But, is there a direct way to click on an element on the iPad to zero in on that specific element in the macbook window? In other words, where’s the “right-click-inspect-element” shortcut for iOS?
Link to commentJust wanted to say thank you for the article. It helped me figure out a problem for a client’s website. Thank you!
Link to commentGreat article! it helped me alot
Link to comment