How do I debug my iPad from my Mac?

Co-founder & CTO, Busbud
February 8, 2017

Infrastructure

How to debug Safari on your iPhone from Safari on your computer

When we were testing our implementation of Apple Pay on our iPhones, we found a few issues where we needed a proper debugger. This post describes how to set one up, connected to your phone so you can figure out what went wrong.

Setup

On recent versions of iOS [v6 and up], Apple offers a remote debugger for your iPhone, iPod or iPad’s Safari web browser.

Here’s how you set it up

1. On your iPad, iPhone or iPod, go to Settings > Safari > Advanced and toggle on Web Inspector.
2. On your Mac, open Safari and go to Safari > Preferences > Advanced then check Show Develop menu in menu bar.
3. Connect your iOS device to your Mac with the USB cable.
4. On your Mac, restart Safari.
5. On your iOS device, open the web site that you want to debug.
6. On your Mac, open Safari and go to the Develop menu. You will now see the iOS device you connected to your Mac.

NOTE: If you do not have any web page open on your iOS device, you will see a message saying “No Inspectable Applications”.

Connecting the debugger

Once connected to your iOS device from your Mac, you can easily debug your web site just as you would if you were testing a web site locally.

NOTE: The following instructions describe working with an iPhone, but they work just as well with an iPad or iPod.

1. On your iPhone, open up the website you want to debug; in our case, www.busbud.com
2. On your Mac, in Safari, go to Develop > iPhone > www.busbud.com. This will open a Safari Web Inspector window on your Mac.
   
3. On your Mac’s Safari Web Inspector window, fire up the debugger tab, check off the Breakpoint for All Exceptions.
   
4. On your iPhone, interact with your website, and on your Mac’s Safari Web Inspector window, resume script execution and inspect variables until you find the bit of buggy code you were seeking. Then fix it ⚡️.

Happy debugging!

Mike Gradek
Busbud CTO and Co-Founder

Source: Busbud engineering

Use Safari's web developer tools to study problematic websites

Updated on September 30, 2022

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, or iOS 11, and well as Macs with macOS Big Sur [11.0], macOS Catalina [10.15], or 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. Scroll to the bottom of the page and select Advanced.

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

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, select Safari from the menu bar and choose Preferences.

2. Select the Advanced tab.

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

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

   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.

FAQ

• 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 a sort of workaround, but it's not recommended unless you're familiar with the package management app you intend to use.

Thanks for letting us know!

Get the Latest Tech News Delivered Every Day

Subscribe