How to use the Web Inspector on Safari for iOS

Websites aren’t always accessed from a desktop system. Mobile devices have browsers too and they are used to access websites just as often, if not more, than on desktops. In rare cases, popular websites will have a mobile app but most websites do not have one. That’s why a website needs to work somewhat reasonably on both desktop and mobile browsers. To make sure they do, websites need to be debugged during development on mobile web browsers which is where you run into problems since they do not have a console like desktop browsers.

Need to access the Console for mobile Chrome on Android? Check out our guide.

Web Inspector on Safari

If you’re debugging websites on Safari on iOS, you can use Safari’s built-in web inspector. The only restriction is that you need to have a Mac. The web console on mobile Safari is accessed via Safari on a Mac. Setting it up takes a while.

iCloud account

In order to use the web inspector on Safari, the iOS device and the Mac must be using the same iCloud account and set to sync Safari.

macOS

1. Open System Preferences.
2. Go to Apple ID (take note of the ID that is in use).
3. Select iCloud in the column on the left, and make sure Safari is enabled in the pane on the right.
4. Open Safari.
5. Click Safari in the menu bar and select Preferences.
6. On Safari’s preferences, go to the Advanced tab.
7. Enable the ‘Show Develop menu in menu bar’.

iOS

1. Open the Settings app.
2. Tap your account at the top.
3. Make sure the Apple ID that is used is the same that is being used on the Mac.
4. Tap iCloud.
5. Enable iCloud for Safari.
6. Return to the main Settings app screen.
7. Go to General and scroll to the bottom.
8. Go to Reset>Reset Location & Privacy.

Enable Web Inspector

You’re now ready to connect the iOS device to your Mac.

1. Using a data cable, connect the iPhone (or iPad) to the Mac.
2. On your iPhone, you will see a prompt asking if the computer it’s been connected to should be trusted. Tap Trust, and enter the passcode to your device.
3. Open Safari on the iPhone and visit the website you want to debug.
4. On the Mac, open Safari and go to Develop. Your iPhone should show up in the sub-menu. Select it, and select the website that you want to debug. It will show up in the sub-menu.
5. A new window will open with the web inspector.

Troubleshooting

In some cases, the above method may not work. This is a bug with macOS. The one thing that works in almost all cases is the fix below howeve, do the following AFTER you’ve followed the steps in the previous section.

1. Disconnect the iPhone from the Mac.
2. Open the Settings app on the iPhone.
3. Go to General>Reset>Reset Location & Privacy.
4. On the iPhone, turn Off WiFi, turn On Bluetooth, and turn on Mobile Hotspot.
5. Connect the iPhone to the Mac. Trust the computer when prompted to on the iPhone.
6. Open Safari on the iPhone, and visit the website you want to debug.
7. On the Mac, open Safari.
8. Go to Develop>Your iPhone>Connect via Network.
9. Next, go to Develop>Your iPhone>Select the website open in Safari on the iPhone.

Conclusion

Debugging a website in Safari for iOS can only be done with you have a Mac. You need to make sure that the version of Safari on iOS is the same as that on Mac. A good rule-of-thumb is to always run the latest stable version of iOS and macOS when you debug a website. This will ensure that the version of Safari is the same on both platforms.

Read Full Bio

Fatima Wahab

Fatima has been writing for AddictiveTips for six years. She began as a junior writer and has been working as the Editor in Chief since 2014. Fatima gets an adrenaline rush from figuring out how technology works, and how to manipulate it. A well-designed app, something that solves a common everyday problem and looks

Latest from Author

How to Take a Screenshot on Windows Best FPS Counter Software for Windows