How to Activate the iPhone Debug Console or Web Inspector

Use Safari's web developer tools to study problematic websites

by
Scott Orgera
Scott Orgera
Writer
Scott Orgera is a former writer who covering tech since 2007. He has 25+ years experience as a programmer and QA leader, and holds several Microsoft certifications.
our editorial process
Scott Orgera
Updated on December 14, 2020
reviewed by
Jessica Kormos headshot
Jessica Kormos
Lifewire Tech Review Board Member
Jessica Kormos is a writer and editor with 15 years' experience writing articles, copy, and UX content for Tecca.com, Rosenfeld Media, and many others.
our review board
Article reviewed on Mar 27, 2020
Jessica Kormos

What to Know

  • Activate Web Inspector: Go to Settings > Safari > Advanced and move the Web Inspector toggle switch to the On position.
  • Activate on early versions of iOS: Access the Debug Console through Settings > Safari > Developer > Debug Console.
  • Use Web Inspector: Connect your iPhone to a Mac, then enable the ​Develop menu in the Safari Advanced Preferences.

This article explains how to open the iPhone debug for Safari. Instructions apply to iPhones with iOS 12 through iOS 6 and Macs with Mac OS X Leopard (10.5) and later.

Activate Web Inspector on iPhone iOS 6 and Later

The Web Inspector is disabled by default since most iPhone users have no use for it. However, developers can activate it in a few short steps. Here's how:

  1. Tap the Settings icon on the iPhone Home screen.

    On an iPhone with an early version of iOS, access the Debug Console through Settings > Safari > Developer > Debug Console. Whenever Safari on the iPhone detects CSS, HTML, and JavaScript errors, details of each are displayed in the debugger.

  2. Scroll down and tap Safari to open the screen that contains everything related to the Safari web browser on your iPhone, iPad, or iPod touch.

  3. Scroll to the bottom of the screen and tap Advanced.

  4. Move the Web Inspector toggle switch to the On position.

    Screenshots of an iPhone showing how to turn on Safari's Web Inspector

Connect iPhone to Safari on a Mac

To use the Web Inspector, connect your iPhone or another iOS device to a Mac that's running the Safari web browser. Plug your device into the computer using a cable.

With Safari open, do the following:

  1. Click Safari in the menu bar and choose Preferences.

    A screenshot of Safari with the Preferences menu item highlighted

  2. Click the Advanced tab.

    A screenshot of Safari preferences with the Advanced tab highlighted

  3. Select the Show Develop menu in menu bar check box.

    A screenshot of Safari advanced settings with the "Show Develop Menu" option highlighted

  4. Exit the settings window.

  5. In the Safari menu bar, click Develop, then select Connect Web Inspector.

    A screenshot of Safari with "Connect Web Inspector" under the Develop menu highlighted

Your attached iPhone or other iOS device appears in the Develop drop-down menu. With Web Inspector open, developers can inspect all 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.

What Is Web Inspector?

Before iOS 6, the iPhone's 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. Web Inspector is used by web developers to modify, debug, and optimize websites on Macs and iOS devices.

Was this page helpful?