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.