how to debug iphone safari on mac

• Get One: Storm Tracker Apps
• Big Deal Days: Surface Pro 9 $1097

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

• How to Screen Record on iPhone 13
• How to Turn Off the Flashlight on an iPhone 12
• How to Use Voice Control on iPhone and iPod Touch
• How to Set up and Use Focus Mode on iPhone and Apple Watch
• How to Turn Off SOS on an iPhone 15
• How to Activate Incognito Mode in Chrome for iPhone, iPad, and iPod Touch
• How to Turn Off Do Not Disturb on iPhone 14
• The 10 Best iPhone Hacks & Tips for 2024
• How to Unlock iCloud-Locked iPhones
• How to Fix it When Optimized Battery Charging is Not Working on iPhone 13
• Do These 12 Things First When You Get a New iPhone
• How to Turn Off SOS on an iPhone 14
• iPhone Focus Mode: What It Is and How to Use It
• How to Fix Could Not Activate Cellular Data Network Error
• Where to Buy an iPhone
• How to Get Your iPhone to Announce Calls

Debugging iOS Safari (when all you have is a Mac)

If you’re like me, you’ve experienced this more than once: you have a pristine new web project you’re excited about. You’ve poured your heart and soul into it, and you’re close to launching it for the world to see.

Suddenly, it occurs to you: you haven’t tested it on iOS yet. And so you grab an iPhone and pull up the staging URL.

The page loads, and you squint. Bewilderment sets in. Maybe you even feel some denial and hit the refresh button once or twice. Is it the cache? Did you type the URL wrong? No…

You lean forward, staring through narrowed eyes at some bizarre mutation of your carefully crafted code. How could this happen!?

No matter how much you’ve stretched and compressed your browser window to mimic the proportions of a mobile device, you haven’t really tested your project until you’ve tested on the device itself .

It’s just a fundamental truth of web development—one which presents a challenge for those of us who don’t have easy access to all relevant devices. In my case, an iPhone is the missing piece. I, personally, have never owned one, and nobody in my household currently uses one. So when it comes to testing and debugging iOS Safari, my options are limited.

Compounding the problem: iOS Safari is very much its own beast. It can at times behave very differently from MacOS (desktop) Safari.

I went down a rabbit hole of ways to address this issue, and found some solutions that don’t seem to be very popular for some reason—or at least, not widely discussed. (I speculate that many developers in the U.S. either have access to an iPhone, or to a paid BrowserStack subscription.)

For the rest of us—working on a Mac, but without access to an iPhone or a paid subscription service—here are a couple of viable choices.

And as a preview: there’s a section at the end where I offer some thoughts on the current, inequitable state of affairs when it comes to debugging Safari. But first, let’s get to the options.

The simple option: MacOS Safari user agent emulation

Safari on MacOS offers a very helpful combination of features for testing and debugging: user agent emulation , and responsive design mode . Between the two of these features, MacOS Safari manages to replicate an iPhone environment with very high accuracy. It’s not perfect—and it’s missing some things—but it’s quick and easy if you already have a Mac on hand.

First steps

If you haven’t already, open Safari on MacOS and head to Safari › Preferences . Under the “Advanced” tab, make sure the “Show Developer menu in menu bar” option is checked. (This is required to access Safari’s dev tools, and because Apple hates web developers is geared towards casual users, this access is off by default.)

Next, still in Safari, open Develop › User Agent , and choose the device you want to emulate. (When in doubt, the latest iPhone available is probably a good place to start.)

Finally, open the Develop menu again, and select “Enter Responsive Design Mode” (a few options below “User Agent”).

Once you do, you’ll see menu appear with a selection of iOS devices. Click one, and the browser viewport will automatically resize to match the selected device.

You can also rotate the screen to switch between portrait and landscape mode, or even imitate the size of an app in a split-screen scenario (e.g., one third of an iPad screen).

Credit where it’s due: this is an extremely nice feature to have built into desktop Safari. However, this approach also has its limits. There’s no browser chrome (i.e., browser bar and navigation) or other iPhone UI shown, and you don’t see the shape or edges of the device—things that might have a significant impact on the user experience. Plus, as mentioned, behavior between MacOS Safari and iOS Safari is not always perfectly 1:1.

So, if you want to cover all your bases, we need to go to our next option…

The comprehensive option: Xcode device simulator

Don’t panic. This option might seem extremely complex, but it’s not difficult, and it gives you a free, unlimited way to essentially use an iPhone on your Mac.

The downside, however: this approach requires you to commit a lot of time and disk space up front. You’ll need several gigabytes of free disk space, both for Xcode and its simulator(s), and the time do download all of it, so be sure you have those resources before you start. (It will take at least 15–20 gigs to install both Xcode and one simulator. You can get by with just one simulator, but you may want more.)

Xcode is an app primarily for developing Mac and iOS apps. We aren’t going to use it for that, though; we’re just going to use its very handy device simulator.

The first step is to head to the App Store and download Xcode (if you don’t have it already; there’s a chance you might, if you use your Mac for development).

As a warning: Xcode is an extremely large download , so this step may very well take an hour or more, depending on your connection.

Once Xcode is downloaded and installed, open it. Ignore whatever prompts and alerts it greets you with, and open Xcode › Preferences .

In Xcode preferences, select the “Components” tab, and you’ll find a list of available simulators. Choose the one you want (I’d start with the latest iOS, but you may want others, too, depending on what’s popular with your users), and click the download icon. Sadly, each simulator is several gigabytes, so you’re in for another long wait at this point.

Once your emulator of choice is downloaded and installed, however, you’re ready!

With Xcode open, head to Xcode › Open Developer Tool › Simulator . You should see an iPhone show up on screen, running the iOS version you chose. The full iPhone UI is available here; your simulated device starts up and shuts down. It has memory and apps. It has the infamous notch. And most importantly for our testing purposes: when you open Safari, it features the full browser, complete with UI, that show us how our web site or app really looks in the hands of a user.

The device behaves just like an actual iOS device; you can install apps, rotate the screen, show and hide the keyboard, and use all the device's normal features.

It’s about the closest you can get to testing on an actual iPhone (or other iOS device) without having one in your hands.

Worth noting: I did experience at least one visual bug on the simulated iPhone that MacOS Safari’s emulation failed to reproduce. So while this approach requires a lot of setup, it’s well worth it if you don’t have any better options for testing iOS Safari.

Epilogue: Safari is pay-to-play

This entire post is geared towards developers who—like me—have access to a Mac. There is no Safari or Xcode on Windows, or any other non-Apple operating system.

That, sadly, means Safari is effectively a pay-gated development environment. You need to own a Mac or an iOS device if you want to develop and test in Safari.

Yes, there are services such as the previously-mentioned BrowserStack available, but crucially, those are all paid services. Many have free trials and such available, but that only goes so far.

At the end of the day: you're forced to pay in some way for the privilege of using Safari.

This is a sad state of affairs, because it locks out people who can’t afford premium pricing merely to see what some of their users will see. Any economically disadvantaged user is at a further disadvantage right off the bat—one that is importantly not leveraged by any other browser or operating system .

Any user can get Chrome, Edge, Firefox, and a slew of other browsers on virtually any device, for free. These browsers are not restricted to running on any particular operating system (and to the extent they are restricted, it is by Apple , and specifically on iOS).

These browsers offer level playing fields—at least, as much as possible for an activity that requires a computer and an internet connection. I can test on Firefox on my high-end MacBook Pro just as easily as a kid on her school Chromebook or a working mom on her low-powered Windows laptop. We’re all able to see what our users see when those users open Firefox, Chrome, or Edge. Sure, my machine is beefier, but none of us has browser-level advantage.

But when it comes to Safari, that kid and that mom are out of luck. I get something they don’t, just because I can afford to buy it.

Yes, you could make the same argument about Android (and we should!), but as far as I’m aware, the differences between the desktop and Android versions of Chrome are far more minimal than those between MacOS Safari and iOS Safari. Plus, again, you can get Chrome (Android’s default browser) on any device, and be pretty certain it will reproduce fairly faithfully across devices and operating systems.

By contrast, you can’t use Safari anywhere but on an Apple operating system. Plus: it seems Android emulators are much more plentifully available than options to emulate iOS—probably because Android is open-source, and iOS is closed-source.

As long as Safari continues to be locked down inside a paywall—as long as you need to either give your money to Apple or a testing service before you can use Safari—it will continue to be a force for inequity on the supposedly open web.

I hope Apple will take this into consideration, as it touts “inclusivity” and such, and will take action to ensure that developing the web for iOS and/or Safari doesn’t remain pay-to-play.

How to remote debug on Safari on iOS from Windows, Mac and Linux with Inspect?

Inspect helps you debug the mobile web in Safari on iOS by giving you an all-in-one developer tool for macOS, Windows, and Linux.

To get you started we have put together this step-by-step guide that outlines how you get going debugging Safari on iOS with Inspect.

To get you started we have put together this step-by-step guide that outlines how you get going debugging the mobile with Inspect.

Prerequisites

• macOS, Windows, or Linux
• iPhone or iPad with iOS 11 or later
• USB cable or Wi-Fi (on macOS)
• Download Inspect by going to our download page .
• Connect your iOS device to your PC via USB cable or Wi-Fi.
• Start Inspect and follow the instructions on how to setup your computer.
• You are now ready to Inspect!
• Open Safari on your iOS device and start debugging.

More ways to debug

Debugging safari and webviews running within the ios simulator.

Inspect can connect to the iOS Simulator running on MacOS. Read more in our iOS Simulator debugging docs

Debugging WebViews on iOS devices

Inspect also makes it easy to inspect and debug content within WebViews on iOS. Read more in our dedicated WebViews docs .

Happy Inspecting!

Debug iOS Safari from your Mac

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.

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

• On your iPad, iPhone or iPod, go to Settings > Safari > Advanced and toggle on Web Inspector .
• On your Mac, open Safari and go to Safari > Preferences > Advanced then check Show Develop menu in menu bar .
• Connect your iOS device to your Mac with the USB cable.
• On your Mac, restart Safari .
• On your iOS device, open the web site that you want to debug.
• 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.

• On your iPhone, open up the website you want to debug; in our case, www.busbud.com

• 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

Photo by William Iven .

DEV Community

Posted on Sep 13, 2021

How to debug iPhone safari on mac in 2 steps?

Debug HTML, CSS and Javascript issues for the website open on iPhone safari directly from your mac in just 2 steps.

Step1: Activate the Web inspector in your iPhone.

On your iPhone go to Settings > Safari > Advanced and toggle on Web Inspector .

Step2: Download Safari Technology Preview Browser

Goto this Link and download this super useful browser which will help in debugging the iOS safari on mac

Once downloaded-

• Open the Safari Technology Preview
• Goto Develop -> Select your iphone -> click on the iphone safari tab

Top comments (3)

Templates let you quickly answer FAQs or store snippets for re-use.

• Location Karlsruhe, Germany
• Joined Apr 9, 2021

This is great! Inspecting the console output and networking of a web app running on an iPhone helped me dozens of times in the past already.

Actually, you can do the same without installing the technology preview. Just open Safari's Settings on the Mac, go to Advanced, and toggle "Show develop menu in menu bar".

• Email [email protected]
• Location India
• Work lead engineer at classplus
• Joined Jun 21, 2019

I tried with safari . But somehow the newer version doesn't work . So this tool helps here.

• Joined Dec 3, 2020

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Build with Me Larachat #2: The mistake most developers do when building a product

Ramzi Issiakhem - Sep 20

Session State Management | JS | React

Shubham Tiwari - Sep 25

Tensorflow.js basics: LSTM prediction per timestep

Practicing Datscy - Sep 20

The concept of a temporary View state in JavaScript

antonmak1 - Sep 20

We're a place where coders share, stay up-to-date and grow their careers.

A Comprehensive Guide to Remote Debugging Safari on iOS and Mac

As a seasoned app testing expert with over a decade of experience across thousands of devices, I know first-hand the headaches cross-browser testing can induce. Making sure your web apps function flawlessly across the fragmented landscape of browsers and devices is critically important yet extraordinarily tedious.

This comprehensive guide will illuminate how seamlessly debugging Safari remotely revolutionizes those painful testing workflows for the better. Whether you‘re an aspiring web developer or a seasoned QA lead, by the end you‘ll master this invaluable skill for bulletproofing sites across Apple‘s ubiquitous browser.

First, let‘s level-set on why comprehensively testing Safari merits such priority focus before exploring the solution.

The Critical Need for Safari Support

Over my 10+ years performance and security testing web apps, I‘ve analyzed usage data across thousands of sites. Far and away the most consistent finding? A staggering share of traffic stems from Apple devices – and by extension – Safari browsers.

Consider this eye-opening data:

• 50%+ of mobile browsing originates on iOS devices
• Safari sees over 1 billion active users per month globally
• In North America, Safari‘s desktop market share exceeds 70%

Yet even armed with those compelling analytics, many web teams limit testing to the browsers they personally rely on (often Chrome or Firefox given their Windows dev environments). This blatant disregard for Safari support persists despite the sheer magnitude of their user base.

The end result? Site functionality flaws and cross-browser inconsistencies that deliver abysmal experiences to Safari users. Through extensive user research, I‘ve found these all-too-common sitewide issues after launching without proper Safari testing:

• Misaligned navigation and page layouts
• Buggy header dropdowns and menus
• Unresponsive designs on iOS devices
• Chroming effects lacking on CSS animations

Based on developer tool analysis, the core trigger boils down to renders engine differences. Safari utilizes the proprietary WebKit engine while most other major browsers leverage Blink. Without rigorous cross-browser testing, developers rarely account for these discrepancies.

So considering Apple‘s massive device ecosystem reaching billions of Safari users, why does this gap in testing diligence persist? In my experience, the fragmentation across iOS and macOS versions makes reliably recreating native environments extraordinarily burdensome.

The Challenge of Local Safari Testing

As a tester frequently collaborating with dev teams on Windows machines, I totally understand firsthand the immense friction local Safari testing introduces:

No Access to macOS or iOS Devices

Most devs rely on Windows computers, lacking Apple hardware to test locally.

Emulators Unreliable for Safari

Solutions like Appium struggle replicating the intricate bindings between Safari and native OS layers.

Fragmentation Across 15+ iOS Versions

New iOS versions launch annually while users slowly upgrade over 2-3 years.

5 Recent macOS Versions to Support

Apple aggressively pushes macOS updates like Monterey while still supporting back through High Sierra.

Continual Maintenance of Real Devices

Keeping an in-house device lab current with latest iOS and macOS releases demands heavy lifting.

Facing those obstacles, many dev teams simply deprioritize Safari support. At best they‘ll make a cursory pass testing specific functionality. But that shortcut mentality inevitably backfires post-launch facing a flood of Safari-specific defects.

So how do we empower developers on Windows to properly test across the myriad of Safari versions? That leads us to the remote debugging revolution…

Unlocking Real Device Cloud Debugging

The introduction of real device cloud solutions like BrowserStack enables on-demand access to thousands of continually updated iOS and macOS environments. That instant availability now makes comprehensive Safari testing extraordinarily achievable.

Consider a few unique advantages cloud debugging introduces:

1. 2,000+ Real iOS and macOS Devices Maintained for You

No need to shoulder the burden of procuring and maintaining a vast matrix of Apple devices internally. BrowserStack handles that heavy lifting.

2. Developer Tools Pre-configured on Every Device

Shortcut the hassle of manually enabling web inspectors and debugging options across Safari browsers. It‘s all handled automatically.

3. Debug Safari Straight from Your Browser

No need to be on a Mac computer. Debug Safari remotely straight from Chrome or Firefox on your Windows machine.

4. Surface Rendering Engine Differences

Inspecting elements and code execution on real devices exposes WebKit discrepancies you won‘t catch locally on Blink-based browsers.

5. Fix Issues Without Re-deploying

Edit CSS and JavaScript on the fly without needing to re-push updated code for every incremental change.

6. Share Feedback in Real-time with Teams

Sync up debugging sessions across your squad for more collaborative testing workflows.

Plain and simple – real device cloud solutions eliminate the barriers traditionally obstructing thorough Safari testing. And you unlock that power without ever leaving your Windows dev environment.

Let‘s walk through what simplified Safari debugging looks like powered by BrowserStack‘s cloud.

Step-by-Step Guide to BrowserStack Debugging

One of the core pillars of BrowserStack‘s cloud platform is enabling instant debug access across real mobile and desktop environments. I‘ll illustrate how seamless inspecting elements and validating functionality is for Safari on both iOS and macOS.

Debugging Safari on iPhone and iPad

Thanks to BrowserStack‘s massive device cloud, you can pick up an iPhone 14 Pro running the latest iOS 16 platform and debug Safari in minutes.

Step 1: Select iOS Device and Safari Version

From BrowserStack‘s dashboard, choose your target iPhone or iPad model along with the corresponding Safari browser version.

Step 2: Initiate the iOS Browser Session

On click, a real iOS devices boots up Safari – no emulator or simulator.

Step 3: Enable Developer Tools

From the action menu, click "DevTools" to launch the Safari Web Inspector historically only accessible on-device.

Step 4: Inspect Site Elements and Debug

Safari‘s console allows inspection of page structure, CSS, network requests etc. You can edit code on the fly without needing to redeploy to the live site.

Step 5: Repeat Testing Across All Device Sizes

Easily rotate across iPhones and iPads to validate responsiveness across orientations and screen sizes.

Here‘s an example of using BrowserStack‘s platform to analyze the structure of a page element on a live site:

Debugging the Safari mobile browser to quickly diagnose issues and test incremental changes becomes extraordinarily straightforward leveraging real cloud devices.

Now let‘s examine that process for macOS…

Debugging Safari on Mac Desktops

Similar to iOS, BrowserStack provides access to several recent versions of macOS – from Ventura to Mojave – preloaded with matching Safari browser releases.

Step 1: Choose macOS and Safari Version

Select your desired macOS release along with the Safari build bundled natively.

Step 2: New Safari Session Starts

A cloud macOS device boots up a Safari browser instance so you see precisely how it would look for an end user.

Step 3: Right Click to Inspect

No need to manually enable developer settings on macOS. Right click web elements and click inspect.

Step 4: Interact with Web Inspector

Safari‘s console allows you manipulate the live DOM, debug CSS/JS issues, analyze network requests etc.

Step 5: Test Across OS Versions

Easily rotate across macOS versions to validate consistency in how Safari renders and functions across releases.

Here‘s a snapshot of using the web inspector on a live site within BrowserStack‘s macOS cloud:

Between macOS and iOS, BrowserStack enables frictionless remote debugging for Safari eliminating the need to actually own or maintain any Apple devices yourself.

Optimizing Sites for Safari Success

With seamless remote debugging unlocked through BrowserStack‘s device cloud, how else can you ensure your web apps and sites shine across the Safari browser?

Here are my top Safari-specific optimization tips:

Scrutinize Responsiveness

Carefully assess how UI elements and grids stretch and scale across iPhone and iPad sizes.

Audit App Storage Usage

Safari uniquely imposes strict limits on client-side storage – stay diligent not exceeding thresholds.

Stress Test Animations

CSS animations and transforms often chrome differently. Push limits on duration, GPU usage etc.

Disable Caching Aggressively

Cache video or images too aggressively and offline functionality quickly tanks.

Inspect All Console Logs

Console messages provide hints into JavaScript exceptions plus layout and styling issues.

Compare Against Chrome and Firefox

Render the same page across multiple browsers to expose subtle layout discrepancies.

With BrowserStack enabling simplified access to thousands of real Safari environments combined with those best practices – delivering truly exceptional cross-browser support is now within reach.

Adding Automation for Unified Testing

While we‘ve focused primarily on streamlining manual testing workflows, what about automating Safari support?

The beauty of BrowserStack‘s solution is they provide cloud access across both interactive manual testing and scripted automated testing.

Developers can leverage BrowserStack‘s developer tools like Automate and App Automate to drive regression testing across Safari test suites:

1. Parallel Test Execution

Run Safari test suites across iOS and macOS versions in parallel to accelerate feedback.

2. CI/CD Pipeline Integration

Connect existing tools like Jenkins or CircleCI to add automated browser tests to builds.

3. Saucelabs and Selenium Compatible

Leverage existing test automation frameworks and scripts seamlessly.

4. Smart Analytics and Reporting

Actionable quality metrics across test executions give insight into defects and regressions.

So not only does BrowserStack simplify ad hoc debugging for developers, they provide enterprise-grade infrastructure for automated Safari test suites – all accessible directly from your Windows environments.

Recap and Key Takeaways

If only one lesson sticks, understand that comprehensively testing web apps across the fragmented landscape of Safari browsers is absolutely essential.

The broad iOS and macOS device ecosystem relied on daily by billions of users mandates prioritizing reliable cross-browser support.

Yet as Windows-based developers, adequately validating Safari functionality has traditionally bordered on impossible without remote access to Apple devices. Unreliable emulators couldn‘t sufficiently replicate intricate OS and browser bindings. Procuring and maintaining real devices proved far too operationally cumbersome.

This guide illuminated how BrowserStack eliminates those barriers altogether through cloud-based access to thousands of continually updated iOS and macOS environments. Within minutes, developers can conduct debugging Safari sessions across any versions needed – no new hardware required.

These key highlights are worth remembering:

• Debug real Safari via any computer without owning Apple devices
• Fix CSS, JS, and HTML issues directly within browser consoles
• Compare rendering across iOS, iPadOS and macOS versions
• Identify discrepancies between WebKit vs Blink engines
• Support automation for advanced Safari testing at scale

Today, delivering exceptional experiences for the billion+ Safari users globally comes down to one question…

Are you ready to start mastering remote debugging? BrowserStack makes achieving cross-browser nirvana easier than ever before.

I‘m eager to see those Chrome-centric sites become Safari trailblazers leveraging the remarkable power of real device cloud access. Let me know if any other testing wisdom this longtime expert can share!

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Share this:

You may like to read,.

• Ensuring Seamless Cross-Browser Compatibility for Your VueJS Web App
• Crafting an Optimal Browser Compatibility Matrix: A 2021 Guide
• Navigating Complex Build vs Buy Decisions for Software Testing Infrastructure
• Comprehensive Guide to Debugging Websites on Mobile Chrome
• The Essential Guide to Cross Browser Compatibility Testing Beyond Chrome
• Hello, Let‘s Learn How to Debug Websites Flawlessly on iPhones
• Ensuring Seamless Mobile Website Compatibility in 2024
• Resolving JavaScript Cross Browser Compatibility Issues – An Expert‘s Guide

Cookie Consent Manager

General information, required cookies, functional cookies, advertising cookies.

We use three kinds of cookies on our websites: required, functional, and advertising. You can choose whether functional and advertising cookies apply. Click on the different cookie categories to find out more about each category and to change the default settings. Privacy Statement

Required cookies are necessary for basic website functionality. Some examples include: session cookies needed to transmit the website, authentication cookies, and security cookies.

Functional cookies enhance functions, performance, and services on the website. Some examples include: cookies used to analyze site traffic, cookies used for market research, and cookies used to display advertising that is not directed to a particular individual.

Advertising cookies track activity across websites in order to understand a viewer’s interests, and direct them specific marketing. Some examples include: cookies used for remarketing, or interest-based advertising.

Cookie List

How to use web inspector to debug ios device.

Learn how to enable Web Inspector on your iOS device to debug Safari and gather logs.

Environment :

iOS iPhone iPad Mac

Prerequisites:

• Please note that a Mac computer is required for this process as Safari's Web Developer is only compatible with Macs
• Make sure Safari on your Mac is the same version as Safari on your iDevice. You may need to update your iOS version or your version of Safari running on your Mac.

Use Web Inspector to debug mobile Safari

• On your iPad, iPhone or iPod touch, tap  Settings | Safari | Advanced  and toggle on  Web Inspector.  And enable JavaScript if it isn’t already enabled.
• On your Mac, launch Safari and go to  Safari menu | Preferences | Advanced  then check 'Show Develop menu in menu bar' if not already enabled.
• Connect your iOS device to your Mac with the USB cable. This is critical, you must connect the devices manually, using a cable. This does not work via WiFi.
• On your iOS device, open the website that you want to debug. Then, on your Mac, open Safari and go to the 'Develop' menu. You should now see your iOS device that is connected to your Mac. (Note: If you do not have any page open on your iDevice, you see a message saying “No Inspectable Applications.”)
• Now debug the page that is open on your mobile Safari using the same methods you would for debugging on Mac.
• Within the developer tools window, navigate to the 'Network' tab and export the .har file if requested.
• Safari Developer Help
• How to Use Web Inspector to Debug Mobile Safari (iPhone or iPad)
• Get Oriented

• PS5 Pro pre-orders have started
• Meta Connect 2024: Quest 3S, Orion AR...
• PlayStation 5 Pro hands-on
• Quest 3S VR headset starts at $300
• October Prime Day 2024: Best early deals

Engadget has been testing and reviewing consumer tech since 2004. Our stories may include affiliate links; if you buy something through a link, we may earn a commission. Read more about how we evaluate products .

• Smartphones

How to mirror your iPhone on macOS Sequoia

The new iphone mirroring feature lets you control your phone from your mac..

With macOS Sequoia and iOS 18 , Apple has a handy new way to hop between devices while on desktop. iPhone Mirroring shows your phone’s screen on your computer; you can even use your mouse and keyboard to interact with it. Here’s how to set up and get the most out of iPhone Mirroring.

Requirements

First, iPhone Mirroring has several conditions. It only works with Apple Silicon Macs (late 2020 and later) or Intel-based models with the Apple T2 Security Chip (2018 to 2020). Of course, you’ll need to install macOS Sequoia first to use the feature. Any iPhone running iOS 18 will do.

The feature only works when your iPhone is locked (it’s okay if it’s charging or using Standby ). If you unlock your iPhone while using iPhone Mirroring, the feature will temporarily disconnect.

Both devices also need Wi-Fi and Bluetooth turned on, and you’ll have to sign with your Apple Account on each. Your account needs two-factor authentication (using a trusted device or phone number) activated. The feature won’t work if your phone’s Personal Hotspot is active or you’re using AirPlay, Sidecar or internet sharing on your Mac.

How to set up iPhone Mirroring

Open the iPhone Mirroring app on your Mac. It should already be in your Dock (see the screenshot above), but you can also find it in your Applications folder.

The app starts with a welcome screen. Tap “Continue,” then follow the prompt to unlock your iPhone.

Next, approve iPhone notifications on your Mac. This feature shows your handset’s alerts in your Mac’s Notification Center. (When you click an iOS alert on your Mac, it will open the corresponding app in the iPhone Mirroring app.) iPhone notifications on your Mac work even when the iPhone Mirroring app is closed or inactive, or if your phone isn’t nearby.

After approving notifications, a final screen will confirm that iPhone Mirroring is ready. Click the “Get Started” button to start. Once it loads, you’ll see your iPhone’s screen.

Using iPhone Mirroring

First, you may want to resize the iPhone Mirroring app. Apple only gives you three options: actual size, smaller and larger. You can change them using keyboard shortcuts: larger (Cmd +), actual size (Cmd 0) and smaller (Cmd -). You can also resize the window in your Mac’s menu bar under the View section. Dragging the edges of the window to resize it (like with other macOS apps) won’t work here.

In most cases, interacting with your virtual iPhone on your Mac is as simple as mimicking its usual touch gestures with your trackpad and typing in text fields using your Mac’s keyboard.

Swipe-based gestures for Home, App Switcher and Control Center won’t work on Mac, but they have shortcuts. If you move your pointer to the top of the iPhone Mirroring window, a new area will appear, revealing buttons for the iOS Home Screen (left) and the App Switcher (right). (See the screenshot above.) This area also lets you click-hold and drag the app to reposition it.

You can also go to the Home Screen by clicking on the horizontal bar at the bottom of the app’s window or using the Cmd 1 keyboard shortcut. In addition, Cmd 2 activates the App Switcher, and Cmd 3 triggers a Spotlight search. Or, swipe down with two fingers on your Mac’s trackpad from the iPhone Home Screen (in the Mac app) for Spotlight.

There’s no way to activate the iOS Control Center from your Mac. You also can’t manually change the orientation of the virtual iPhone screen, but it will rotate automatically if you launch a game that starts by default in landscape mode:

iPhone audio will play on your Mac while using the feature. Some iPhone videos will play in the iPhone Mirroring window, too. However, copyrighted content will be restricted in some cases, so some videos will only be viewable through corresponding macOS apps or desktop browser windows.

Apple’s Universal Clipboard can be useful while using iPhone Mirroring. Copy something on your virtual iPhone, and you can paste it on your Mac, and vice versa. You can also use AirDrop to transfer files between the two devices while using iPhone Mirroring.

iPhone Mirroring will time out if you don’t use the virtual phone for a while. Ditto for if you move your handset away from your computer. If it times out, just follow the app’s prompt to reconnect.

iPhone Mirroring login settings

You can choose whether to require authentication every time you use iPhone Mirroring. In the Mac app, choose iPhone Mirroring > Settings in the menu bar (or type Cmd space), and you’ll see a barebones settings screen.

You can choose “Ask Every Time” or “Authenticate Automatically.” The former requires your Mac login password, Touch ID or Apple Watch confirmation to use your virtual iPhone on your desktop. Meanwhile, the latter will log into your phone automatically without authenticating each time.

You can also reset iPhone access in this settings screen. This removes your entire setup, and you’ll need to start the process from scratch the next time you open the iPhone Mirroring app.

If you have more than one iPhone tied to your Apple Account, you can choose which one to use with iPhone Mirroring under Settings > Desktop & Dock on your Mac. If this applies to you, you’ll see the option under the “Use iPhone widgets” section. (If you only have one iPhone under your Apple Account, this option won’t appear.)

For more information on Apple’s latest models, you can check out Engadget’s reviews of the iPhone 16 and 16 Pro series phones , along with the latest MacBooks .

iPhone 16 Pro / iPhone 16 Pro Max

13-inch macbook air (2024), latest stories, fujifilm gfx100s ii review: outstanding performance at a reduced price.

Fujifilm’s GFX100S II is a big improvement over the original GFX100S and offers the same picture quality as the GFX100 II for $2,500 less.

Prime Day deals include this Blink Outdoor 4 and Echo Show 5 bundle for only $60

A bundle of the Blink Outdoor 4 camera and Echo Show 5 smart display has dropped to $60, the lowest price to date. But you'll need to be a Prime member to snag this discount.

Amazon Prime Day 2024: The best deals ahead of the October Big Deal Days sale and everything we know so far

These are the best early Prime Day deals we found in the lead-up to October Prime Day 2024.

Google launches Gemini's contextual smart replies in Gmail

Google has started rolling out Gemini-generated smart replies for Gmail, which are more detailed and have more context than its old version of smart replies.

Engadget Podcast: PS5 Pro hands-on and Meta’s wild Orion AR glasses

We've finally had a chance to try the PlayStation 5 Pro and Engadget's Jessica Conditt has come away impressed.

Intel reportedly rebuffed an offer from ARM to buy its product unit

Intel's fortunes have declined so rapidly over the past year that UK-based chip designer ARM inquired about buying its crown jewel product unit.

The Morning After: A $6 million fine for robocalls from fake Biden

This morning's biggest news stories: X suspends journalist Ken Klippenstein after he published JD Vance dossier, New California law will force companies to admit you don’t own digital content, PS5 Pro available to preorder now.

Meta fined $102 million for storing passwords in plain text

The Irish Data Protection Commission (DPC) has fined Meta €91 million for a 2019 incident wherein the company stored millions of Facebook and Instagram passwords in plain text.

It's the last day to get three months of Disney+ Basic for only $6

Save 75 percent on three months of Disney+ with this deal that gives you access to the service for $2/month.

The best midrange smartphones for 2024

Here's a list of the best midrange smartphones you can buy, as chosen by Engadget editors.

The best budget wireless earbuds for 2024

Here are the best budget wireless earbuds you can get right now, each of which comes in at $100 or less.

Zillow is adding climate risk data to all US for-sale listings

Zillow has announced a new partnership to bring climate risk information to its for-sale listings in the US.

X suspends journalist Ken Klippenstein after he published J.D. Vance dossier

Journalist Ken Klippenstein's decision to release the leaked vetting dossier of vice presidential candidate JD Vance earned him a temporary suspension on X.

New California law will force companies to admit you don't own digital content

California Governor Gavin Newsom has signed AB 2426, a new law that requires digital marketplaces to make clearer to customers when they are only purchasing a license to access media.

The Final Fantasy Pixel Remaster series finally arrives on Xbox

Square Enix’s Final Fantasy Pixel Remasters have made their way to Xbox. The classics, which arrived on PC and mobile in 2021 and Switch and PS4 last year, are now available for the Xbox Series X/S.

FCC fines political consultant $6 million for deepfake robocalls

The FCC issued a hefty fine against political consultant Steve Kramer for sending fake robocalls of President Biden during the 2024 New Hampshire primary.

Advanced AI chatbots are less likely to admit they don’t have all the answers

Although AI models predictably get more accurate as they advance, they’re also more likely to (wrongly) answer questions beyond their capabilities rather than saying, “I don’t know.” That’s the conclusion from a team of AI researchers who analyzed chatbots from OpenAI and Meta.

Galaxy Tab S10 Ultra hands-on: AI arrives on Samsung's premium Android tablet

Samsung's Galaxy Tab S10+ and S10 Ultra feel as thin and premium as always, while the new AI features are nice to see.

StarCraft: Remastered and StarCraft II are coming to PC Game Pass

StarCraft: Remastered and StarCraft II are coming to PC Game Pass. The games will be ready to play on November 5.

Samsung debuts the Galaxy S24 FE and Galaxy Watch FE LTE

Samsung dusts off the FE series once more for new versions of the S24 and Galaxy Watch.

View in English

Web development tools

Apple has brought its expertise in development tools to the web. Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize websites for peak performance and compatibility on both platforms. And with Responsive Design Mode, you can preview your web pages in various screen sizes, orientations, and resolutions. Access these tools by enabling the Develop menu in Safari’s Advanced preferences.

Web Inspector

Web Inspector is your command center, giving you quick and easy access to the richest set of development tools ever included in a web browser. It helps you inspect all of the resources and activity on a web page, making development more efficient across Apple platforms. The clean, unified design puts each core function in a separate tab, which you can rearrange to fit your workflow. You can even debug memory using Timelines and tweak styles using widgets for over 150 of the most common CSS properties.

Elements. View and inspect the elements that make up the DOM of a web page. Clicking elements from the fully editable markup tree on the left reveals the node’s styles in the middle sidebar, with more details in the right sidebar.

Console. Type JavaScript commands in the console to interactively debug, modify, and get information about your webpage. View logs, errors, and warnings emitted from a webpage, so you can identify issues fast and resolve them right away.

Sources. Find every resource of a webpage, including documents, images, scripts, stylesheets, and more. Use the built-in debugger with data type and code highlights to troubleshoot and understand the script execution flow.

Network. See a detailed list of all network requests made to load every web page resource, so you can quickly evaluate the response, status, timing, and more.

Timelines. Understand all the activity that occurs on an open web page, such as network requests, layout and rendering, JavaScript events, memory, and CPU impact. Everything is neatly plotted on a timeline or recored by frame, helping you discover ways to optimize your site.

Storage. Find details about the data stored by a web page, such as application cache, cookies, databases, indexed databases, local storage, and session storage.

Graphics. Preview animation keyframes and their classes from HTML5 canvas, JavaScript animations, CSS animations, and CSS transitions. Dial in the motion and the visual design of web pages.

Layers. Visualize compositing layers in 3D to understand where layers are generated and in what order they'll render. Use layers to help find unexpected memory consumption or excessive repaints on a web page.

Audit. Preform audits against a web page to certify that common code and accessibility errors are addressed. Confirm that a web page follows design guidelines and specifications of modern web pages.

Responsive Design Mode

Safari has a powerful new interface for designing responsive web experiences. Responsive Design Mode provides a simple interface for quickly previewing your web page across various screen sizes, orientations, and resolutions, as well as custom viewports and user agents. You can drag the edges of any window to resize it. And you can click on a device to toggle its orientation, taking it from portrait to landscape — and even into Split View on iPad.