Inspect Element Browser of Devices in Desktop

iOS Devices
Inspect­ing ele­ments on iPad and iPhone is extremely easy. I hope this inspires you design­ers out there to get your designs look­ing good on all kinds of devices. In order to do this, you’ll need your iPad or iPhone device (obvi), an Apple com­puter (sorry PC users) with Safari and the USB cord that con­nects your device to your com­puter. Let’s dig in.

  1. First, go to Set­tings > Safari and check ‘Enable Web Inspec­tor’, shown below:
    iPad Web Inspector
  2. Open up Safari on your device and go to the page you want to inspect. I am going to our homepage.
  3. Plug your ipad/iphone into your com­puter and open up Safari on your desktop.
  4. Go to Develop > Your iPad/iPhone Device > the tab you want to inspect.
    Inspect Element iPad
  5. 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 sim­ple, we just need to install the ADB Chrome exten­sion on our devel­op­ment 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 com­puter, Chrome 28+ on the dev com­puter with the ADB Chrome exten­sion installed and a USB cord. From my research, inspect ele­ment only works on Chrome 28 and above with­out some more dif­fi­cult steps. Here goes…

    1. Once you have installed the ADB Chrome exten­sion, con­nect your device to your beau­ti­ful Apple machine with a USB cable.
    2. You will most likely get a mes­sage ask­ing if you want to allow USB debug­ging. Check ‘Always allow’ to avoid annoy­ing repeated mes­sages and then click Okay.
    3. On your Android device, launch Chrome. Open Set­tings > Devel­oper Tools (under Advanced) > Check ‘Enable USB Web debugging’. Chrome Inspect Element
    4. In Chrome on our shiny Apple, you will see a lit­tle 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.
    5. 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 Inspec­tion Tar­gets’. 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 Devel­oper Tools win­dow will open.