How to Use Web Inspector on an iPhone

Co-authored by wikiHow Staff

Last Updated: December 17, 2017 Tested

This wikiHow teaches you how to use Apple's desktop Safari app to check the performance of mobile web pages in Safari for iPhone.

Part 1

Part 1 of 3:
Enabling Web Inspector on Your iPhone

1
Open your iPhone's Settings. It's a gray icon containing gears on your home screen.
2
Scroll down and tap Safari. It's in the fourth or fifth group of settings, along with other Apple iPhone apps, like Mail and Contacts.

Advertisement
3
Scroll down and tap Advanced. It's at the bottom of the menu.
4
Slide the button next to "Web Inspector" to the "On" position. It's the last option and will turn green when enabled.

Advertisement

Part 2

Part 2 of 3:
Enabling Web Inspector on Your Mac

1
Open Safari on your Mac. It's the app that looks like a blue compass.
2
Click on Safari. It's in the menu bar in the upper-left corner of the screen.
3
Click on Preferences.
4
Click on ⚙️Advanced. It's the rightmost tab along the top of the window.
5
Check "Show Develop menu in menu bar." It's at the bottom of the window.
6
Connect your iPhone. Use the USB cable that came with your device to connect your iPhone to your Mac.

Advertisement

Part 3

Part 3 of 3:
Using Web Inspector on Safari for iPhone

1
Open a web site. On Safari for iPhone, open the mobile web page you'd like to debug.
2
Click on Develop. It's the third drop-down menu from the right on Safari for Mac.
3
Click on your iPhone. It will be listed near the top of the menu.
4
Click on the web site. It appears in a pop-up to the right of your iPhone.
- If you didn't open a web site on your iPhone's Safari app, you'll see a "No inspect able applications" message.
5
Inspect the page. Using Safari on your Mac, you can enhance and measure the performance of mobile pages on your iPhone.
- Web Inspector lets you run commands in JavaScript to create a more dynamic, interactive experience for the user, such as animation and real-time messages.
- Inspect DOM (Document Object Model) elements for errors in the HTML, XML, or JavaScript commands.
- Use CSS to update or edit the layout, colors, and fonts on mobile pages.
Advertisement

You Might Also Like

Advertisement

About This Article

Co-authored by:

wikiHow Staff Writer

This article was co-authored by wikiHow Staff. Our trained team of editors and researchers validate articles for accuracy and comprehensiveness. wikiHow's Content Management Team carefully monitors the work from our editorial staff to ensure that each article is backed by trusted research and meets our high quality standards. This article has been viewed 10,956 times.

How helpful is this?

Co-authors: 5

Updated: December 17, 2017

Views: 10,956

Categories: IPhone Applications

Advertisement