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 February 16, 2021
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 on iOS: Go to Settings > Safari > Advanced and move the Web Inspector toggle switch to the On position.
  • Use Web Inspector on macOS: Connect your iOS device to a Mac and choose the URL to inspect from the Develop menu.

If you run into a bug or another issue with a website on Safari mobile, use the Web Inspector tool to investigate. This article explains how to use the Safari console for iPhone to debug errors with the help of your Mac computer. Instructions apply to iPhones with iOS 14, iOS 12, and iOS 11 and Macs with macOS Big Sur (11.0), macOS Catalina (10.15), and macOS Mojave (10.14).

Activate Web Inspector on Your iPhone or Other iOS Device

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:

  1. Open the iPhone Settings menu.

    On an iPhone with an early version of iOS, access the Debug Console through Settings > Safari > Developer > Debug Console. When Safari on the iPhone detects CSS, HTML, and JavaScript errors, details of each display 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. Select Advanced from the bottom of the list of options.

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

    An iPhone showing how to turn on the Safari Web Inspector

Connect Your iOS Device to Safari on a Mac

To use the Web Inspector, connect your iPhone or another iOS device to a Mac that has the Safari web browser and enable the Develop menu.

  1. With Safari open, click Safari in the menu bar and choose Preferences.

    Safari with the Preferences menu item highlighted

  2. Click the Advanced tab.

    Safari preferences with the Advanced tab highlighted

  3. Select the Show Develop menu in menu bar check box and close the settings window.

    Safari advanced settings with the "Show Develop Menu" option highlighted

  4. From the Safari menu bar, select Develop, click the name of your attached iOS device, and then select the URL that appears under Safari to open the debug console for that site.

    Safari mobile Web Inspector activated from the Develop menu on macOS

    After you connect your device, use your Mac to inspect the website you want to debug and have it open in the Safari mobile browser.

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.

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.

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.

Was this page helpful?