debug ios safari on mac

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

How to use Safari Web Inspector on Mac, iPad, and iPhone

If you’re a web developer, then you likely already know about Safari’s Web Inspector. But if you’re just starting to use Safari for development or have just begun your Web Development career, this guide will show you the basics for getting started with the Safari Web Inspector on iOS and Mac.

What is the Safari Web Inspector?

For those not yet familiar with the tool, you can use the Safari Web Inspector for help with your web development. It allows you to review page elements, make changes, troubleshoot problems, and review page performance. Apple sums it up with:

Web Inspector is the primary web development tool in Safari. Web Inspector allows you to inspect, tweak, debug, and analyze the performance of your web content in a Safari tab.

Enable and open Safari Web Inspector

You can use the Safari Web Inspector for development on your iPhone, iPad, or Mac. Here’s how to enable and open it on iOS and macOS so you’re ready to use it when you need it.

If you’re going to use the Web Inspector frequently, whether for iOS or Mac, you might as well add the Develop tab to your menu bar so you can access it easily.

• Open Safari on your computer and click Safari > Settings or Preferences from the menu bar.
• Choose the Advanced tab.
• Check the box at the bottom for “ Show features for web developers ” or Show Develop menu in menu bar .

Now when you want to enable the Web Inspector, click Develop > Show Web Inspector from your menu bar.

If you prefer to forgo adding the Develop button to your menu bar, you can access the Web Inspector on Mac with a shortcut. Navigate to the page you want to inspect, right-click on it, and pick Inspect Element from the context menu.

Just keep in mind that if you plan to use Web Inspector for Safari on your iOS device, you’ll need the Develop button in the menu bar on your Mac.

For iPhone and iPad

To use the Web Inspector for iOS on your Mac, grab your USB cable and connect your iPhone or iPad to your computer. Then, follow these steps to enable the tool:

• Open the Settings app on your iPhone or iPad and tap Safari .
• Scroll to the bottom and tap Advanced .
• Enable the toggle for Web Inspector .

Next, make sure Safari is open on your iOS device and your Mac. After that, follow these steps:

1) Click Develop from the Safari menu bar on Mac, and you’ll see your iPhone or iPad listed here.

2) Mouse over the device, and you’ll then see the websites open in Safari on your mobile device.

3) Select the one you want, and the Web Inspector will pop open in a new window for you to use.

Note: If this is the first time you’re using your iPhone or iPad for this work, take your mouse cursor over that iPhone or iPad and click Use for Development . Next, tap Trust on your iPhone or iPad and enter the device passcode. Now, this iOS or iPadOS device is ready to be used for web inspection. If it still shows a correction error, simply unplug the USB cable and plug it in again.

Position the Safari Web Inspector

If you’re using the Web Inspector for iOS, it will remain in its own floating window.

If you’re using it for Safari on your Mac, you can change its position. By default, Web Inspector displays at the bottom of your Safari window. To detach it and place it in a separate window or dock it to the left or right side of Safari, select one of the buttons from the top left of the Inspector window.

Get to know the Web Inspector

The Safari Web Inspector has a handy toolbar and tabs with some options that you can adjust to fit your needs.

Web Inspector toolbar

• “X” to close the Inspector
• Positioning buttons
• Reload button
• Download web archive button
• Activity viewer (resource count, resource size, load time, logs, errors, warnings)
• Element selector button

Web Inspector tabs

You can use all tabs or just a few. You can right-click or hold Control and click the tabs and then check and uncheck those you want to see. Rearrange the tabs by holding and dragging them to their new positions. And all the way to the right of the tabs bar, you’ll see a Settings button. This lets you adjust settings for tabs, indents, source maps, zoom, and more.

• Elements : Current state of the page’s Document Object Model
• Network : Resources loaded by the current page
• Debugger : View the JavaScript execution, variables, and control flow
• Resources : Resources being used by the current page’s content
• Timelines : A view of what the page’s content is doing
• Storage : State that is available to the page’s content
• Canvas : Contexts created from CSS
• Console : Shows logged messages and lets you evaluate JavaScript code

For in-depth help on a specific tab, you can head to the Apple Developer Support site . Select Table of Contents > Get started in Safari Developer Tools > Web Inspector .

Good luck with your inspection!

Hopefully, this guide will help you as you start working with the Safari Web Inspector for your iPhone, iPad, or Mac web development.

If you currently use the Web Inspector and have tips and tricks you’d like to share with others who are just starting, please feel free to comment below!

Check out next: How to view the source code of a webpage in Safari

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.

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.

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

Promices and Async Await

Rohit - Apr 16

How to resolve requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager in React Native

Ambass Eugene - Apr 16

More info on ambiguous 500 errors

Kerry Owston - Apr 16

Diving Into Capacitor 6: What’s New, What’s Improved, and How to Upgrade

Daniel Sogl - Apr 15

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

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

Source: Busbud engineering

This is super helpful, thanks!

Eric Clapton – “Edge of Darkness” > Old Song > Download With Text And 320 & 128 Links In Musico

Download Old Music BY : Ahmad Shafie | Ye Del Mige Beram With Text And 2 Quality 320 And 128 On Music-fa

Thank you so much! Needed this information!

Leave a Reply

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

Notes from Node.js Interactive 2017

Automatically index your heroku postgres database with dexter, going further docker multi-stage builds, introducing docker multi-stage builds.

Debugging iOS Safari

How do I debug Safari on iOS?

These are my general steps, starting with not even using iOS Safari.

1. Is this just a small-screen problem?

Lemme just use the device mode in Chrome quick.

Note that this does a smidge more than just display your site in a smaller area: it sends the correct User Agent String and Client Hints for that device.

2. Does it seem actually specific to Safari? Lemme check Desktop Safari first since that’s just a few clicks away.

Now you’re actually using Safari, which is way closer to iOS Safari than desktop Chrome is.

3. Problem not showing here? Then the problem is actually unique to iOS Safari. Try emulation.

I happen to have a Mac, so I can have XCode installed and thus have an iOS simulator that is pretty easy to pop open. And if you can run the iOS simulator, that means you can run desktop Safari as well, and thus even have access to DevTools that can reach into the simulator.

4. I’ve seen real-device-only bugs. Sometimes you need a real device.

If you have a Mac, doing this is pretty similar to what we just did. You have to have the phone plugged in via USB (no wireless charging connection or whatever) and then you’ll see the device in that same Develop menu. Select the real device (which must have Safari open on some website) and you’ll get a DevTools instance of that website.

5. No Mac? Use an online emulator.

I have heard of people running over to Best Buy or an Apple Store to quick debug something on a display machine. But that’s — uhhhh — not super practical. You can use something like CrossBrowserTesting to do this right on the web.

They even jack Chrome DevTools in there somehow. I just did a little testing and I found the Chrome DevTools a little janky to use (a giant left panel renders, the click-to-select element feature didn’t work, and I kept losing WebSocket connection). But hey, it’s cool that it’s possible.

6. No Mac and still need to test on a real device?

I didn’t think this was really possible, but then I saw Inspect . (This is not an ad, I’m just shouting this out as a very cool tool.) With Inspect, I can plug in my real iOS device via USB and get a Chrome DevTools instance for it.

I’m running Inspect on my Mac there. I guess the only real reason I would do that is to use Chrome DevTools instead of Safari DevTools (which, fair play, I might). And it looks like there will be more reasons soon enough. For example, it will bundle React, Vue, and Angular DevTools so you even have those for on-device testing, plus Wi-Fi testing, meaning you don’t have to plug in at all.

But I feel like the real clutch feature here is that it runs on Windows . So now there is a really clear answer for web developers on Windows who need to test on a real iOS device.

I solved some issue earlier today on safari by installing Chrome User agent switching on windows pc:

https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg

The issue was webp not being supported on older safari browsers.

Almost forgot the extension thing existed, definitely saved me writing sniffing code.

Tip #6 is also great, we have an ios phone lying around in the office.

Hiya, unfortunately the issues didn’t happen with this one, so I must get an iPhone.. :(

The real solution (that doesn’t yet exist) is on-device developer tools. Will iOS 15 Safari finally offer Inspect Element?

Earlier versions of iOS (for iPad, before it was called iPad OS) actually had on-device developer tools, but it was removed (I believe in iOS 6, but I could be wrong) in favor of the current connect-to-safari-on-macos solution. So it seems unlikely that it’ll come back.

• Featured Products

How To: Debug iPhone Safari on Mac?

1. Plug your iPhone or iPad to your Mac.

2. Go to Settings -> Safari -> Advanced -> enable Web Inspector

3. Browse to any website on your iPhone or iPad in Safari. Keep the page open on your device.

4. Open Safari on your Mac. While your iPhone or iPad is still plugged into your computer, go to Develop menu and find your device then choose the website page you want to debug.

5. Now, you can your iPhone or iPad Safari web page in full developer mode with debug information including elements, network, resources, timelines, debuggers, storage, and console parameters.

6. You can even control refreshing the web page on your device from your Mac!

Related Posts

Fix: this iphone is open in another window (music app), macos preview: insert image into pdf, how to show folder arrows in list view – macos, how to encrypt external drive in macos - apfs, how to ship to multiple addresses on amazon, fix: “to continue sign in with your apple id” keeps popping up (macos).

I am trying to develop websites and test for backwards compatibility with older versions of things. I have an iPad Mini with iOS 9.x.x and am trying to simply load a page in Safari and see why the Javascript is not doing what it should be doing. The Web Inspector, on my Mac Safari, is completely useless. I can see the iPad in the Developer menu. I can tell it to load the page that's on the iPad. But it won't provide any useful information. No console logging, nothing. All I see is a warning that apparently puts a halt to everything: Audit Warning: "data-custom" is too new to run on this inspected page. Apple has this bizarre habit of breaking things and making it impossible for us to even use older hardware. I can not find a mainstream browser, such as Chrome or Firefox, that will install on this iPad. I will not spend the money for a new iPad because, predictably, it will be useless in another year or two due to incompatibility with the newest OS and everything else that requires the latest OS just to install. I'm accustomed to software running on newer operating systems for at least a decade. I'm accustomed to easy debugging information, even as simple as the Javascript Console working. It's amazing how hard Apple makes it for us to provide our software customers with useful products. Can't even test on an iPad with iOS 9? Ridiculous.

In order to provide you with the best online experience this website uses cookies.

By using our website, you agree to our use of cookies. Learn more

How to Use Web Inspector to Debug iOS device

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.
• https://support.apple.com/guide/safari-developer/welcome/mac
• https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/
• https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html 

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

Safari Web Inspector Guide

• Table of Contents
• Jump To…
• Download Sample Code

Retired Document

Important: This document no longer represents the most current version of Safari developer tools. Links to downloads and other resources may no longer be valid. For new documentation on Safari Web Inspector, please visit Safari Developer Help .

Get Oriented

Before you start using Web Inspector, familiarize yourself with its organization and interface.

Enabling Web Inspector

To start using Web Inspector, you must first enable the Develop menu. To do so, enable the “Show Develop menu in menu bar” setting found in Safari’s preferences under the Advanced pane, as shown in Figure 1-1 .

You can then access Web Inspector through the Develop menu that appears in the menubar, or by pressing Command-Option-I. You can also add the Web Inspector toolbar item to Safari’s toolbar by selecting View > Customize Toolbar.

WebKit-based Apps

To enable the developer tools in a WebKit-based application other than Safari, enter the following into the Terminal:

Replace com.bundle.identifier with the bundle identifier of your app, and then launch your app. Web Inspector can now be accessed by a Control-click or right-click from within any web view. You must also enable contextual menus in your app.

Safari on iOS

You can use Web Inspector to debug web content on your device directly from your desktop.

To enable Web Inspector on iOS

Open the Settings app.

Tap Safari.

Scroll down and select Advanced.

Switch Web Inspector to ON.

After Web Inspector is enabled, connect your device to your desktop machine with a USB cable. The name of your device appears in the Develop menu of Safari.

Alternately, you can use iOS Simulator to take advantage of Web Inspector’s debugging capabilities, which comes free with Xcode from the Mac App Store. Use the same instructions, To enable Web Inspector on iOS , from within the iOS Simulator’s Settings app.

If you have a development provisioning profile installed on your device, you can even inspect the web content of any UIWebView object in your app. The name of your app will appear as a submenu under the name of your device. When debugging web content in a web view, Web Inspector behaves in the same manner as debugging web content in Safari.

Navigating Web Inspector

The toolbar icons listed in Table 1-1 are in order as they appear in Web Inspector, from left to right.

Positioning Web Inspector

Hold down the Option key to switch docking types.

Changing Toolbar Appearance

You can change the look and feel of the toolbar to better suit your liking. Depending on the size of your screen, you might want to adjust your toolbar to take up less space. Right-clicking anywhere on the toolbar invokes a contextual menu which allows you to change the layout and size of the toolbar icons.

Possible toolbar appearances are shown in Table 1-2 . By default, toolbar icons are presented with icons and text positioned vertically.

You also have the option to make the icons smaller by selecting Small Icons from the contextual menu.

Reading the Activity Viewer

The activity viewer is like a heads-up display for the loaded page. It shows an at-a-glance summary of key information about the current page, as shown in Figure 1-3 . Each label in the activity viewer is a button that, when clicked, takes you to an area of Web Inspector.

Copyright © 2018 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2018-02-07

• a. Send us an email
• b. Anonymous form
• Buyer's Guide
• Upcoming Products
• Tips / Contact Us
• Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

Apple Releases Safari Technology Preview 193 With Bug Fixes and Performance Improvements

Apple today released a new update for Safari Technology Preview , the experimental browser Apple first introduced in March 2016. Apple designed the ‌Safari Technology Preview‌ to test features that may be introduced into future release versions of Safari.

The current ‌Safari Technology Preview‌ release is compatible with machines running macOS Ventura and macOS Sonoma , the latest version of macOS that Apple released in September 2023.

The ‌Safari Technology Preview‌ update is available through the Software Update mechanism in System Preferences or System Settings to anyone who has downloaded the browser . Full release notes for the update are available on the Safari Technology Preview website .

Apple's aim with ‌Safari Technology Preview‌ is to gather feedback from developers and users on its browser development process. ‌Safari Technology Preview‌ can run side-by-side with the existing Safari browser and while designed for developers, it does not require a developer account to download.

Get weekly top MacRumors stories in your inbox.

Top Rated Comments

I'm always curious about these Safari Tech Preview posts. Are they just a quick way to add another headline? I suspect so, as I don't see many people trusting these builds as their daily driver. I've tried that in the past, but it never stuck.

Popular Stories

iOS 18 Rumored to Add These 10 New Features to Your iPhone

Apple ID Accounts Logging Out Users and Requiring Password Reset

Apple's Regular Mac Base RAM Boosts Ended When Tim Cook Took Over

The MacRumors Show: Apple's iPad Event Finally Announced!

Apple Event Rumors: iPad Pro With M4 Chip and New Apple Pencil With Haptic Feedback

Apple Announces 'Let Loose' Event on May 7 Amid Rumors of New iPads

Next article.

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

App Store changes for the EU, new emoji, Podcasts transcripts, and more.

Get the most out your iPhone 15 with our complete guide to all the new features.

A deep dive into new features in macOS Sonoma, big and small.

Revamped models with OLED displays, M3 chip, and redesigned Magic Keyboard accessory.

Updated 10.9-inch model and new 12.9-inch model, M2 chip expected.

Apple's annual Worldwide Developers Conference will kick off with a keynote on June 10.

Expected to see new AI-focused features and more. Preview coming at WWDC in June with public release in September.

Other Stories

3 days ago by Tim Hardwick

3 days ago by Joe Rossignol

4 days ago by MacRumors Staff

4 days ago by Joe Rossignol

6 days ago by Tim Hardwick