ios simulator safari console

• Is a New iPad Pro Coming Soon?
• Get It Now: Spring Tech Deals at Amazon

How to Activate the iPhone Debug Console or Web Inspector

Use Safari's web developer tools to study problematic websites

• Saint Mary-of-the-Woods College
• Switching from Android

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:

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.

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.

Scroll to the bottom of the page and select Advanced .

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 .

With Safari open, select Safari from the menu bar and choose  Preferences .

Select the  Advanced  tab.

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

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.

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 .

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.

Get the Latest Tech News Delivered Every Day

• Add More Features by Turning on Safari's Develop Menu
• How to Use Web Browser Developer Tools
• How to Activate and Use Responsive Design Mode in Safari
• How to Inspect an Element on a Mac
• 4 Ways to Play Fortnite on iPhone
• 10 Hidden Features in macOS Sonoma
• How to Clear Search History on iPhone
• How to Disable JavaScript in Safari for iPhone
• How to View HTML Source in Safari
• How to Manage Cookies in the Safari Browser
• How to Change Your Homepage in Safari
• How to Clear Private Data, Caches, and Cookies on Mac
• How to Reset Safari to Default Settings
• How to Clear Internet Cache in Every Major Browser
• How to Manage History and Browsing Data on iPhone
• How to Manage Your Browsing History in Safari

Freelance iOS, macOS, Apple Watch, and Apple TV Developer

Web inspector on ios devices and simulators.

Want to keep up to date? Sign up to my free newsletter which will give you exclusive updates on all of my projects along with early access to future apps.

Over the past few weeks I’ve worked on a number of projects that have necessitated me working with HTML and JavaScript be that via Safari on iOS, an SFSafariViewController, or in an embedded WKWebView. In all of these cases, I’ve needed to dive into the DOM to see what styles are being applied to certain elements or dig into a JavaScript Console to work out why some code isn’t working. On desktop, this is trivial as Safari has a Web Inspector panel built in similar to other browsers. It turns out it is also trivial on mobile as the exact same tool can be used with both iOS simulators and physical devices.

If you select the ‘Develop’ tab from the menu bar of Safari on macOS, you’ll see a list of all of your connected devices and actively running simulators 1 . Drilling into this will then show all of the active web instances you can interact with; notice how the content within Safari has highlighted blue within the Simulator as I’ve moused over the twitter.com web instance above. When you click, a web inspector panel is then produced which allows you to make all the usual interrogations and changes you can within desktop Safari such as interacting with the console or changing CSS values of elements to see how they would look in realtime.

Here’s an example using a WKWebView within one of my client projects, Yabla Spanish :

Discovering that simulators and devices could be interacted with in this way has been a huge timesaver for me. Whilst developing Browser Note , I was constantly needing to tweak CSS values and investigate the current state of the DOM as websites have various tricks to try and make ads or cookie notices appear on top of all content (and the note needed to be on top at all times - you should totally take a look at Browser Note whilst you’re here). In doing this, I was then able to put this knowledge to use on no less than 3 client projects in the past month; this validates my theory that by working on your own side projects you can improve your efficiency when it comes to work projects.

There are a few caveats to be aware of when using the Web Inspector with an iOS device or simulator:

• If you want to use this on an actual device you’ll first need to enable the Web Inspector on iOS. To do this, go to the Settings app and then Safari > Advanced and toggle the Web Inspector on.
• Whilst the Web Inspector can interrogate WKWebView, it can only do this for apps you are running via Xcode. You cannot look at the WKWebView of apps you did not create nor of your own apps from TestFlight / the App Store. However, you can inspect debug builds installed via Xcode even if the debugger is not active (i.e. you build to the device then quit Xcode).
• Conversely, you can use the Web Inspector with any SFSafariViewController even if it is not in your own app.
• Whilst it is still possible to submit apps that use UIWebView, the web inspector will not work with them; it needs to be WKWebView .
• This also works for AppKit, SwiftUI, and Catalyst apps on macOS.

I use an “iDod” naming prefix for all of my devices; a throwback pun to my first Apple product, the iPod.  ↩︎

Debug iOS Safari with Xcode Simulator and Web Inspector

• Published: 15 Jun 2020

Uses: Xcode simulator

How I debug CSS for iOS Safari on my MacBook Pro.

If you're like me and don’t have an iOS device, you can use Xcode Simulator to view and debug mobile Safari from your Mac.

Why would you need to simulate mobile Safari? Phones in general don't even have web inspectors for debugging. Have you ever had a CSS quirk on an iPhone and no iPhone to test with? I have.

As a lifelong Android user and web designer by trade, I regularly need to preview, test, or fix things for iOS Safari. Thankfully my MacBook has a way to simulate iOS devices so that I can preview and debug mobile Safari! Likewise, it can simulate older and newer iOS versions if needed.

The following steps may vary for newer and older versions of macOS, Xcode, and Safari. This guide uses:

• MacBook Pro (Retina, 15-inch, Mid 2015)
• macOS Mojave version 10.14.6
• Xcode version 11.3.1
• Safari version 13.1.1

Step 1: Open Xcode and Launch Simulator

From your Applications, launch Xcode. (Optionally, update Xcode if it yells at you when you try to open it.)

Once Xcode opens, navigate to Open Developer Tool > Simulator from the Mac toolbar.

If you’re a Spotlight user (which I am not), just search for Simulator and bypass launching Xcode altogether.

Step 2: Adjust the Simulator

A simulated device should pop up on your screen and begin loading. From the Mac toolbar, you can adjust the simulator via Hardware > Devices and select the OS and Device. You can pick from various iPhones and iPads in the iOS dropdown.

If you need something different, select Manage Devices for a suite of additional options:

Under Devices, add a device connected through USB.

Under Simulators, add a new simulator by selecting a device and iOS version (or install an additional iOS version runtime).

You can choose to use the simulation at the actual device size (instead of your screen's full height). Assign it via the Mac toolbar under Window to Physical Size.

Step 3: Simulate iOS Safari

In the Simulator, open up mobile Safari. Navigate to the appropriate page you’d like to interact with via Safari Web Inspector.

On your Mac, open up Safari. In the Mac toolbar under Develop , select the Simulator option beneath your device’s name. Pick the iOS Safari tab loaded in the Simulator. Web Inspector will launch to start debugging mobile Safari!

Step 4: Use Web Inspector to Debug Mobile Safari

Now you can go about your business and hopefully resolve whatever brought you down this rabbit hole to begin with. Debug mobile Safari just like you normally would for desktop Safari.

Additional Resources

Need more help?

• Visit Apple's Simulator Help
• Visit Apple's Safari Developer Help

Other guides that may be helpful:

• Debugging Your iPhone Mobile Web App With Safari Dev Tools by Matthew Croak on Medium [Premium Article]
• How to Use Web Inspector to Debug Mobile Safari (iPhone or iPad) by SK on Apple Toolbox

Simulator Bonuses

In the Simulator, from the Mac toolbar under File you can take a New Screen Shot , or use CMD+S.

For a how-to on more features and functionality offered in the Simulator, browse the Help section. I kind of want a Force Touch track pad now...

• Written by Melanie E Magdalena

Tags: # debugging

Thanks for reading! If this helped or you learned something, Buy Me A Coffee.

• Web Hosting
• Customer Spotlights
• Design + Creative
• Web Development + Tech
• Work + Life
• Cloud Hosting
• Media Temple Updates
• Content Management System
• Browser Extensions
• AWS Security

Quick Tip: Debug iOS Safari on a True Local Emulator (or your actual iPhone/iPad)

I’m sure plenty of folks know this, but like literally anything else in the world, plenty of folks don’t. This is an incredibly handy feature of developing responsive sites and testing them on as real of devices as you can. Plus, it doesn’t cost anything additional beyond your macOS computer.

Step 1) Download Xcode

The iOS Simulator is an app that comes bundled with Xcode. Xcode is free and you get it from the app store .

Step 2) Open Simulator

It’s in the main Xcode menu at Open Developer Tool > Simulator.

It will be a new icon in your dock. I like to move it so that it stays an icon in my dock, and I don’t need to open Xcode again to find it and use it.

(^ It’s on the far right here.)

The window for the simulator is like a fake Apple device. You can simulate just about anything (Watch, AppleTV, iPad, etc) by going to Hardware > Device.

Step 3) Open Safari and go to a website

Easy enough to type something in. It understands keyboard input so you don’t have to like use the mouse to click fake on-screen keys.

Important trick! Often times you are pasting a URL into the address field. To do this, you’ll need to have the URL on your clipboard, activate the simulator, press ⌘-V to paste, then you can click to bring up the iOS paste menu and paste it. At least… that’s what you used to have to do. I just recently upgraded to Xcode 10 and it seems like you can simply ⌘-V right into the URL bar now, so perhaps the weird work-around is fixed.

Step 4) Open Desktop Safari & Web Inspector

You’ll need to go to Settings > Advanced and check the Show Debug Menu option. Then you’ll see the option to open the web inspector for the Simulator right from that menu.

With the Web Inspector open, you can debug inside the Simulator just like you could right in a desktop browser with DevTools.

Actual Devices

Simulators are pretty great because they are easy and just a few clicks away. But if for whatever reason you want to test on a real device, you also can do that. As long as:

• The device is connected to your computer (lightning to USB), and it’s “trusted”.
• You have an “inspectable” application open, like Safari.

It should show up in the same Debug menu in Safari and let you inspect the browser right on the real device. It’s a bit surreal to watch the blue-boxes of Web Inspector showing up on your real device!

Looking for some useful browser extensions as well? Click here .

Click here to build your next great project on Media Temple.

Related Posts

For the past 24 years, Media Temple dedicated itself to serving the needs of the digital creative community.

According to statistics from DataProt, about 122.3 billion email spam messages are sent daily.

In the simplest terms, a domain name is your web address, but you can also think of it as the main entrance to your online space.

• domain name trends
• domain names

A Captain Planet Metaphor for the 5 Components of WordPress WorkPress is an open-source, dynamic, content management system (CMS powering over one third of the world’s websites.

• 5 elements of wordpress
• How does WordPress work
• WordPress behind the scenes

• Español – América Latina
• Português – Brasil
• Tiếng Việt

Tools and debug

All the tools available for web development are also helpful for progressive web app development, including libraries, frameworks, code editors, builders, developer tools, debuggers, and more. But when working with PWA-specific abilities, such as installability, service workers, offline support, and more, certain tools for PWA are extra helpful. Let's see them in action.

Simulators and devices

As mentioned in the Foundations chapter , you should use agnostic design patterns to offer the best experience to every user in every context. However, it's good practice to test your experiences on different devices.

You probably won't own dozens of physical devices, including iPhones, Android phones, tablets, and desktops or laptops with different operating systems. That's why simulators and emulators exist.

Simple simulators

Most developer tools within browsers let you test your PWAs in different screen sizes or network conditions while using a single desktop browser engine. Some of these tools can also force a different user agent under these simulations.

Some available simulators are:

• Chromium DevTools: Device Mode , network throttling and several sensor simulations available
• Firefox Developer Tools: Responsive Design Mode

Apple simulators

Apple offers the Simulator app (formerly known as iOS Simulator) which allows you to test your web app on different iPhones and iPads on various operating system versions.

The Simulator app is only available for macOS computers, and it comes with [Xcode, available in AppStore ; it simulates iOS and iPadOS with different device configurations. It includes the real Mobile Safari app and the Web.app engine used when your PWA is installed on the home screen, so the final experience you see is fairly representative of an actual device.

To launch the app, once you have installed Xcode, you can open the Simulator in the Xcode menu, by selecting Open Developer Tools then Simulator . Once in the simulator, you can open Safari as if you are in a real iPhone or iPad. You can open other devices by selecting File then Open Simulator menu.

Some useful shortcuts for web developers while using Simulator to test PWAs are:

• Command-Shift-H : go to the Home screen.
• Control-Command-Shift-H : access the App Switcher.
• Command-Right and Command-Left : rotate the device.

Simulator is not a virtual machine, but an app running on top of your macOS that looks like an iPhone or iPad, so it doesn't have its own TCP stack. Therefore, if you use localhost within Simulator, Safari will point to your macOS localhost device.

By default, Xcode only installs the latest version of iOS, but you can go to Xcode, use the Preferences menu, and download older Simulators from the Components tab.

It's good practice to test your PWA on the latest version of iOS, the previous minor version, and at least one previous major version.

Android emulators

The Android ecosystem offers different emulators, but the ones available within the Android SDK are the most commonly used.

As a PWA developer, you also need browsers in your Android emulator, which will add a layer of complexity to testing, because AOSP (Android Open Source Project) doesn't include Google Chrome or Play Store to download browsers. Therefore, not every Android emulator is helpful for PWA testing.

The Android SDK comes with two tools useful for emulation:

• SDK Manager: downloads and updates different operating system versions and plugins.
• AVD Manager: adds, edits, and deletes Android Virtual Devices (AVDs), each of them representing one device with one Android OS installed, similar to a virtual machine instance.

You can only install the Android SDK or Android Studio , a free IDE including the Android SDK with the emulators. With the SDK, you will have to use the command line to open and set up your emulators. With Android Studio, you can open the tools needed from the Welcome screen's menu. Once in the AVD Manager, you can create as many devices as you want, with different combinations of screen size, abilities, and Android OS version.

With an Android emulator, you can check your PWA installation support, the entire user experience, and if the abilities you are using are working as expected.

Using Google Chrome

To use Google Chrome in the Android emulator, you have to create an AVD with Play Services inside. To do that, make sure the SDK you use for your AVD has the Play icon, as you can see in the following image:

AVDs with Play services also include Play Store, so you can update your Chrome with the latest version after setting up your account with your Google account.

Using other browsers

If you use an AVD with Play services, you can also download browsers from the Play Store.

Most of the browsers available for Android, including Samsung Internet, Microsoft Edge, Opera, Firefox, and Brave, are available as APKs (Android Packages). If you have the APK for the browser you want to test, you can just drag the file to the emulator or install it through the command-line using ADB .

Desktop emulators

Emulating a different desktop computer is typically done via a virtual machine system, such as VirtualBox or VMWare. Even with these tools, emulating some environments is impossible, such as emulating macOS on Windows or Linux, and some other options may require a license, such as emulating Windows on macOS or Windows.

Using physical devices

Using actual devices to test your PWA is also a good idea. We don't need to own several devices as there are some cloud-based solutions where you can use physical devices remotely. There are some free solutions and some commercial solutions with a free-tier available.

One of the available solutions is Samsung Remote Test Lab , a free solution to test your PWA on Samsung devices, including phones, tablets, and foldable devices.

Remote inspection

When you want to debug your Progressive Web App in an actual device, a simulator, or an emulator, you may want to connect a remote inspection session with your desktop's browser tools.

There are commercial tools available, but all the browsers also offer ways to do it, including:

• WebKit Remote Inspector to connect to Safari and installed PWAs on iOS- and iPadOS-connected devices and simulators.
• Chromium DevTools Remote Debugging to connect to Chrome, Edge, Samsung Internet, and other Chromium-based browsers on Android and PWAs installed from those browsers, including connected physical devices and emulators.
• Firefox Remote Debugging to connect to Firefox for Android on connected actual devices and emulators.

Port forwarding for Android

When testing PWAs available on localhost on Android physical devices or emulators, you will have a problem, as localhost will point to the Android TCP stack and not your development machine.

You may want to use your local IP address as a replacement to localhost , but that's not a good idea as service workers and many abilities will only work with HTTPS connections, with the exception of localhost , so your PWA won't work offline or pass PWA criteria.

You can solve the problem by enabling port forwarding on a Chromium browser on your desktop computer. In that case, you can bridge a port on localhost on the Android device to any origin and port from your host computer, including your development computer's localhost . Check this guide for more information.

Chromium browsers

Chromium browsers offer many tools for debugging and testing Progressive Web Apps, starting from DevTools.

Most Chromium-based browsers, including Samsung Internet, Microsoft Edge, and Google Chrome, offer different channels, such as Stable, Beta, and Canary. You can install separate versions on desktop and Android to test your PWA on future versions of the browser. This allows you to build and test features that are not yet widely available, or to test deprecations and changes, and work out how your app will behave in newer versions.

Using remote inspection, you can use all these tools to debug and test your PWA on desktop and Android devices.

Service worker tools

Chromium DevTools has a complete set of tools to debug service workers and their APIs' "Application" tab. From the "Service Workers" section, you can:

• See service workers' installation status and lifecycle.
• Update and unregister the service worker.
• Follow the update cycle.
• See current service workers' clients.
• Send a push message to a service worker.
• Register Background Sync and Periodic Background Sync operations.

Read more about these tools .

Storage tools

Within Application then Storage , you can see, preview, update, and delete data from your origin, such as Web Storage entries or IndexedDB stores. Inside Application , Cache then Cache Storage , you can see all the caches stored in current origin, preview content, and delete entries. Read more about the cache tool .

Also, selecting from Application then Storage , you can see the current quota used, simulate custom quota storage, and clear all your data, including the service worker registration, using Clear site data .

Background services

Chromium DevTools also has a set of background services event recording tools, found by clicking Application then Background Services . This lets you see what happens with some events in the background on top of the service workers' API. Read more about these tools .

Web app manifest tools

Chromium DevTools has a section for Web App Manifest and installability criteria under Application , Manifest . In this section, you can check whether the manifest has loaded correctly, the manifest's values, how the icons look, the app id , and a quick checker for maskable icons .

Warnings and errors around installability criteria issues are also shown in this section.

Installation debugging

On Android devices using WebAPK installation mode , you can access a list of installed apps by browsing to about:webapk on Chromium browsers.

You will see the current update status and request a WebAPK update from here.

On desktop computers, you can see a user-friendly list of installed PWAs by browsing to about:apps , and a debug version by browsing to about:app-service-internals .

At the time of writing, Safari has a more limited set of tools available for PWA testing and debugging. There are no tools to see and debug the state and lifecycle of service workers, no inspector for the cache's content, and no tools for web app manifest support and installability on iOS and iPadOS.

Safari is available only on stable, while Safari Technology Preview available for macOS will only let you try abilities of future versions of Safari beforehand. The iOS and iPadOS beta programs sometimes include new versions of Safari that you can use for testing.

What you can do on Safari (both on macOS and remotely for iOS and iPadOS) is to open an inspector window for a service worker that is currently running.

From Safari on macOS, the Develop , Service Workers menu will list all the currently running service worker sessions. You have to select the device to inspect in the Develop menu for remote inspection. Service workers' contexts will appear in the same submenu as window contexts under the origin's or PWA's installed name.

If you select one of them, Safari will open a new window with a restricted inspector, including only Consoles , Sources , and Network Tabs .

Firefox supports service workers on all platforms and App Manifest for installation only on Android. You can access the tools for PWAs on desktop and Android by a USB remote inspection session .

You can use the desktop version known as Firefox Developer Edition . As with Chromium browser, Firefox has versions in different channels on desktop and Android, including stable, beta, and dev versions.

Tools for PWAs

The service worker inspector on Firefox is a basic tool available in Developer Tools under Application , Service Workers . It lets you see the currently registered service worker, check its running status, and unregister it. Debugging the service worker's code may only be available on some developer versions of Firefox.

The manifest tool is available under Application , Manifest , and it only renders the manifest's values with a preview of the icons.

Under Storage , you can manage the origin's storage, including IndexedDB and Cache Storage.

You can read more about Firefox developer tooling for web apps .

• Chrome DevTools: Debug Progressive Web Apps
• Debug PWAs on Edge
• Firefox Developer Tools: Application Tab
• Debugging Service Workers in Chrome (video)

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2022-05-15 UTC.

How to Debug Safari Issues on iOS Using Xcode

Ever tried opening a website on an iPhone and noticed it looks or behaves differently? This can happen because of the way Safari on iPhones (or iOS) works. If you’re making websites or web apps, you’ll want them to work perfectly on iPhones too. This guide will show you how to spot and fix these issues using a tool called Xcode.

1. Essential Tools to Debug Safari Issues on iOS Using Xcode :

• Xcode : Ensure you have the latest version installed. It’s available on the Mac App Store.
• iOS Device or Simulator : You can either use an actual device or the built-in simulator that comes with Xcode.
• Developer Account : If using a physical device, ensure it’s registered on your Apple Developer account.

2. Setting up the Simulator :

• Launch Xcode and initiate the iOS Simulator of your choice.
• Once running, navigate to the Safari app, similar to how you’d do on a physical device.

3. Setting up Web Inspector on Mac :

• Initiate Safari : Open Safari on your Mac. Ensure you’re using Safari and not another browser.
• Access Preferences : Navigate to Safari -> Preferences -> Advanced .
• Enable Develop Menu : Check the box labeled “Show Develop menu in menu bar.”

• Access Webpages : In Safari’s menu bar, click on Develop . Under this, you’ll see your simulator or connected device listed. Hovering over the device’s name will display a list of open webpages. Click on the page you’d like to inspect.

4. Dive into Debugging :

• The Web Inspector, quite similar to developer tools in other browsers, allows you to inspect elements, check console logs, monitor network activity, and more.
• Replicate your issue in Safari (either on the simulator or device) and utilize the Web Inspector to gather insights and debug.

5. Key Features of Web Inspector :

• Console Logs : Vital for capturing errors or important logs.
• Network Requests : Monitor requests to ensure all assets load correctly and to track any API issues.

In Conclusion :

Debugging can sometimes be a daunting task, especially when the issue is platform-specific. However, with the right tools and a systematic approach, you can effectively identify and resolve problems in Safari on iOS. Always ensure you’re using the latest versions of Xcode and Safari, as updates often contain crucial bug fixes and improvements.

Happy debugging!

David Lozzi

• Debugging Safari/Chrome on your iPhone/iPad/iOS device

In the world of modern web development, Web 2.0 (or is it 3.0?), with HTML5, CSS3, ES6, and frameworks and libraries up the wazoo, our web apps and sites always work seamlessly and flawlessly across all the browsers and devices… hahaha, I know…

The reality is, web development, as great and modern as it is, can have little caveats and nuances across the different browsers: Chrome, Safari, FireFox, Edge, and the Mac/Windows/Linux/iOS/Android versions of each. Thankfully, the big contenders like Netscape (those were the days) and Internet Explorer have finally been deprecated and are no longer expected to be supported in the wild. Even with the great modern web, we still have issues once in a while.

In my recent efforts in troubleshooting one small “nuance” between Chrome on Mac and Chrome and Safari on iOS (yes, all three were acting differently), I needed to debug my browser on my iPad and/or iPhone. I won’t get into what the issue is here, instead, I’ll get into how we can debug the browsers on our iOS devices. I’ve searched for many options, some worked, some didn’t, so below is what worked for me.

All steps below are all running on my:

• MacBook Pro 16-inc, M1 Pro, running macOS Ventura 13.6
• iPad Air (4th) v15.3.1
• iPhone 14 Pro Max iOS v17.0.3

What are we debugging

Before we get started in debugging, we should cover what we’re debugging. In the following debugging methods, we can debug anything our browser can get to: netflix.com, google.com, or our public website. With CI/CD in place, I can make code changes and get them into my dev environment in under 5 minutes, and that suffices at times. I can then hit the site directly on my iPhone and debug as needed.

Sometimes, if I’m really diving into a granular issue and don’t want to wait, I like to use ngrok. Ngrok spins up a gateway from a public address to your local dev machine. This allows me to troubleshoot realtime on my mobile browser while writing the code on my laptop. It’s pretty slick and has saved me a lot of time. I can even share the ngrok address with my colleagues and they can access it on my local machine too! Another option would be to set up DNS for your iPhone to navigate to your laptop while on the same wifi network, and that’s not worth the effort in my book.

Debugging in Chrome on iOS

This is great quick way to check out your console messages without using your Mac.

• In Chrome on your iPad or iPhone, go to chrome://inspect and then press Start Logging .
• Now go do your thing in another tab, keeping this tab open.
• Come back anytime to see any and all console outputs!

See, no laptop/desktop needed, just do it on the mobile device.

This is as far as we can get with Chrome on iPhone/iPad. From my limited understanding, Chrome for iOS uses a WKWebView which gets difficult to actually attach to and debug. If the JavaScript console output isn’t enough, try Safari…

Debugging in Safari on iOS

This is a great method of debugging your iOS devices as it gives you the closest thing to actually debugging on your computer. With this method you can use the dev tools on your Mac to connect to your iOS Safari browser. It’s pretty sweet.

• On your Mac , open Safari, then go to Safari > Settings.
• Click Advanced and click Show Develop menu in menu bar at the bottom of the window. Close the window.
• On your iPad or iPhone , go to Settings > Safari > Advanced.
• Scroll to the bottom and enable Web Inspector .

For this next part, I recommend using a USB cable to attach your iOS device to your Mac. You might get away with doing this over Wifi, as I have in the past, but it’s not reliable .

• Connect your device to your Mac using a USB cable, or try the following over Wifi.
• On your Mac, in Safari, click the Develop menu.
• Near the top of the menu you should see your iPad or iPhone listed.
• Hover over your device in the menu and you’ll see Safari with each tab listed below. Click the one you want to debug.
• The Web Inspector should then appear, now debug it: Elements, Console, Sources, Network, all of it should work!

Good enough for now

Between these two techniques, I’ve been able to troubleshoot my issues quite successfully. Generally, iOS Safari and Chrome act relatively the same, so debugging in Safari helps me clear my Chrome issue. And if it doesn’t I can always throw in more console.log s and see what Chrome is actually doing. Ideally, we should be able to debug the code directly on Chrome, like we can do with Safari, but at this time it’s just not possible.

One other option, for a cost: inspect.dev

There’s a product called inspect.dev that boasts it can debug Safari, Webviews, and Chrome from macOS, Windows, and Linux. Learn more at https://inspect.dev/why . I have not tried them out, I don’t want to pay for something that should be free for developers (hence this blog post).

Let me know if you know other ways to debug your mobile browsers! Leave a comment below or let’s connect on Twitter .

‘Til next time, happy debugging!

Please share the love!

• Click to share on Twitter (Opens in new window)
• Click to share on Facebook (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to email a link to a friend (Opens in new window)
• Click to print (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on Pocket (Opens in new window)
• Click to share on WhatsApp (Opens in new window)

7 thoughts on “ Debugging Safari/Chrome on your iPhone/iPad/iOS device ”

You should also check out using x-code’s simulator. Safari Dev Tools can attach to the Safari session on the simulator and you’re off to the races!

Oh yea, i just found that and then forgot that… thanks I’ll check it out closer and share my findings!

Thanks for article. One small correction Chrome for iOS uses WKWebView.

Thanks for the fix! will update

• Pingback: [FIXED] The image is taking the original dimentions of it on the phone after deployment - Learn How to FIX your angular code

Thanks bro! I’ll follow yours steps, wish me luck.

Leave a Reply Cancel reply

• Collaboration
• Microsoft Forms
• Microsoft Planner
• Microsoft Power Apps
• Microsoft Power Automate (Flow)
• Microsoft Teams
• Microsoft To-Do
• Office 365 Hybrid
• Office 365 SharePoint Online
• Productivity
• SharePoint 2013 Administration
• SharePoint 2013 Apps
• SharePoint 2013 Development
• SP2010 Administration
• SP2010 Authentication
• SP2010 Customization
• SP2010 Infrastructure
• SP2010 User
• SP2010 Workaround
• Uncategorized
• Users Don't Like SharePoint

Top Posts & Pages

• Sending a beautifully formatted email from Power Automate (Flow)
• Use Microsoft Forms to collect data right into your Excel file
• Saving data from Microsoft Forms into Excel using Power Automate (Flow)
• When Power Automate (Flow) can't find your Microsoft Form
• Squeezing a little more formatting out of Microsoft Forms
• Understanding Power Automate's Outlook Send Email Actions
• npm install and the package-lock.json file
• Use Microsoft Flow to remind the Team of due dates from Planner
• Customize the SharePoint Calendar Colors
• Stack Overflow

• 2,074,464 hits

Discover more from David Lozzi

Subscribe now to keep reading and get access to the full archive.

Type your email…

Continue reading

iOS 16.4 webview can not debug in safari web inspector

version: iOS 16.4(20E5239a) both on my iphone and Simulator，Safari -> develop shows "no inspectable applications"

• Safari Developer Tools

Also seeing this since upgrading to Xcode 16.4. Previously, it was working.

Are you using this to debug webpages or for webviews in an app?

Made the careless mistake of updating to iOS 16.4, and now our Capacitor application doesn't appear in Safari debug. I hope this gets solved quickly!

Apparently this is by design now with iOS 16.4. You need to actually mark the webview as inspectable even while running in debug mode from Xcode. See blog post at https://webkit.org/blog/13936/enabling-the-inspection-of-web-content-in-apps/

If you're on Capacitor, there are more details and a temporary workaround here: https://github.com/ionic-team/capacitor/issues/6441

Yeah this is correct. I just add this normally to debug now: if #available(iOS 16.4, *) { webView.isInspectable = true; }

Thank you! This worked, however now I'm experiencing another issue with iOS 16.4 and the Web Inspector where console.log messages don't appear in the console anymore. Is anyone else experiencing this?

Setting webView.isInspectable = true allows me to open the application in the Web inspector, but I can no longer see any console.log statements printed in the web inspector console. Has anyone been able to fix this?

Installing Safari Technology Preview 16.4 on the mac to access the console from an iPhone with safari 16.4 make the console log available again. Thank you thmclellan :)

Installing Safari Technology Preview 16.4 on the mac DID NOT help me..

I needed both the if #available(iOS 16.4, *) { webView.isInspectable = true; } and Safari Technology preview 16.4 to view console messages

Cordova team fix this bug with the release of Cordova platform iOS 6.3.0 (see Cordova blog post: https://cordova.apache.org/announcements/2023/04/15/cordova-ios-release-6.3.0.html )

If you cant update your Cordova iOS platform for any reasons, you can update yourself the CordovaLib/Classes/Private/Plugins/CDVWebViewEngine/CDVWebViewEngine.m file. Open your project in Xcode, go to the CDVWebViewEngine.m file, search for the lines:

Then add following line and save. Re build your project and it should works (solution found here)

I also recommend using Safari Technology Preview instead of Safari for debugging with web inspector. Good luck.

@iwantosee I have updated the platform to 6.3.0 and I am still unable to see my device in the safari inspect list, any further help would be appreaciated.

@iwantosee I have ionic 1 project, with cordova iOS platform 6.3.0 and I can't inspect iPhone 11, iOS 16.5 with Safari Technology preview Release 172 (Safari 17.0, WebKit 18616.1.17.3)

Solution by @iwantosee its works for me, and with Safari Technology preview it works. Thank you so much for your Answer.

How to Enable and Use Safari Web Inspector on iPhone in iOS 17

If you are a developer or a website manager, we are sure you know the importance of inspecting websites to analyze website issues or debug web pages. On iOS, Safari used to have a built-in Debug Console for inspecting web page issues. However, since iOS 6, Safari on iPhones has been relying on the Web Inspector tool to show to debug and analyze websites.

So, if you are looking for a way to enable the Web Inspector tool on iOS or iPadOS and use it to debug websites on your Mac, we have prepared this simple guide for you. In this article, we are going to provide step-by-step ways to enable and use the Web Inspector tool on your iOS and macOS devices. This way you will be able to easily track down issues in iOS and iPadOS websites on your macOS devices.

Enable and Use Safari Web Inspector on iPhone

Now, below we have provided the ways to enable the Web Inspector tool for Safari on iOS and macOS devices. Hence, you must already know by now that the Web Inspector tool for Safari will work only if you have a Mac or a MacBook with which you can connect your iOS device.

With the method provided here, you will be able to use the Web Inspector tool to analyze all the resources of web pages, debug, and fix underlying issues of the pages. This method can also be used with the iOS Simulator, which comes free with XCode from the Mac App Store, to view and scale web pages for different screen sizes.

Enable Web Inspector on iPhone

Before you can view the websites from the iOS Safari on your Mac using Web Inspector, you will need to enable the tool on your iOS device. You can do that using the steps right below.

1. Open the Settings app on your iPhoned.

2. Go to Safari .

3. Scroll down to the bottom and tap the Advanced button.

4. On the Advanced settings page, enable the toggle for Web Inspector .

This is all you have to do to enable the Web Inspector tool on iOS. With this advanced setting enabled on your iPhone, you will be able to view and edit the websites opened on your iOS Safari right inside the Safari browser on your Mac.

However, before that, you will need to tweak a few settings in Safari on your Mac. Read on to find out how you can use the Web Inspector tool in Safari on your Mac.

Use Web Inspector for iOS Safari on Mac

Now, to use the Web Inspector tool for iOS/ iPadOS Safari on Mac, you need to connect your iPhone or iPad with the tool enabled to your Mac via a USB connection. Once both devices are connected, follow the steps below:

1. Open the Safari browser on your Mac.

2. Click the Safari option on the top navigation bar and select the Preferences option from the menu.

3. Now, go to the Advanced tab and check the box for the “Show Develop menu in menu bar” option.

4. Exit the Settings window and you will see the new Develop menu on your Safari menu bar at the top.

5. Click the Develop option and you will see your iPhone or iPad listed.

6. Move your cursor on your device and you will see the websites opened on your iOS or iPadOS Safari appear on the drop-down list.

7. From here, you can click the website that you want to open in the Web Inspector console on your Mac for optimization and debugging.

So, this way, you can easily enable and use the Web Inspector tool for Safari on your iPhone or iPad and analyze websites on your Mac. The Web Inspector is especially useful if you are a macOS developer who also develops or manages iOS websites. With this, you can easily view the web pages from iPhones or iPads on your Mac and tinker with them to improve their quality and fix other issues.

How can I enable Web Inspector on my iPad?

The process of enabling the Web Inspector tool on iPhones and iPads is pretty much the same. Hence, you can use the method provided in this article to easily enable Web Inspector in Safari on your iPad and your iPhone.

Can I inspect web pages on my iPhone or iPad?

Although you can enable the Web Inspector tool in Safari on your iPhone or iPad, you will require a macOS device and a USB-Lightning cable to actually use the tool for inspecting web pages.

How can I bring up the Web Inspector console on Mac?

After enabling the Develop menu in the menu bar in Safari on your Mac (steps provided above), you can click the Develop option in Safari and select your connected iPhone or iPad to view the web pages. From here, you can click a web page and the Web Inspector console will open up the resources.

Final Words

So, this was all about enabling and using the Web Inspector tool in Safari on iPhones and iPads. It is a great tool for website developers to prototype, optimize, and debug web content on iOS, iPadOS, and macOS devices. And if this guide added value to your work or helped you in any way, do let us know in the comments below.

Dwaipayan Sengupta

After graduating with a Bachelor's in Business Administration, Dwaipayan has worked for reputable media firms such as Beebom and Pinkvilla. He has written over 1500 articles in his 3+ years of writing career and specializes in How-tos about Windows issues and features, flash news, and custom mechanical keyboards. When he is not writing or customizing mechanical keyboards, you can find him playing an intense Valorant match or browsing through his Reddit feed.

You may also like

How to Use and Share “Browse for Me” Web Pages in Arc Search on iPhone

How to Set Arc Search as the Default Browser on iPhone

How to Install and Use the Arc Search Browser on iPhone

How to Fix Geometry Dash Not Working on Windows 11

Leave a reply cancel reply.

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.