How to inspect elements of a website on an iPhone

You've design a beautiful website that functions and displays fine on your desktop and on the virtual mobile devices from tools like Responsive Web Design Tester Chrome extension. You deploy it and visit the site on your physical only to discover that some elements don't align or the footer isn't sticky as you expected. You can review your code, do some fixes and redeploy the code and check on your phone again and again until the issue issue is fixed or you can follow these steps to inspect the elements of your site as it appears on your Safari mobile browser.

First, connect your iPhone to your computer  

Now, open the Safari browser on your machine and go to the menu bar at the top of the screen and click on Safari > Preferences. A dialog will open

Click on the Advanced tab and check the Show Develop menu in menu bar option and close the dialog box

In you check your Safari menu bar at the top of the screen, you should see Develop

Unlock your iPhone, open Safari and go to your website

Return to your computer, with Safari still selected, click Develop > mouse-over your iPhone's name > your website

The Safari web inspector will open and you should be able to select elements and see your selection on your iPhone in realtime

If you see a message telling you to enable web inspector on your phone, follow these steps:

Open the Settings app > tap Safari > scroll to the bottom > Advanced > enable Web Inspector

Happy debugging!