Debug Safari Issues With Web Inspector on iPhone
A short walkthrough for examining mobile site behavior
Reviewed by Jessica Kormos
Lifewire / Miguel Co
The Download
Activate Web Inspector on iOS: Settings > Apps > Safari > Advanced > Web Inspector.
Use Web Inspector on a Mac: Connect your device and choose the URL to inspect from Safari's Develop menu.
If you run into a bug or another issue with a website on Safari, use the Web Inspector tool to investigate. This article explains how to turn on this feature from your phone to debug errors with the help of your Mac.
How to Activate Web Inspector on iPhone
The Web Inspector is disabled by default since most iPhone users have no use for it. However, if you're a developer or you're curious, you can activate it in a few short steps. Here's how:
Open your phone's Settings app.
Expert Tip: Note
On an iPhone with an early version of iOS, access the Debug Console through Settings > Safari > Developer > Debug Console. When Safari detects CSS, HTML, and JavaScript errors, details of each are displayed in the debugger.
Scroll down and tap Apps > Safari.
Select Advanced at the very bottom of the page.
Move the Web Inspector toggle switch to the On position.
Open Safari to the web page that you'll inspect.
Connect Your iPhone to Safari on a Mac
To use the Web Inspector, connect your device to a Mac and enable the Develop menu in Safari.
With Safari open, select Safari from the menu bar and choose Settings.
Select the Advanced tab.
Select the box at the bottom of the window, next to Show features for web developers. If you don't see that, look for Show Develop menu in menu bar.
Select Develop from the Safari menu bar.
Hover the mouse over your device name and then select the URL that appears under Safari to open the debug console for the website that's open on your phone.
Web Inspector will open.
What Is Web Inspector?
Web developers use Web Inspector to modify, debug, and optimize websites on Macs and iOS devices. With Web Inspector open, developers can inspect the resources on a web page. The Web Inspector window contains editable HTML and notes regarding the styles and layers of the web page in a separate panel.
With Safari 9 and OS X Mavericks (10.9), Apple introduced Responsive Design Mode in Web Inspector. Developers use this built-in simulator to preview how web pages scale to different screen sizes, resolutions, and orientations.
Expert Tip: Tip
Before iOS 6, the iPhone Safari web browser had a built-in Debug Console that developers used to find web page defects. Recent versions of iOS use Web Inspector instead.
Related: How to View HTML Source in Safari
Frequently asked Questions
How do I use Web Inspector on my iPad?
To set up Web Inspector on your iPad, open your iPad's Settings and select Safari > Advanced, then turn Web Inspector On. Connect the iPad to a Mac computer, then open Safari on the Mac and select Safari > Preferences > Advanced, then turn on Show Develop menu in menu bar.
Can I use Web Inspector on iOS with Windows Chrome?
You cannot just connect your iPhone to a Windows PC and start using Web Inspector through Chrome like you can with a Mac. Installing package manager software can provide you with a sort of workaround, but it's not recommended unless you're familiar with the package management app you intend to use.
Read the original article on Lifewire
