How to Activate Web Inspector to Debug Safari on iPhone

Most of the Apple users are aware of the feature Web Inspector, but a very few know how to use it and what’s the purpose actually. In simple words, the Web Inspector is the primary web development tool in Safari. It can be really helpful in inspecting, tweaking, debugging, and analyzing the performance of your web page opened in the Safari tab.

Before getting into the details of how it works, it is recommended that you ensure that your iPhone is running on the latest iOS. There have been complaints where phones get nearly dead just because the users were debugging on a non-updated device. Anyway, you just need iOS 6 or later to use this feature, so almost all of the iPhone owners can utilize this great feature. Here are the steps.

Same Apple ID:

The first step is to make sure that both the Mac and iPhone are synced via the same Apple ID and the feature Safari is toggled on. Also, Windows users will need to find another method as it is only applicable to Mac. To enable Safari across both the devices, you can:

On iPhone:

1. Open Settings.

2. Tap on your Apple ID; the first option on the screen.

3. Next tap iCloud.

4. Now see if Safari is Check-marked.

On Mac:

1. Open System Preferences from Apple Menu.

2. Click iCloud.

3. See if Safari is Check-marked.

4. Additionally, make sure that both the devices are running the same version of Safari. If not, update either as per requirement.

Using Web Inspector:

iPhone Part:

1. Launch the Settings on your iPhone.

2. Tap on the option Safari.
locate the option Advanced

3. Scroll down, locate the option Advanced and tap on it.
enable Web Inspector by toggling it on

4. Now enable Web Inspector by toggling it on. You will also need to enable JavaScript if it is toggled off.

Mac Part:

1. Launch Safari on Mac.

2. Click on the Safari Menu followed by a click on Preferences.

3. Next click Advanced.

4. Check “Show Develop menu in menu bar” if you have not done so already.

5. Now connect your iPhone to Mac via a charging cable. Do not connect the devices over the Wi-Fi as Wi-Fi isn’t supportive in this method.

6. Now open the website you want to debug on iPhone’s Safari.

7. Launch Safari on Mac and click the option Develop. You will be able to locate your iPhone as it is connected to Mac. You will see the message No Inspectable Applications if no web page is open on the Safari (iPhone).

You will be able to debug the opened page just by clicking on it. It will let you inspect DOM elements, modify CSS, measure page performance and run JavaScript commands.

The other functionalities you can check via the debugger tool are identifying JavaScript errors on the page, add breakpoints and debug the JavaScript as well.

You will also be able to view any CSS or HTML errors and their details in the debugger.

No Device in Develop Menu:

Some users have raised the issue that they are unable to see their device in the Develop menu. There could be a lot of reasons why this could be happening. If you are also facing this issue then run through these quick fixes tips and one of them would surely work for you.

1. Clear Web history and cache and cookies on Safari.

2. Try a different connecting cable. Do not use any cable other than Apple’ original.

3. Revisit the Web Inspector to see if it is toggled on. It has been reported that some users enabled this feature and iOS disabled it automatically for no apparent reason.

4. Try not to use Private Browsing mode. Private browsing mode does appear in the Develop tool but it disappears quite often. The reason isn’t clear but it is better if you use normal browsing.

5. Fancy using Safari Technology Preview browser instead of the original one.

6. Disable the Web Inspector (while connected to the Mac) and enable it back after 30-60 seconds.

7. Use Activity Monitor to see if Safari’ performance is up to mark or not.

8. Change the USB port on your Mac as port sometimes can be damaged.