ios safari web developer tools

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

How to Activate the iPhone Debug Console or Web Inspector

Use Safari's web developer tools to study problematic websites

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

What to Know

Activate Web Inspector on iOS: Go to Settings > Safari > Advanced and move the Web Inspector toggle switch to the On position.
Use Web Inspector on macOS: Connect your iOS device to a Mac and choose the URL to inspect from the Develop menu.

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

Activate Web Inspector on Your iPhone or Other iOS Device

The Web Inspector is disabled by default since most iPhone users have no use for it. However, if you're a developer or you're curious, you can activate it in a few short steps. Here's how:

Open the iPhone Settings menu.

On an iPhone with an early version of iOS, access the Debug Console through Settings > Safari > Developer > Debug Console . When Safari on the iPhone detects CSS, HTML, and JavaScript errors, details of each display in the debugger.

Scroll down and tap Safari to open the screen that contains everything related to the Safari web browser on your iPhone, iPad, or iPod touch.

Scroll to the bottom of the page and select Advanced .

Move the Web Inspector toggle switch to the On position.

Connect Your iOS Device to Safari on a Mac

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

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

Select the Advanced tab.

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

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

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

What Is Web Inspector?

Web developers use Web Inspector to modify, debug, and optimize websites on Macs and iOS devices. With Web Inspector open, developers can inspect the resources on a web page. The Web Inspector window contains editable HTML and notes regarding the styles and layers of the web page in a separate panel.

Before iOS 6, the iPhone Safari web browser had a built-in Debug Console that developers used to find web page defects. Recent versions of iOS use Web Inspector instead.

With Safari 9 and OS X Mavericks (10.9), Apple introduced Responsive Design Mode in Web Inspector. Developers use this built-in simulator to preview how web pages scale to different screen sizes, resolutions, and orientations.

To set up Web Inspector on your iPad, open your iPad's Settings and select Safari > Advanced , then turn Web Inspector On . Connect the iPad to a Mac computer, then open Safari on the Mac and select Safari > Preferences > Advanced , then turn on Show Develop menu in menu bar .

You cannot just connect your iPhone to a Windows PC and start using Web Inspector through Chrome like you can with a Mac. Installing package manager software can provide you a sort of workaround, but it's not recommended unless you're familiar with the package management app you intend to use.

Get the Latest Tech News Delivered Every Day

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

How To Open Developer Tools In Safari

Software & Applications
Browsers & Extensions

Introduction

When it comes to web browsing, Safari stands out as a popular choice for Mac and iOS users. Whether you're a web developer, a tech enthusiast, or simply someone curious about the inner workings of the websites you visit, Safari's Developer Tools can provide valuable insights and functionalities. These tools empower users to inspect, debug, and optimize web content, making them indispensable for anyone involved in web development or simply interested in understanding the technical aspects of the internet.

In this article, we'll delve into the process of opening Developer Tools in Safari on both Mac and iOS devices. By the end, you'll have a comprehensive understanding of how to access these powerful tools, enabling you to explore the underlying structure of web pages, analyze network activity, and experiment with various web development features.

Let's embark on this journey to uncover the hidden capabilities of Safari's Developer Tools, empowering you to gain a deeper understanding of the web and its intricate design. Whether you're a seasoned developer or a curious individual eager to peek behind the digital curtain, the following sections will equip you with the knowledge to harness the full potential of Safari's Developer Tools.

Opening Developer Tools in Safari on Mac

Opening Developer Tools in Safari on a Mac is a straightforward process that provides access to a wealth of powerful features for web development and debugging. Whether you're a seasoned developer or a curious individual eager to explore the inner workings of websites, Safari's Developer Tools offer a comprehensive suite of functionalities to aid in understanding and optimizing web content.

To initiate the process of opening Developer Tools in Safari on a Mac, you can follow these simple steps:

Using the Menu Bar:

Launch Safari on your Mac and navigate to the menu bar located at the top of the screen.
Click on "Safari" in the menu bar to reveal a dropdown menu.
From the dropdown menu, select "Preferences" to access Safari's settings.

Accessing the Advanced Settings:

Within the Preferences window, click on the "Advanced" tab located at the far right.
Check the box next to "Show Develop menu in menu bar" to enable the Develop menu within Safari.

Opening Developer Tools:

Once the Develop menu is enabled, navigate back to the menu bar at the top of the screen.
Click on "Develop" to reveal a dropdown menu containing various web development tools and options.
From the dropdown menu, select "Show Web Inspector" to open the Developer Tools panel.

Upon completing these steps, the Developer Tools panel will appear, providing access to a wide array of functionalities such as inspecting elements, analyzing network activity, debugging JavaScript, and much more. This powerful suite of tools empowers users to delve into the underlying structure of web pages, identify and rectify issues, and optimize the performance of web content.

By familiarizing yourself with the process of opening Developer Tools in Safari on a Mac, you gain the ability to harness the full potential of these tools, enabling you to explore, analyze, and enhance the web browsing experience. Whether you're a web developer seeking to fine-tune a website's performance or simply intrigued by the technical aspects of the internet, Safari's Developer Tools on Mac provide a gateway to a deeper understanding of web development and design.

Opening Developer Tools in Safari on iPhone or iPad

Accessing Developer Tools in Safari on an iPhone or iPad allows users to gain valuable insights into the technical aspects of web content and perform various web development tasks directly from their mobile devices. Whether you're a web developer on the go or simply curious about the inner workings of websites, Safari's Developer Tools provide a convenient way to inspect, debug, and optimize web content on iOS devices.

To initiate the process of opening Developer Tools in Safari on an iPhone or iPad, follow these simple steps:

Launching Safari: Begin by unlocking your iPhone or iPad and locating the Safari icon on the home screen. Tap the Safari icon to open the Safari browser .

Enabling Developer Tools: With Safari open, navigate to the website or web page you wish to inspect and debug. Once on the desired web page, tap the address bar at the top of the screen to reveal the URL and other options.

Accessing Developer Tools: In the address bar, enter "inspect://" followed by the URL of the web page you are currently viewing. For example, if you are on the website "example.com," you would enter "inspect://example.com" in the address bar and tap "Go" or the "Enter" key on the on-screen keyboard .

Upon completing these steps, Safari's Developer Tools will be activated, providing access to a range of functionalities such as inspecting elements, analyzing network activity, debugging JavaScript, and more. This powerful suite of tools empowers users to delve into the underlying structure of web pages, identify and rectify issues, and optimize the performance of web content directly from their iPhone or iPad.

By familiarizing yourself with the process of opening Developer Tools in Safari on an iPhone or iPad, you gain the ability to harness the full potential of these tools, enabling you to explore, analyze, and enhance the web browsing experience while on the go. Whether you're a web developer seeking to troubleshoot a website's functionality or simply intrigued by the technical aspects of the internet, Safari's Developer Tools on iOS devices provide a convenient gateway to a deeper understanding of web development and design.

How To Inspect On IPhone Safari

How To Inspect In Safari On IPad

How To Post On Instagram From Mac Safari

How To Reset Safari 9.0

How To Inspect Page On Safari

How To Enable Inspect In Safari

How To Open Developer Tools On Safari

How To Change Location In Safari

Esports World Cup Games Announcement: What’s on the Horizon

SLA Network: Benefits, Advantages, Satisfaction of Both Parties to the Contract

Designing for Flexibility: Materials and Manufacturing Techniques in Flexible Hybrid Electronics

Icse Chemistry Exams 2024: How Did The Paper Go? Here’s What Students Mentioned

How Sustainable Is Bitcoin’s Current Price Rally?

What Are the Most Common Challenges in AI Development?

When Does Metroid Dread Come Out

Where To Go After Ice Missile Metroid Dread

Privacy Overview
Strictly Necessary Cookies

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Safari Dev Tools: The Complete 2023 Guide

Introduction to safari developer tools.

Safari is Apple's proprietary web browser that comes pre-installed on all Mac and iOS devices. Its integrated developer tools provide everything web developers need to build, debug and optimize websites for Apple's ecosystem.

In this comprehensive tutorial, we'll cover key capabilities of Safari's dev tools including:

The Web Inspector for inspecting page structure and CSS
The Debugger for stepping through JavaScript code
The Resources panel for auditing page assets
The Audits panel for testing web standards compliance
Device Mode for simulating mobile screens
Advanced debugging features like conditional breakpoints
Network throttling to simulate real-world conditions
Experimental features for early access

By the end, you'll have master expertise using Safari dev tools to squash bugs faster, improve site performance, and deliver exceptional web experiences across Apple devices. You'll also discover resources like DevHunt to continue exploring the latest Safari developer tools.

A Brief History of Safari

Safari originated within Apple in 2003, based on the open source KHTML rendering engine. It was first released for Mac OS X Panther and quickly became Apple's default browser.

In 2007, Apple launched the first Windows version of Safari to expand its userbase. That same year, Safari made its mobile debut on the first iPhone.

Over the years, Safari has gone through many major version updates adding new features and support for emerging web standards. It remains the pre-installed browser on all Apple operating systems and devices including Macs, iPhones and iPads.

Why Learn Safari Developer Tools?

Here are some key reasons web developers should learn Safari dev tools:

Pre-installed on all Mac and iOS devices, used by millions globally
Allows direct debugging on iOS devices
Can emulate mobile devices in desktop browser
Essential for targeting Apple's ecosystem
Identify optimizations for Safari to improve site experience
Learn how your sites perform on Safari and make improvements
Fix rendering issues specific to WebKit browser engine
Utilize experimental features to build cutting-edge websites
Discover new Safari dev tools on platforms like DevHunt

With Safari holding significant browser market share, especially in the mobile space, having expertise in its developer tools is vital for crafting high-quality cross-browser experiences.

Core Safari Developer Tools

Now let's dive into the core developer tools available within Safari on both desktop and mobile.

The Web Inspector

The Web Inspector is the main hub for visually inspecting and modifying a web page. Key functions include:

View and edit the live DOM tree
Inspect and modify CSS styles
Audit accessibility information
Analyze network requests and performance
Identify layout issues or style problems
Live edit code changes right in the browser

For front-end developers, the Inspector is indispensable for debugging HTML, CSS and accessibility issues. You can instantly see how changes to markup and styles affect rendering.

The Debugger

Safari's JavaScript Debugger allows pausing code execution to step through scripts line-by-line. You can:

Set breakpoints to isolate issues
Inspect stack traces and variable scopes
Profile memory usage and CPU utilization
Emulate device throttling conditions
Blackbox third-party scripts

The Debugger equips you to tackle even the most complex JavaScript bugs. From tracking down logic errors to profiling performance, it's an essential tool for front-end logic and optimization.

The Resources Panel

This panel displays all resources loaded by the page like scripts, stylesheets, fonts, images and media. For each resource you can:

View request URLs, status codes and timings
Filter by type, folder location or domain
Check dependencies and redundancy
Audit performance and bottlenecks
Download resources to your machine

Knowing exactly what resources a page loads is invaluable for optimizing performance. The Resources panel helps you eliminate unnecessary requests and prioritize critical assets.

Storage Inspector

The Storage Inspector lets you view and edit browser storage like cookies, LocalStorage, SessionStorage and IndexedDB. You can:

Add, modify or delete stored keys and values
Export storage data as JSON
Emulate different browser states for testing
Clear storage entirely to test initial experience

Being able to inspect persistence mechanisms is vital for debugging issues related to state management in modern web apps.

The Audits Panel

Safari's Audits panel runs diagnostics on pages to surface optimization opportunities and standards compliance issues. Audits include:

Performance analysis and scoring
Accessibility checks following WCAG guidelines
Best practices for progressive web apps
SEO enhancements
Modern web platform usage

Running audits before launching any website can help you catch critical problems early and compare against industry benchmarks.

Advanced Safari Developer Tools

Beyond the basics, Safari offers powerful advanced tools for seasoned developers.

Device Mode

Device Mode accurately emulates mobile screens and conditions right in desktop Safari:

Simulate precise device dimensions and resolution
Throttle CPU and network to mimic real devices
Essential for building mobile-friendly, responsive sites
Test touch events and gestures during development

With Device Mode, you can build fully optimized mobile experiences without constantly switching devices.

Advanced Debugging

Safari provides next-level JavaScript debugging capabilities:

Set conditional breakpoints using expressions
Group breakpoints for easy management
Step through async code with async stack traces
Profile memory heap allocations over time
Blackbox scripts to hide library code
Break on caught or uncaught exceptions

These advanced features help you tackle difficult bugs in even the most complex single-page apps and frameworks like Vue.js.

Network Throttling

Network Throttling allows simulating slow network connections, like 3G and LTE. You can:

Rate limit bandwidth and latency
Identify assets blocking page load
Debug loading behavior in emerging markets
Optimize performance for offline/low-bandwidth
Throttle cache usage and response compression

Testing how your site performs under real-world network conditions is crucial to providing good user experiences for all.

Experimental Features

Safari lets developers try out experimental tools before they are formally released:

Get early access to new capabilities
Provide feedback to help shape future features
Use at your own risk as they are still in development
Currently includes CSS Flexbox debugging tools

Tapping into experimental features allows you to build cutting-edge experiences and directly influence the browser platform's evolution.

Debugging JavaScript Issues

Now let's explore strategies for debugging JavaScript using Safari's advanced capabilities.

Breakpoint Usage

Effective breakpoint usage is key for isolating issues:

Set breakpoints directly within the source code
Organize breakpoints into groups by context
Use conditional breakpoints to pause on specific criteria
Disable breakpoints without deleting to toggle behavior
Manage breakpoints efficiently even in complex codebases

Mastering breakpoints gives you precise control over pausing execution to inspect logic flow and data.

Scope Inspection

Understanding scope is vital for tracking down variable issues:

Inspect variable values in different call frames
Detect scope pollution across closures and modules
Ensure code executes in the intended lexical scope
Fix bugs caused by accessing stale variable references
Avoid global namespace pollution

With Safari's scoping tools, you can confidently debug even complex nested closures and callback contexts.

Async Debugging

Safari provides multiple approaches for debugging asynchronous code:

Step through promise resolutions and rejections
Inspect async operation call stacks and task queues
Profile async code performance with CPU profiler
Set breakpoints within async callbacks and timers
Visually trace async code flows

Smooth async debugging helps you tackle race conditions, timing issues, and callback hell.

Error Handling

The key to debugging runtime errors is Safari's break on exception feature:

Break on any caught or uncaught exceptions
Inspect error call stacks to trace where issues originate
Log values with console.log() to debug logic flow
Validate edge cases and fix crashes
Handle errors gracefully to improve user experience

With robust error handling, you can isolate bugs quicker and build more resilient apps.

Optimizing Page Speed

Next let's explore some common techniques for optimizing page speed using Safari developer tools.

Image Optimization

Safari provides multiple ways to optimize images:

Audit image sizes and formats using the Resources panel
Compress and resize images as needed
Lazy load offscreen images to improve TTI
Serve next-gen formats like WebP to Safari users
Remove unnecessary decorative images

With Safari's insight into image resources, you can significantly cut page weight and load times.

Script Loading

Optimizing script loading is key for performance:

Minimize parser-blocking JavaScript
Load non-critical scripts asynchronously
Dynamically create and load scripts
Code split bundles into logical chunks
Tree shake and minify code to reduce payload

Safari shows you exactly how scripts impact loading behavior so you can optimize delivery.

Caching Assets

Effective caching can boost repeat visit performance:

Set optimal cache lifetimes for static assets
Cache assets locally using service workers
Version assets linked to app release cycles
Avoid cache-busting query strings
Maximize cache reuse for returning users

The Resources panel helps you dial in caching for faster loads without staleness.

Layout Thrashing

Diagnosing layout thrashing is key for smooth UX:

Identify forced synchronous layouts
Defer non-critical DOM updates with requestAnimationFrame()
Avoid reading styles after writes during rendering
Batch DOM reads/writes together
Profile with Debugger to pinpoint problems

With Safari's performance tools, you can isolate and fix sources of jank and lag.

Wrap Up and Key Takeaways

Safari developer tools provide everything needed to build high-quality websites targeting Apple's ecosystem.

Key highlights include:

Debugging directly on iOS devices with Web Inspector
Stepping through JavaScript with advanced Debugger features
Auditing pages for standards compliance
Simulating mobile devices and networks during development
Optimizing performance using Network Throttling
Trying out experimental capabilities early
Discovering new Safari dev tools on platforms like DevHunt

Learning Safari developer tools allows you to find and fix cross-browser issues faster. You can optimize sites specifically for Safari and deliver stellar experiences to millions of Apple users worldwide.

With a comprehensive understanding of Safari's robust toolset, you can confidently build, debug and enhance modern progressive web apps. Safari developer tools help web developers succeed across platforms.

Safari Developer Tools: The Complete Guide for Web Developers
Discover the Top Web Developer Tools for 2023
Unlock Safari's Powerful Developer Tools
Dev Tools iOS Developers Need in 2023

The mobile DevTools you'll love using

Inspect is a developer tool that enables you to inspect and debug your web apps and websites on ios and android from macos, windows and linux..

Join the best

You are in good hands.

Engineers from these companies are already happy (Inspect)ors, more productive and saving time.

Why Inspect?

Debug the web on ios devices.

Inspect enables to you debug Safari and WebViews on your iOS device.

Debug the web on Android

Inspect enables you to debug Chrome and WebViews on your Android device.

No new hardware needed

No new hardware needed. Inspect is provides a software-only solution that works across platforms.

UI from Chrome DevTools

Inspect is built on Chrome DevTools, so you feel right at home from day one.

Inspect over Wifi (on MacOS)

Inspect supports debugging of iOS devices over WIFI on macOS. It's time to let go of the cables.

Screencasting (experimental)

Inspect gives you screencasting for iOS and Android so you can see your changes as you go. All without leaving Inspect.

Works on macOS, Linux and Windows

Inspect and debug your web apps and websites on iOS and Android from macOS, Windows and Linux.

Español – América Latina
Português – Brasil
Tiếng Việt

Tools and debug

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

Simulators and devices

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

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

Simple simulators

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

Some available simulators are:

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

Chromium DevTools simulating mobile devices.

Apple simulators

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

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

Simulator with Safari rendering websites on iPhones and iPad.

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

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

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

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

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

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

Android emulators

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

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

The Android SDK comes with two tools useful for emulation:

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

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

The AVD manager with an Android Virtual device browsing a website

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

Using Google Chrome

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

Creating AVDs with an operating system including Play services.

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

Using other browsers

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

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

Android emulator installing Microsoft Edge from Play store.

Desktop emulators

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

Using physical devices

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

Remote Test Lab from Samsung with a foldable phone.

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

Remote inspection

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

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

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

Port forwarding for Android

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

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

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

Chromium browsers

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

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

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

Service worker tools

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

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

Service Worker debugging tools con Chromium DevTools.

Storage tools

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

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

Background services

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

Web app manifest tools

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

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

Debugging Web App Manifest in Chromium DevTools.

Installation debugging

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

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

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

Google Chrome WebAPK debug screen on Android.

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

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

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

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

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

A Service Worker Web Inspector from a PWA in Safari.

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

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

Tools for PWAs

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

Firefox Developer Tools for Service Worker and Manifest.

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

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

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

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

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

Last updated 2022-05-15 UTC.

Español – América Latina
Português – Brasil
Tiếng Việt
Chrome for Developers

Debugging websites in Chrome on iOS 16.4+

From Chrome 115 you can enable Safari Web Inspector debugging for Chrome on iOS. This post explains how to get started.

Prior to Chrome 115, debugging webpages required building Chrome for iOS from source, as the release version of WKWebView did not support remote Web Inspector debugging. In Chrome 73, we added the chrome://inspect page which locally displays JavaScript logs to assist in debugging webpages. Now that WKWebView allows Web Inspector debugging in release (as of iOS 16.4), we have added a setting in Chrome 115 to enable this feature and further improve the developer experience.

Getting started

On your iOS device you need:

iOS 16.4 or greater.
Chrome 115 or greater.

On your Mac you need:

The Safari Develop menu enabled. Enable this from Safari application settings, Advanced Settings tab.

On your iOS device launch the Chrome app and navigate to Settings . In Content Settings , enable Web Inspector. Relaunch Chrome for iOS after changing this setting.

Debugging your site

With the setting enabled, you can debug any page running in Chrome for iOS by following these steps.

Connect your iOS device to a Mac with a cable.
In Chrome for iOS, navigate to the website which you'd like to inspect.
On your Mac, launch Safari. From the Develop menu, hover over the name of your connected device and select the url of the website which you would like to inspect.

The displayed Web Inspector window will allow debugging of the current web view. For more details about using Safari Developer Tools, refer to Apple's documentation .

Last updated 2023-07-18 UTC.

WebKit Features in Safari 17.4

Mar 5, 2024

by Jen Simmons and Jon Davis

Architectural improvements

Form elements, web assembly, web inspector, changes to safari, safari extensions, web authentication, bug fixes and more, updating to safari 17.4.

Just like Safari 15.4 and Safari 16.4, this March’s release of Safari 17.4 is a significant one for web developers. We’re proud to announce another 46 features and 146 bug fixes.

You can experience Safari 17.4 on iOS 17.4, iPadOS 17.4, macOS Sonoma 14.4, macOS Ventura, macOS Monterey, and in visionOS 1.1.

It’s always exciting to ship new features that you can use while building websites and web apps for your users. WebKit engineers also work on many important projects beyond implementing new web platform features. Recently, much effort has gone into multiple infrastructure projects that strengthen WebKit for the long-term.

We completed the final installment of our multi-year long rewrite of our inline layout engine (more on that later). We built two new iOS frameworks with hundreds of new APIs to support functionality used by web browsers, including multiprocess, JIT, and advanced keyboard & touch event access — and we are pivoting WebKit to use these new frameworks. We’re working on several other large projects that deepen security and privacy. And we’ve been hard at work to make Safari even faster. For many years, Safari has held the crown of the world’s fastest browser. It’s important to us to keep pushing the boundaries of speed, as the websites you build continue to get more complex. Hundreds of recent changes result in Safari 17.4 showing a significant performance bump.

Safari 17.4 brings two improvements to web apps on Mac.

First, Safari adds support for the shortcuts manifest member on macOS Sonoma. This gives you a mechanism in the manifest file for defining custom menu commands that will appear in the File menu and the Dock context menu.

Web Kittens web app open on macOS, with the File menu showing and four custom shortcuts listed

A web app shortcut consists of a name , (the words you’d like to appear in the menu), and a url . When a user activates the command, it opens the specified URL inside the web app.

Users can set up custom keyboard shortcuts for app menu commands in System Settings > Keyboard > Keyboard Shortcuts > App Shortcuts. By default, macOS does not assign web app shortcuts any keyboard commands.

Second, Safari 17.4 now supports the categories manifest member on macOS Sonoma. This member provides you with a mechanism for telling the browser which categories your web app belongs in. On Mac, when a user creates a Launchpad folder that contains web apps, the folder is automatically named accordingly.

Launchpad on macOS showing two app icons in a group titled Social Networking

Switch control

The switch is a popular interface for many use cases, but until now, there was no easy way to put a switch on the web. Instead developers might use a checkbox input field, remove the visual look of the checkbox with appearance: none , and write custom styles to create something that looks like a switch.

Now, with WebKit for Safari 17.4, HTML supports a native switch. If you code <input type="checkbox" switch> , the browser will simply create a switch for you, and map it to role=switch and related ARIA features.

Extending the current HTML checkbox provides several benefits and honors the W3C’s HTML Design Principles . First, this design degrades gracefully — which means you can use <input type="checkbox" switch> today. Browser that have support will show a switch, while browsers that do not have support will show a checkbox. No user will get a broken experience, and you don’t have to wait until all of your users have a browser with support in order to utilize this on your website or web app. This design also does not reinvent the wheel . It matches the way form controls have always worked on the web, and feels just like the code you’re used to. It’s an incremental evolution of the web. And as a simple solution, it avoids needless complexity .

The accent-color property can be used to change the background color of the switch in the “on” state. And, exactly like other form controls, you can use appearance: none to remove the system default styling and apply your own, perhaps while leveraging :before and :after .

In the future, there will likely be multiple pseudo-elements to make it even easier to style the switch with your custom styles. You can try out ::track and ::thumb in Safari Technology Preview today and let us know what you think of this approach. See how they work in this demo , after enabling the “::thumb and ::track pseudo-elements” feature flag . (These pseudos are waiting to ship until there is a more comprehensive plan for styling form controls proposed, discussed and resolved on at the CSS Working Group.)

Vertical writing modes

From the beginning , the web has always been interactive. Even before any method of custom styling was available, form controls and input fields provided the means for users to communicate back to the website and to each other. The web was also originally designed in an era when the Latin alphabet (used by many languages, including English) was the presumed default, with its horizontal top-to-bottom writing mode.

For thirty years, form controls have presumed a horizontal writing mode . Typesetting in a vertical writing mode for languages like Chinese, Japanese, Korean, and Mongolian did not include vertical form controls. Now that’s changed. Starting in Safari 17.4, vertical form controls are supported. This includes meter, range, progress and other form controls that could make for great UI in any language when laid out in a vertical format.

Horizontal Rules inside Select

You can use an <hr> element (a horizontal rule) inside a <select> element to draw a separator line. WebKit shipped support in Safari 17.0 on macOS. Now, Safari 17.4 on iOS 17.4, iPadOS 17.4, and in visionOS 1.1 also has support.

Safari window floating in front of mountains in Vision Pro, with a a select menu open on a web page, showing lines between list items

Try a demo and read the story of how hr in select was supported years ago, went away, and is now restored.

WebKit for Safari 17.4 also adds support for the showPicker() method for <input type="date"> on macOS.

Inline Layout

One of the infrastructure projects that’s been underway in WebKit during the last several years is the complete rewrite of our inline layout engine. Safari 17.4 marks the completion of this project and the retirement of the twenty-one year-old legacy line layout engine.

Inline layout is integral to displaying content on the web. It determines the size and layout — wrapping, justification, spacing, and baseline alignment — of all text and other inline-level content. As developers, we often focus on the invisible block boxes on a web page and write CSS to layout those boxes using Flow, Tables, Flexbox or Grid. The content inside those boxes is placed using complex inline layout algorithms that developers often don’t need to think much about.

We’ve been shipping our new inline layout engine incrementally for many years. As more and more of the new engine was complete, more and more of the content on web pages was positioned by the new engine. This means users have been benefiting from WebKit’s new inline layout engine for a while. The legacy system was only triggered if there were something that hadn’t been yet implemented in the new engine. The last major step needed was the reimplementation of Ruby — and now it’s also a proper inline layout feature, fixing past inconsistencies.

Projects like these can be disruptive. Often browser teams will choose to not ship any new features while a multi-year rewrite project is in progress. WebKit instead chose to keep shipping new features, often implementing them twice — once in the legacy line layout engine, and again in the new inline layout engine. Now that this work is done, we no longer have to implement anything twice. This work also let us go through a large number of bugs reported on bugs.webkit.org , confirm they are no longer a problem, and close them as fixed.

We’re excited for WebKit’s future with this new engine. This investment results in increased interoperability by aligning to the latest web standards, fewer inline layout bugs, better performance, improvements to stability, and the ability to implement new features far more easily. The completion of inline layout also marks the beginning of rewriting the layout engine for other formatting contexts , starting with Flexbox.

Align content everywhere

When Flexbox shipped, it brought a powerful new tool to the web — box alignment . The align-content property made it possible to easily vertically center content inside a box! Or you could use it to align content to the bottom to the box, to align baselines of text, and more. When CSS Grid shipped, box alignment became possible in a second layout mode. Since 2017, you’ve been able to align the direct children of both Flexbox and Grid containers.

Now, we are proud to be the first browser shipping support for align-content inside two more formatting contexts — block layout and table layout. This means if all you want to do is align a box’s content in the block direction, you don’t need to involve Flexbox or Grid. Plus, you can now mix alignment with floats, and you can use it inside table cells.

In addition, we updated the handling of align-content and justify-content on scroll containers in WebKit for Safari 17.4. Now, for example, you can use CSS to set the initial scroll position to the end rather than the start of the content.

Be sure to test alignment on scroll containers across browsers, as many are still in the process of updating to the specified behavior. Those that have not yet updated may clip content.

CSS Scoping

Websites today can be complex, with large teams working across multiple projects, relying on pattern libraries or frameworks to keep everything organized and consistent. It can become tough for large teams to handle how their CSS cascades. Tools like Cascade Layers and :has() have changed the game, allowing developers to apply styles more masterfully. Yet, developers often want a way to scope styles to the individual component they’re working on, without worrying about the big picture or preventing unintended consequences.

CSS Scoping was created to provide several more powerful options for organizing and structuring CSS. (Note, there have been many debates over many years on how style scoping might work. Search results for “CSS scoping” often yield old, unimplemented or completely different ideas.)

WebKit for Safari 17.4 adds supports the @scope rule and expands the capabilities of the :scope pseudo-class. Scoping changes how the cascade works in some surprising ways, so do be sure to read about its impact before deploying widely.

If your project is making heavy use of components, constructed independently and loaded in random order, scoping can help you by ensuring certain styles only apply to the contents of a specific element, and never to anything else on the page.

By default, all CSS on a project applies universally. It has a “scoping root” of <html> . And the :root pseudo-element refers to the root element in the DOM — the html element. CSS Scoping lets you use <style> @scope to reset the scoping root to a certain element, to the parent of the <style> element.

In this case, because <article> is the direct parent of <style> @scope , all of the styles defined inside @scope will only impact article and the content inside article . Nothing outside article is affected.

But that’s not all CSS Scoping can do. Let’s imagine we want to apply styles to a sidebar, but we don’t want those styles to apply to everything in the sidebar. We can use @scope to create a donut of sorts — with a hole in the middle where the styles don’t apply.

By defining a scoping root with a scope-start selector ( aside ) and a scoping limit with a scope-end selector ( section ), we can effectively stop the cascading of the styles.

Also, anytime you use CSS Scoping, it radically changes what happens when there’s a tie in specificity.

Since the creation of CSS, when multiple selectors have equal specificity, the one that appears last in the CSS cascade is the one that gets applied. For example, if this is your CSS:

Then this is your result.

The headline is always yellow, because .yellow comes later in the CSS file. The order in the HTML does not matter.

But with scoping, the selector that applies to an element that’s closer in the DOM to the scoping root is the one that will apply when their specificities are tied .

Let’s use @scope instead of descendant selectors:

Now, the headline color is determined by the DOM order in HTML, not the cascade order in CSS:

The headline is yellow when .yellow is the closer ancestor, and it’s blue when .blue is the closer ancestor.

This is a fundamental change to how CSS works, so don’t get caught off guard. Use CSS Scoping with a lot of thought and care.

Note that a selector like .blue h1 { } has higher specificity than a selector like @scope (.yellow){ h1 { }} . The specificity of the scoping root’s selector is not added to the specificity of the selectors inside the @scope rule, unlike Nesting. And .blue h1 is higher specificity than h1 .

WebKit for Safari 17.4 also expands the purpose of the :scope pseudo-class. When used inside a @scope block, :scope matches the block’s defined scope root. This provides a way to apply styles to the root of the scope from inside the @scope block itself. In the following example, :scope applies a border to the article element.

White space and text wrap

For years, the white-space property in CSS has provided a mechanism for doing two things at once: 1) defining whether and how white space is collapsed, and 2) defining whether and how lines wrap. The CSS Working Group has since noted that this was likely a mistake , to handle two different qualities in one property. With the introduction of text-wrap , the CSSWG has rethought how the long and shorthand versions of these properties combine into an architecture that makes more sense and gives us needed flexibility.

Now the white-space property is a shorthand for two new longhand properties: white-space-collapse and text-wrap-mode , both added in WebKit for Safari 17.4. These longhands let you change the collapsing and wrapping modes independently, each without affecting the other.

The white-space-collapse property controls how white space is collapsed. By default, it’s set to collapse , causing strings of multiple spaces to become a single space. You can change the value instead to preserve in order to keep all the spaces, or use other the values: preserve-breaks , preserve-spaces , or break-spaces . These values all behave as they have for years with the white-space property.

The new text-wrap-mode property provides a mechanism for setting whether or not text should wrap. The wrap value turns it on, and the nowrap value turns it off.

This work sets the stage for the text-wrap shorthand and it’s longhands text-wrap-style and text-wrap-mode , some of which you can currently test in Safari Technology Preview .

Percentages in spacing

WebKit for Safari 17.4 adds support for percentages in letter-spacing and word-spacing . This lets you define spacing as a percentage of the element’s font-size — and keeps tracking the font-size even when it grows or shrinks on descendant elements.

Styling grammar and spelling errors

WebKit for Safari 17.4 adds support for the ::spelling-error and ::grammar-error pseudo-elements. These make it possible to create your own custom styling for text that is marked by the browser as misspelled or grammatically incorrect.

Alt text for generated content

The vast majority of content on the web is communicated through HTML, but CSS does have the ability to insert content into the page. Until now, sometimes this kind of content could not be made accessible. Now in WebKit for Safari 17.4, you can provide alternative text with accessible content fallback — content: "foo" / "alt-text";

For example, perhaps we want to prefix certain links with the little ⓘ icon to let users know this item leads to more detailed information. That symbol might be read by screenreader as “Circled Latin Small Letter I” or “Information source combining enclosing circle”, neither of which do a good job communicating the intended purpose. Perhaps a better experience would be to simply hear “Info:”.

Previously, the -webkit-alt property served this function. It has been deprecated in favor of the new content alt text syntax. The new syntax is also more expressive as it allows for cascading, and allows you to chain multiple strings and attr() as alternative text.

Transitions

When CSS Transitions were created, they allowed authors to create a gradual timed transition between old and new values by interpolation. Sometimes, however, interpolation is not possible. For example, there’s no meaningful intermediary value between float: left and float: right , so, transitions ignored these properties. They simply jumped from the first state to the second immediately, without any ability to define when the jump should happen.

Yet, web developers have wanted a way to at least be able to define when the transition should happen for discrete properties. So the CSS Working Group figured out a way to make that possible. Now, you can tell the browser that you want an element to be capable of transitioning discrete property values, which lets you control their transition timing using the easing functions .

WebKit for Safari 17.4 adds support for the transition-behavior property. The transition-behavior: allow-discrete rule lets you enable transitions between discrete property values, so that you can control their timing via transition .

The :has() pseudo-class provides tremendous value. We keep making it more and more powerful by adding support for additional pseudo-classes within :has() . WebKit for Safari 17.4 adds support for :has(:any-link) , :has(:link) , and :has(:-webkit-any-link) , making it possible to select an element depending on whether or not it contains a link.

WebKit for Safari 17.4 adds support for CSS custom properties to the ::backdrop pseudo-element, allowing variables to be applied to the backdrop behind dialog elements and other top layer items.

WebKit for Safari 17.4 also adds offset-position support for circle() and ellipse() .

And WebKit for Safari 17.4 makes -apple- prefixed pseudo-elements no longer valid.

This release of Safari adds support for an assortment of small Web API additions that give you extra tools in your developer toolkit.

With support for the element.checkVisibility() method, you can determine the visibility of an element across a variety of conditions including how CSS properties such as display , visibility , and opacity are applied.

WebKit for Safari 17.4 also extends its Declarative Shadow Root support. The Element.prototype.setHTMLUnsafe() , ShadowRoot.prototype.setHTMLUnsafe() , and Document.parseHTMLUnsafe() methods, as well as the ShadowRoot clonable property are now available. The setHTMLUnsafe() methods work similar to setting an element’s innerHTML property, enabling unsanitized DOM tree mutation but with additional support for declarative shadow roots. The parseHTMLUnsafe() method similarly parses unsanitized HTML with declarative shadow root support and returns a document. And the clonable read-only boolean property allows you to detect if a ShadowRoot is clonable.

WebKit for Safari 17.4 adds support for the CustomStateSet interface for custom element state management. This interface includes methods to add() , delete() , or detect if the element has() a given state, and more. Importantly, these states added to a custom element can be styled using the :state() pseudo-class by users of the custom element.

The DOMMatrixReadOnly interface now supports the scaleNonUniform() method that creates a new DOMMatrix scaling on X, Y, and Z axes. The X axis scaling factor must be specified, but the Y and Z axes default to 1 . The scaling is centered at the given origin that defaults to (0, 0, 0) .

Lastly, WebKit for Safari 17.4 adds support for AbortSignal.any() giving you a convenient way to combine abort signals such as user input (e.g. a user clicks a cancel button) and a timeout to send an abort signal to an async operation.

New JavaScript features in Safari 17.4 add new expressiveness and convenience with promise resolvers, improved internationalization formatting, ArrayBuffer ownership management, and Array grouping features.

WebKit for Safari 17.4 adds support for the Promise.withResolvers static method. It allows developers the convenience of creating a promise and configure the resolution and rejection handlers after it has been created. The method returns the promise along with the resolution and rejection functions.

The TimeZoneOffset format is now available for Intl.DateTimeFormat . It allows you to specify the difference of the local time to UTC time in positive or negative hours and minutes depending on whether the local time is ahead or behind.

Additionally, Number.prototype.toLocaleString and Intl.NumberFormat have been updated so the string representation correctly aligns with recent specification changes.

There’s also new expressive API for managing the concept of ownership for ArrayBuffers. ArrayBuffer.prototype.transfer creates a new ArrayBuffer with the same contents and properties as the target ArrayBuffer (such as being resizable) and detaches it from the original ArrayBuffer. You can use ArrayBuffer.prototype.transferToFixedLength() to guarantee a non-resizable ArrayBuffer with the same content as the buffer. ArrayBuffer.prototype.detached will tell you if the buffer has been transferred and is detached.

WebKit for Safari 17.4 also adds the Array grouping feature that includes Object.groupBy and Map.groupBy methods. These methods give you powerfully simple tools for grouping datasets.

Additional codecs

WebKit for Safari 17.4 adds support for several audio and video codecs.

First, WebKit for Safari 17.4 on iOS, iPadOS and in visionOS adds support for WebM . While the WebM container (with both the VP8 and VP9 video codecs) has been fully supported on macOS since Safari 14.1, support on iOS and iPadOS was limited to VP8 in WebRTC. Now, WebM is fully supported everywhere.

The Vorbis audio codec is also now supported in WebKit on iOS 17.4, iPadOS 17.4 and in visionOS 1.1.

And WebKit for Safari 17.4 expands what WebCodecs can do with the addition of support for the HEVC codec.

Source prioritization

When support for video embedding arrived in HTML5 with the <video> and <source> elements, the web standard specified that the first file that’s recognized by the browser should be chosen and played. This put the burden on the developer to make sure the best files were listed before lesser-quality files.

This made sense in a simpler time, when there were just a few codecs available. Now, there are many codecs with different qualities. It’s not always possible for developers to know which file is the best one for a user to stream. And it can be impossible to put them in one specific order that’s best for all users.

A browser might easily be capable of playing several of the files offered, but one of those files could be compressed with a codec that the user’s device can decode using hardware, while the rest might only be decoded by software alone.

It’s definitely a better user experience to use hardware decoding. Doing so significantly impacts power usage and makes a battery last longer. So now, in WebKit for Safari 17.4, the best file for the user is chosen, instead of defaulting to the first file that has support. Video codecs with hardware decoding support on various Apple devices include VP9, h.264, HEVC and AV1.

WebKit for Safari 17.4 adds support for HTML character entities to WebVTT (Web Video Text Tracks Format), the technology used to add subtitles and captions to video files on the web. HTML entities are a way to write special characters without having the browser mistakenly think they are part of the HTML code. For example, · represents the “·” character.

MediaStream

WebKit for Safari 17.4 adds support whiteBalanceMode to MediaStream. In photography, adjusting white balance is a technique for compensating for the fact that “white” is a different color under different lighting conditions. Sunlight is very blue, while indoor lights tend to be quite orange. Our brains automatically adjust, so as humans, we rarely notice. But cameras need technology to help them adjust color temperature so that the resulting photo or video has the kind of coloring people expect. Now modes for white balance are available for the MediaStream Image Capture API on the web.

WebKit for Safari 17.4 adds support for kernelUnitLengthX and kernelUnitLengthY to SVGFESpecularLightingElement .

WebKit for Safari 17.4 adds support for four new WebGL extensions: EXT_clip_control , EXT_depth_clamp , EXT_polygon_offset_clamp , and WEBGL_polygon_mode .

WebKit for Safari 17.4 enables extended constant expressions to support more advanced WebAssembly linking.

Web Inspector for Safari 17.4 has two new features. First, when a page attempts to load a font URL blocked by Lockdown Mode, a message is logged to the Console.

Second, Web Inspector now groups load errors for source maps. Source map files are used for converting a combined or minified file back into its original state. Grouping load errors helps reduce noise while debugging. You can disable this behavior in Web Inspector Settings under Experimental settings.

Safari 17.4 itself includes three changes to the UI and user experience. First, you can now configure the Favorites Bar to show your bookmarks with only their icons. Edit the name of the bookmark in the favorites bar, and remove the name. The icon will remain.

Second, Safari 17.4 now supports webpage translation inside <iframe> elements.

And third, Safari 17.4 adds support for Apple Cash virtual card numbers and showing the user their Apple Cash balance when using AutoFill.

Safari 17.4 includes a change to web extensions that allows extensions to open Private Browsing windows even when they don’t have access to Private Browsing.

WebKit for Safari 17.4 adds support for WebAuthn’s PublicKeyCredentials.getClientCapabilities() function. Use it to find out which WebAuthn features are supported. It returns a Promise of a record<DOMString, boolean> containing capabilities and their values.

In addition to all the new features, WebKit for Safari 17.4 includes work polishing existing features.

Accessibility

Fixed exposing the correct <summary> element role. (13661104)
Fixed non-accessible content within iframes with ARIA roles. (104611075)
Fixed VoiceOver word echo on text inputs with a combobox role. (112488137)
Fixed an issue where innerHTML and innerText changes to labels did not update their corresponding input element’s accessibility title. (113872525)
Fixed <details> and <summary> elements not included in VoiceOver form controls menu or list. (117308226)
Fixed comboboxes not notifying assistive technologies when aria-activedescendant changes. (117747058)
Fixed toggling accessibility preferences to correctly update form control appearance. (117914468)
Fixed: Removed the default ARIA-level heading for a heading role, matching removal from ARIA specifications. (119059172)
Fixed text missing from accessibility labels for many common shadow DOM scenarios. (120223342)

Browser Changes

Fixed loading a ⌘Click fragment link in a background tab. (119079650)
Fixed the default link color contrast for the dark color scheme. (61149466)
Fixed getComputedStyle() for invalid pseudo-elements. (98504661)
Fixed querySelector() to not throw an exception for -webkit- prefixed pseudo-elements. (99299129)
Fixed :user-invalid triggering while typing a date. (110687369)
Fixed: Updated text-transform: full-size-kana to align with Unicode 15. (111508663)
Fixed contain: inline-size breaking grid-template-rows: auto . (113915953)
Fixed svh and dvh units being unexpectedly equal when the Safari tab bar is not visible. (115085360)
Fixed mixed-blend-mode to blend correctly against the root background. (115688282)
Fixed backdrop-filter with many interoperability improvements. (115703346)
Fixed oklab and oklch lightness value clamping. (116195533)
Fixed flex layout invalidation in cases where the content of a flex item changes or style changes impact the preferred widths computation of its items. (117181858)
Fixed selection gaps to get painted with the expected ::selection pseudo-element color. (117796745)
Fixed parsing and serialization of -webkit- prefixed pseudo-elements. (118081134)
Fixed ::backdrop to be allowed after ::slotted() . (119015204)
Fixed to allow :checked and :indeterminate to match at the same time. (119075969)
Fixed grid with size containment and min-height not sizing row correctly. (119736473)
Fixed computing values of basic shape rect() and xywh() as the equivalent inset() . (119739406)
Fixed poor performance with :has(+ :not(.class)) pseudo-class selector. (119819247)
Fixed CSS content computed value serialization. (120061551)
Fixed pseudo-element parsing in getComputedStyle() and KeyframeEffect.prototype.pseudoElement so they require them starting with :: (or : for 4 legacy pseudo-elements). (120170550)
Fixed CSS linear() easing. (120290721)
Fixed named at-rule container getting skipped when the container is named in a :host selector. (120428386)
Fixed :not(:has(:not(foo))) getting misclassified as scope breaking. (120492012)
Fixed the name for a ::slotted pseudo-element in a container query getting resolved against the wrong scope. (122224135)
Made -apple- prefixed pseudo-elements no longer valid. (120268884)
Fixed <select> not refreshing the dropdown after an <option> is removed on iPad. (88292987)
Fixed text-indent to affect the selected file(s) label for file inputs. (105223868)
Fixed dir=auto to work for hidden , password , submit , reset , and button input types, made dirname work for password and submit input types, and removed dirname support from number input types. (113127508)
Fixed serialization of autocomplete with a webauthn token. (116107937)
Fixed <option> elements outside of an <optgroup> getting added to the preceding group. (117930480)
Fixed viewport units to be correct after entering and exiting fullscreen mode on iOS, iPadOS, and in visionOS. (120496571)
Fixed the system-ui font family within <canvas> . (117231545)
Fixed <progress> to use the page’s preferred rendering update interval. (118976548)
Fixed missing support for the direction attribute in the list of attributes whose values are matched case-insensitively with attribute selectors. ( (119432066)
Fixed stringification algorithm of the Function constructor to match specifications. (102065151)
Fixed block-level function declarations to have correct scope in global code and aligned the detection of hoistable block-level legacy function declarations with the spec. (113880075)
Fixed an edge case with detecting a semantic error in generators. (117497786)
Fixed Temporal API to throw TypeErrors for unexpected primitives. (117992134)
Fixed Temporal options handling to align with the specification. (118088676)
Fixed Temporal.Now.timeZone() to be updated to timeZoneId() . (118674314)
Fixed Link-stylesheet elements to not fire load events for non-text/css and non-2XX responses. (116112223)
Fixed link-stylesheet elements to not fire load events for non-2XX responses such as 3XX responses that do not redirect. (116331826)

Lockdown Mode

Fixed Lockdown Mode disabling on sites with COOP and COEP HTTP headers. (119503109)
Fixed WebVTT regions to position according to specifications. (23091897)
Fixed pausing MediaRecorder continuing to call ondataavailable at every timeslice event. (115979604)
Fixed an HEVC decoder issue when translating annexb data. (116768196)
Fixed WebVTT to treat negative percentages as invalid values. (117615681)
Fixed object-fit: fill on <video> elements. (118020922)
Fixed WebRTC calls not unmuting automatically after using Siri sometimes losing incoming audio. (118461093)
Fixed white bars across the top and bottom of fullscreen video playback while using Light Mode. (118530255)
Fixed the always empty video.buffered attribute. (118550061)
Fixed WebVTT to correctly parse region id settings. (118551267)
Fixed VideoEncoder produces no frames with latencyMode “realtime” when framerate/bitrate are not given. (118725549)
Fixed AV1-in-MP4 codec string not shown in Show Media Stats. (118850797)
Fixed getDisplayMedia frameRate always at 30 regardless of constraints. (118874132)
Fixed returning to fullscreen from picture-in-picture breaking subsequent touch input. (119832557)
Fixed HLS video captions where there are multiple text tracks available. ( (119839950)
Fixed fullscreen video not scaling to display size when the Safari window is in Full Screen App Mode. (119893556)
Fixed handling key renewal requests that cause playback errors for some DRM content. (120230860)
Fixed camera and mic activation failure due to media capability granting and activation order. (120510826)
Fixed paint-on captions shifting during playback. (120847946)
Fixed videos shifting up and down when fullscreen overlay controls appear or disappear. (120848395)
Fixed volume slider flickering when adjusting volume in Safari in visionOS. (120855936)
Fixed blocked encrypted sampled not getting enqueued after a CDM is attached to a SourceBuffer. (120879185)
Fixed video playback on Twitter.com in Safari in visionOS. (121391975)
Fixed[Netflix.com content that can become zoomed-in and cropped when in fullscreen mode. (121822831)
Fixed pseudo-element font size calculation to fix subtitle size in fullscreen mode. (122584350)
Fixed incorrectly oriented Traditional Mongolian script characters.(93426525)
Fixed resizing behavior with writing-mode: vertical-rl or direction: rtl . (102620110)
Fixed opacity and rendering the root element background image. (115396444)
Fixed the color of the drop shadow to preserve its alpha channel. (115812347)
Fixed filters with outsets to repaint the entire filterRegion if GraphicsStyles are used. (115817290)
Fixed compositing the filter style transparency layers to not clip the destination context. (115901634)
Fixed a bug where the returned transform from getComputedStyle was incorrect. (117523629)
Fixed handling images with color spaces not supported by the backend to fallback to render in sRGB. (118238178)
Fixed check boxes and radio buttons to avoid floats. (118660695)
Fixed rendering for a <div> within a transformed parent <div> with overflow: hidden . (118901069)
Fixed rendering issues when editing text. (119833765)
Fixed offsetHeight and offsetWidth are 0 for an inline box wrapping a block. (119955792)
Fixed a floating element causing a list item bullet to be orphaned on constrained lines. (120022893)
Fixed incorrect inline box (hugging) outline painting in vertical writing modes. (120217559)
Fixed incorrect ch unit value in vertical-rl and vertical-lr when text-orientation is not upright. (120293590)
Fixed graphics artifacts when scrolling a Heroku app. (120373474)
Fixed overflow: hidden to not prevent CSS Subgrid from applying. (120848131)
Fixed the repaint area for underline text decorations. (121082290)
Fixed align-content and justify-content on scroll containers causing overflowing content to become inaccessible. (121366949)
Fixed rendering floats and an out-of-flow <br> element with clear . (121444267)
Fixed a line break at gaps between two inline elements in a container with white-space: nowrap . (121859917)
Fixed cropped first letter for custom fonts that report negative advance width. (121891210)
Removed margin-trim behavior for floats to match specification changes. (115794102)
Fixed sending an error back to the caller if an error occurs for scripting.executeScript() . (107996753)
Fixed an issue where scripts may not be removed after calling scripting.unregisterContentScripts() . (113171510)
Fixed unusable horizontal scrollbars for right-to-left, vertical-rl , or flexbox reverse mode elements. (104944522)
Fixed a scrollTo() followed by an animated scroll ending at the wrong scroll position. (117608836)
Fixed wheel overflow behavior with Shadow DOM elements. (118496293)
Fixed keyboard scrolling beyond the page getting stuck at a bad scroll offset. (120053910)
Fixed cases where website data is unexpectedly evicted. (119818267)
Fixed applying rx or ry exclusively via CSS having no effect. (113500023)
Fixed negative SVGTransform scale values to be correctly stringified. (118656892)
Fixed the layout of an SVG when it is inside an <iframe> without affecting the size of the <iframe> . (120178866)
Removed support for SVGRenderingIntent. (102516681)
Fixed CSS invoked URL parsing to always use UTF-8 as agreed by the W3C CSS WG. (114889625)

Web Animations

Fixed style invalidation for animations. (118500247)
Fixed a paused animation where currentTime is changed to 0 not restarting when unpaused. (118826588)
Fixed invalid coordinates on wheel and gesturechange events inside an iframe. (105243167)
Fixed HTMLAreaElement to align with the HTML Standard. (110028213)
Fixed the result of Range.getClientRects() and Range.getBoundingRect() for certain ranges. (112543805)
Fixed Scroll To Text Fragment to not scroll after dynamic stylesheet loads and the user has scrolled. (112608578)
Fixed SharedWorker referrer policy to default to its context referrer policy if none is provided in its script http response. (114625126)
Fixed URL encoding for Request ‘s referrer feature and Response.redirect() . They now always use UTF-8. (115219660)
Fixed reprocessing <meta name="color-scheme"> when their name or content attribute changes. (115958450)
Fixed FetchResponse.formData() to parse headers names as case insensitive. (116742000)
Fixed declarative shadow trees to match the latest specifications. (117655691)
Fixed jiggling caused by repeated calls to scrollIntoView({ block: 'center' }) . (117755250)
Fixed fullscreen warning banner to prevent cutting off long domain names. (118078137)
Fixed updating resizeBy and resizeTo to use int rather than float to align with specifications. (118872048)
Fixed the CookieChangeEvent to not be exposed when the Cookie Store API is disabled. (118902989)
Fixed Element.prototype.setAttributeNode() to not treat attribute names case insensitively. (119013600)
Fixed toggling the spellcheck attribute not toggling spelling markers on input elements. (119269616)
Fixed removing highlights in the Custom Highlights API. (119531671)
Fixed getElementsByName() to only return HTML elements, not SVG, MathML, or other types of elements. (120275680)
Fixed the button value for a pointerup event not matching the pointerdown event. (120429508)
Fixed a wheel event to fire on an element that has been re-inserted after document.open . (120893136)
Fixed Scroll To Text Fragment Text Directives to find text with additional unrendered white space in their node data. (120913588)
Fixed changing HTMLCanvasElement width or height causing intermediate buffer allocations. (122309325)
Fixed canvas captureStream stuttering with WebGL. ((122471664)
Fixed Home Screen Web Apps in Simulator to be listed under a “Home Screen Web Apps” section in the device submenu of the Develop menu. (117742935)
Fixed the tan() function to not trigger the color picker. (118724061)
Fixed Canvas WebGL context capture to WebCodecsVideoFrame not capturing all frames. (108459224)
Fixed: Improved performance of MSAA rendering, including antialiased default framebuffer and fixed PBO uploads of PVRTC1 textures. (117461678)
Fixed WebGL OffscreenCanvas returning the previously created WebGL1 context when asking for WebGL2. (119028794)
Fixed WebGL to be available in nested workers. (120279728)
Fixed HTML content not displaying in a Simulator, affecting projects using the web extension project template. (121338366)
Fixed media tracks obtained with {"width":1920,"height":1080,"frameRate":24} . (61747755)
Fixed triggering resolution scaling in the case of WebRTC maintain-framerate degradationPreference . (121041723)
Fixed a bug that prevented HTML canvas elements from always being marked dirty on initialization. This could cause some video effects to have choppy animations. (121257960)

Safari 17.4 is available on iOS 17.4 , iPadOS 17.4 , macOS Sonoma 14.4 , macOS Ventura, macOS Monterey and in visionOS 1.1.

If you are running macOS Ventura or macOS Monterey, you can update Safari by itself, without updating macOS. On macOS Ventura, go to  > System Settings > General > Software Update and click “More info…” under Updates Available.

To get the latest version of Safari on iPhone, iPad, or Apple Vision Pro, go to Settings > General > Software Update, and tap to update.

We love hearing from you. To share your thoughts on Safari 17.4, find us on Mastodon at @[email protected] and @[email protected] . Or send a reply on X to @webkit . You can also follow WebKit on LinkedIn . If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technologies or Web Inspector. Filing issues really does make a difference.

Download the latest Safari Technology Preview on macOS to stay at the forefront of the web platform and to use the latest Web Inspector features.

You can also find this information in the Safari 17.4 release notes .

Unlock the Power of Safari Developer Tools on iOS

If you’re an iOS developer, you know the importance of having access to the right tools and resources. Developing for Apple’s mobile OS can be a challenging but rewarding task. One of the most helpful tools avaiable to developers is Developer Tools in Safari for iOS.

Developer Tools in Safari for iOS provides developers with a suite of powerful and easy-to-use debugging, testing, and optimization tools. It can be used to diagnose issues in websites and web apps, test performance and compatibility across different versions of iOS, or even optimize code to make sure it runs smoothly on any device.

The first step in using Developer Tools is to enable the “Develop” menu in Safari by gong to Settings > Privacy & Security > Developer Mode. Once this is enabled, you should see the “Develop” menu appear at the top of your browser window.

From here, you can open up the various developer tools available ranging from Web Inspector (which helps you inspect HTML and CSS elements) to Error Console (which helps debug JavaScript errors). You can also adjust settings such as caching and user agent spoofing which will help you test your website across different devices or browsers.

If you need more detailed informtion about what’s happening behind the scenes, Safari’s Web Inspector includes a timeline view that shows a graphical representation of page loading times as well as memory utilization. It also includes JavaScript debugging capabilities so if something isn’t working properly on your site, it’s easy to pinpoint where the problem lies.

Finally, if you want to optimize your website for mobile devices or test how it looks across different versions of iOS, Safari’s User Agent Spoofing feature allows you to do just that witout needing any additional software or plugins.

Overall, Developer Tools in Safari for iOS provide developers with an invaluable set of resources that makes debugging and testing much easier than ever before. If you are developing a website or web application for iOS devices, these tools are essential for ensuring everything works as expected before launching it into production!

Unlock the Power of Safari Developer Tools on iOS 1

Opening Developer Tools in Safari iOS

To open the Developer Tools in Safari iOS, go to your home screen and tap on the Settings icon. Next, scroll down and select Safari. Then, scroll down again and toggle on the switch next to Web Inspector. Once enabled, you can open the Developer Tools in Safari iOS by tapping and holding on any element of a webpage until a menu appears. Select Inspect Element from the menu to open the Developer Tools. You can also access the Developer Tools by long-pressing on the Refresh button in your browser’s address bar.

Accessing Developer Tools on iOS

To access developer tools in iOS, you will need to enable Developer Mode on your device. To do this, go to Settings > Privacy & Security and scroll down to the Developer Mode list item. Navigate into it and use the “Developer Mode” switch to toggle it on. Once enabled, you can use developer tools such as Xcode to test and debug your applications or make chages to existing ones.

Finding Developer Tools in Safari on iPad

To find the developer tools in Safari on your iPad, first open the Settings app. Then select Safari, and then tap Advanced. Finally, toggle on Web Inspector to enable it. You may also want to make sure that JavaScript is enabled as well. Once these steps are completed, you can inspect elements on webpages by pressing and holding on the page util a popup appears with an “Inspect Element” option. You’ll then be able to open up the developer tools and view various information about your webpage and its elements.

Exploring the Possibility of a Developer Mode on iOS

Yes, there is a developer mode on iOS. It can be enabled in the Settings app under Privacy & Security > Developer Mode. When enabled, it will give you access to additional tools and options for developers, such as being able to install test versions of applications or debug application code. Note that you will need to restart your device after enabling the toggle.

Inspecting Element on Safari iOS

Yes, you can inspect elements on Safari iOS. To do so, you must first connect your iPhone to your computer and open the Safari web browser on your device. Then, tap the “Settings” icon and select “Advanced” tab. Under the Advanced tab, you will find the “Web Inspector” option whih needs to be enabled. Once enabled, you can open the webpage you want to inspect elements from using the Safari web browser on your device. Now, in order to inspect elements, open Safari Web Developer Tools on your computer by going to the menu bar at the top of your screen and selecting Develop > User Agent > iphone (or whichever device you are using). Now simply select an element from the page and right-click it for more options such as ‘Inspect Element’ which will give you detailed information about that particular element.

Enabling Developer Tools in Safari

To enable developer tools in Safari, you will need to open Safari and select the Preferences option from the menu bar. Once in the Preferences window, select ‘Advanced’ and check the box next to ‘Show Develop menu in menu bar’. This will add a new ‘Develop’ option to the menu bar. By selecting this option, you are able to access a range of developer tools such as an inspector for HTML elements, an interactive JavaScript console, and more. With these tools, you can inspect and debug your website’s code whch can help you identify any problems or areas of improvement.

In conclusion, developer tools in Safari on iOS can be an incredibly helpful tool for web developers. It provides a range of tools to help developers test teir websites and ensure they are compatible with all standards-based browsers. To enable Developer Mode, simply go to Settings > Privacy & Security on the iOS device and toggle the Developer Mode switch. On Macs, launch Safari and go to Safari menu | Preferences | Advanced then check ‘Show Develop menu in menu bar’. Additionally, make sure JavaScript is enabled. With these steps, you’ll be able to start using developer tools in Safari on iOS easily and quickly.

Sanjeev Singh

Apple to allow web distribution for iOS apps in latest DMA tweaks

Apple will allow iOS developers located in the European Union to distribute apps from the web, rather than from its App Store.

The option, which it says will be made available to qualifying developers “later this spring,” is being offered in response to the bloc’s Digital Markets Act (DMA), which puts obligations on how Apple can operate the App Store and iOS, which are designated as “core platform services” under the law.

“Web Distribution, available in a software update later this spring, will let authorized developers distribute their iOS apps to EU users directly from a website the developer owns and operates,” it writes. “Apple will provide access to APIs that facilitate the distribution of developers’ apps from the web, integrate with system functionality, back up and restore users’ apps, and more.”

Apps offered through Apple’s Web Distribution APIs will have to meet Notarization requirements it previously set out — which it says is necessary to “protect platform integrity.” They can also only be installed from a website domain the developer has registered with Apple, in App Store Connect.

Users of iOS will also need to approve the developer installing apps from their site via their iPhone settings. They will see a “system sheet” — with info developers must submit to Apple for review, including the app name, developer name, app description, screenshots and system age rating.

Apple’s initial proposal for DMA compliance did not allow web-based distribution for apps. However, it has faced a barrage of outrage from developers decrying a narrow and self-serving interpretation of rules that the bloc’s lawmakers intend to open up digital markets locked down by the market power of a handful of intermediating internet “gatekeepers.”

The European Commission has also signaled it’s closely watching Apple . It’s notable that a few days after terminating the developer account of one of its most trenchant developer critics, Epic Games, Apple backed down and reinstated the account.

Apple made a handful of other changes to its DMA compliance offer last week — reducing certain criteria it had said it would apply to developers seeking to take up DMA entitlements. But today’s announcements look more substantial, with Apple also dropping a restriction on alternative app marketplaces that had meant they had to offer a catalog of other developers’ apps.

Now — effective immediately — Apple says alternative app marketplaces can choose to offer only their own apps.

In another change Apple has announced today — that’s also effective immediately — it’s dropping a requirement for developers that want to direct users to their own websites to purchase digital goods to use its own design templates for linking out to the web for purchases.

It says this template is now optional and developers can choose how to design in-app promotions, discounts and other deals when directing users to complete a transaction on their own website.

In a note to developers about the changes, Apple writes: “We’re providing more flexibility for developers who distribute apps in the European Union (EU), including introducing a new way to distribute apps directly from a developer’s website.”

The changes require developers to accept Apple’s new terms — which means signing up for a revised fee structure that includes a “core technology” fee , charged at €0.50 for each first annual install over 1 million in the past 12 months (regardless of where apps are distributed).

Apple argues this fee reflects the value it provides developers, via “ongoing investments in the tools, technologies, and services that enable them to build and share innovative apps with users around the world,” as it puts it.

Criteria for web distribution for iOS apps

Today’s changes mean qualifying iOS developers will soon be able to offer an alternative app store composed of their own wares and distributed from their own website — something Epic Games has been anticipating — but Apple is still applying some additional criteria, in addition to requiring developers to sign up to its new T&Cs (and pay the core tech fee).

As well as requiring developers to be incorporated, domiciled, and/or registered in the EU (or have a subsidiary legal entity incorporated, domiciled, and or registered in the EU that’s listed in App Store Connect), Apple’s criteria for eligibility for web distribution requires them to have been what it calls “a member of good standing” in its developer program for two continuous years or more and to have an app that had more than 1 million first annual installs on iOS in the EU in the prior calendar year.

It also stipulates developers must agree to a range of behavioral pledges, including committing to being responsive to communications from it, especially regarding “any fraudulent, malicious, or illegal behavior, or anything else that Apple believes impacts the safety, security, or privacy of users”; publishing transparent data collection policies and offering users control over how their data is collected and used; following applicable laws of the jurisdictions where they operate (Apple gives the examples of the EU’s Digital Services Act [DSA], General Data Protection Regulation [GDPR]), and consumer protection laws); and being responsible for handling governmental and other requests to take down listings of apps.

Apple’s explicit requirement that developers follow other EU laws looks particularly interesting in this context. The bloc’s lawmakers can’t exactly complain about that condition — so it offers a route for Apple to police developers’ access to web distribution for iOS apps by applying a privacy and consumer rights lens to third parties’ businesses.

Last year, reports suggested adtech giant Meta was planning to launch its own alternative app store on iOS and distribute apps to users in the EU via Facebook Ads, using the sideloading requirement in the DMA to bypass Apple’s App Store. And while Apple’s initial DMA compliance proposal looked too narrow to enable such a scenario, under the revised conditions Apple has announced today, Meta’s concept of iOS apps distributed via its own ad network looks possible.

However, there’s one — well, several — big potential sticking point: Meta’s compliance with the GDPR, DSA and EU consumer protection law are contested. Indeed, it’s been found to have breached the GDPR multiple times since the law started to apply back in 2018, incurring a series of fines and corrective orders since then. Meanwhile, its current attempt to force EU users to consent to tracking is being challenged via GDPR and consumer protection complaints. The EU is also asking questions about the mechanism’s compliance with the DSA, in addition to other areas of concern ( like child safety ).

Apple may therefore have plenty of grounds it can point to to deny web distribution to Meta — or, indeed, to any other business model that’s based on consentless surveillance of users and has a long history of run-ins with EU privacy laws.

Now the EU is asking questions about Meta’s ‘pay or be tracked’ consent model

Meta’s ‘consent or pay’ data grab in Europe faces new complaints

View in English

Getting ready for Web Distribution in the EU

Web Distribution, available in a software update later this spring, will let authorized developers distribute their iOS apps to EU users directly from a website the developer owns and operates. Apple will provide access to APIs that facilitate the distribution of developers’ apps from the web, integrate with system functionality, back up and restore users’ apps, and more. Apps offered through Web Distribution must meet Notarization requirements to protect platform integrity, like all iOS apps, and can only be installed from a website domain that the developer has registered in App Store Connect.

Using App Store Connect, developers can easily download signed binary assets and host them on their website for distribution. To install apps from a developer’s website, users will first need to approve the developer to install apps in Settings on their iPhone. When installing an app, a system sheet will display information that developers have submitted to Apple for review, like the app name, developer name, app description, screenshots, and system age rating.

Eligibility and requirements

Distributing apps directly from a website requires responsibility and oversight of the user experience, including the ability to manage apps and provide customer support and refunds. Apple will authorize developers after meeting specific criteria and committing to ongoing requirements that help protect users.

If you’re interested in using Web Distribution, please review the requirements to qualify. Later this spring, the Account Holder of your Apple Developer Program membership can request access for Web Distribution.

To be eligible for Web Distribution, you must:

Be enrolled in the Apple Developer Program as an organization incorporated, domiciled, and or registered in the EU (or have a subsidiary legal entity incorporated, domiciled, and or registered in the EU that’s listed in App Store Connect). The location associated with your legal entity is listed in your Apple Developer account.
Be a member of good standing in the Apple Developer Program for two continuous years or more, and have an app that had more than one million first annual installs on iOS in the EU in the prior calendar year.
Only offer apps from your developer account.
Be responsive to communications from Apple regarding your apps distributed through Web Distribution, particularly regarding any fraudulent, malicious, or illegal behavior, or anything else that Apple believes impacts the safety, security, or privacy of users.
Publish transparent data collection policies and offer users control over how their data is collected and used.
Follow applicable laws of the jurisdictions where you operate (for example, the Digital Services Act, the General Data Protection Regulation, and consumer protection laws).
Be responsible for handling governmental and other requests to take down listings of apps

Payments, fees, and taxes

Core technology fee.

The Core Technology Fee (CTF) is an element of the business terms in the EU that reflects the value Apple provides developers through ongoing investments in the tools, technologies, and services that enable them to build and share innovative apps with users around the world.

Membership in the Apple Developer Program includes one million first annual installs per year for free for apps distributed from the App Store, alternative marketplaces, and/or Web Distribution.
Developers will pay a CTF of €0.50 for each first annual install over one million in the past 12 months.

Learn more about the Core Technology Fee

Nonprofit organizations, accredited educational institutions, or government entities based in the EU that have been approved for a fee waiver are exempt from the Apple Developer Program annual membership fee and the Core Technology Fee.

Learn more about the fee waiver

It will be your responsibility to collect, report, and remit any required tax to the appropriate tax authorities for transactions that take place using Web Distribution.

IMAGES

How to use Devtools for Safari Mobile View ?
How to Use Developer Tools in Safari on iOS
How to use Devtools for Safari Mobile View ?
Guide to Safari Developer Tools
How to Use the Safari Developers Tool
How to Use Developer Tools in Safari on iOS

VIDEO

iOS 7 : Safari
iOS Tutorial
iOS 16 🍎 Safari Browser for Any Android 📲 🔥
Apple’s safari webkit converts websites to desktop apps #applewwdc23 #safariwebkit #applenewfeatures
Must Have Safari Extensions for iPhone I Best Safari Extension for Reading on iPhone
How to Create New Profile for Safari Browser in iOS 17 on iPhone

COMMENTS

Tools
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 ...
How to Activate the Web Inspector or Safari Console for iPhone
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 ...
Safari Developer Features
Overview. Safari includes features and tools to help you inspect, debug, and test web content in Safari, in other apps, and on other devices including iPhone, iPad, Apple Vision Pro, as well as Apple TV for inspecting JavaScript and TVML. Features like Web Inspector in Safari on macOS let you inspect and experiment with the layout of your ...
Inspecting iOS and iPadOS
Enabling inspecting your device from a connected Mac. Before you can connect your device to a Mac to inspect it, you must allow the device to be inspected. Open the Settings app. Go to Safari. Scroll down to Advanced. Enable the Web Inspector toggle. Now, connect the device to your Mac using a cable. In Safari, the device will appear in the ...
How To Open Developer Tools On Safari
Access the "Develop" Menu: Click on the "Develop" option in the menu bar. If you don't see the "Develop" menu, you may need to enable it first. To do this, go to "Safari" > "Preferences" > "Advanced" and check the box next to "Show Develop menu in menu bar." Open Developer Tools: Once you have accessed the "Develop" menu, you will find a list ...
Debug Websites Using the Safari Developer Tools
To debug your website using the Responsive Design mode on Safari, follow the steps mentioned below: Enable the Developer Menu. To do that, launch the Safari Browser on your Mac computer. Go to Preferences > Advanced and check the Show Develop menu in the menu bar. Navigate to the website you want to debug.
Guide to Safari Developer Tools
There are two ways to inspect an element in Safari Developer Tools: In the browser window, right-click on any element and select 'Inspect Element'. In the menu toolbar, select Develop > Show Web Inspector (or use the keyboard shortcut Option-Command-I ). This will display the current DOM of the page.
Complete Guide to Safari Developer Tools
Methods to Debug Websites Using Safari Developer Tools . Before debugging websites using Safari Developer tools, it's essential to have a device that runs on iOS or macOS. This section will explore three different techniques to debug websites using Safari Developer Tools. Debug using Responsive Design Mode; Debug using Web Inspector
How to Debug Websites on iPhone Safari
Connect the iOS device to the machine. Enable the Web-Inspector option. To do so: Go to Settings > Safari > Scroll down to the bottom > Open Advanced Menu>. Turn on Web Inspector. Open the desired web page to debug or preview on your mobile Safari browser. Once done, enable the Develop menu on the Mac device.
How to use Devtools for Safari Mobile View?
To access the Responsive Design Mode, enable the Safari Develop menu. Follow the steps below to enable the Develop menu: Launch Safari browser. Click on Safari -> Settings -> Advanced. Select the checkbox -> Show Develop menu in menu bar. Once the Develop menu is enabled, it'll show up in the menu bar as shown in the image below: Note ...
How To Open Developer Tools In Safari
These tools empower users to inspect, debug, and optimize web content, making them indispensable for anyone involved in web development or simply interested in understanding the technical aspects of the internet. In this article, we'll delve into the process of opening Developer Tools in Safari on both Mac and iOS devices.
How to Use Developer Tools in Safari on iOS
Touch the On button to activate the Debug Console. After the Debug Console is enabled, Safari reports any errors it encounters when accessing a website. At the top of every web page, just under the address bar, the Debug Console reports any HTML, JavaScript, or CSS errors.
Safari
Safari for developers. Safari is the best way to experience the internet on iPhone, iPad, and Mac. Thanks to blazing-fast performance and industry-leading energy efficiency, millions of users enjoy exploring the web with Safari. Take advantage of powerful new features, advanced developer tools, and cutting-edge technologies in Safari to deliver ...
Safari Dev Tools: The Complete 2023 Guide
Safari is Apple's proprietary web browser that comes pre-installed on all Mac and iOS devices. Its integrated developer tools provide everything web developers need to build, debug and optimize websites for Apple's ecosystem. In this comprehensive tutorial, we'll cover key capabilities of Safari's dev tools including: The Web Inspector for ...
Inspect
Inspect is a new developer tool for macOS, Linux and Windows to inspect and debug your mobile web apps and websites on iOS devices. Products. Inspect. The standalone DevTools. Inspect CLI New. ... Inspect enables to you debug Safari and WebViews on your iOS device. Debug the web on Android.
Tools and debug
All the tools available for web development are also helpful for progressive web app development, including libraries, frameworks, code editors, builders, developer tools, debuggers, and more. ... What you can do on Safari (both on macOS and remotely for iOS and iPadOS) is to open an inspector window for a service worker that is currently running.
javascript
7 Answers. On the ipad go to Settings > Safari > Advanced and activate the Web Inspector. Connect your ipad with your computer. On your computer open Safari, enable the developer tools in the settings. check the above menu for the tab Developer and find your iPad there. Full control via console from your desktop machine over the iOS Safari and ...
Debugging Your iPhone Mobile Web App With Safari Dev Tools
Safari Developer Tools offer a lot of options and settings for development, so feel free to play around with them all. What are your thoughts? Feel free to comment what features you like or dislike, as well as other mobile debugging alternatives. ... Prior to iOS 6, the iPhone's Safari web browser had a built-in Debug Console that could be used ...
Debugging websites in Chrome on iOS 16.4+
iOS 16.4 or greater. Chrome 115 or greater. On your Mac you need: The Safari Develop menu enabled. Enable this from Safari application settings, Advanced Settings tab. On your iOS device launch the Chrome app and navigate to Settings. In Content Settings, enable Web Inspector. Relaunch Chrome for iOS after changing this setting.
Develop menu
Overview. The Develop menu is home to the tools available to design and develop web content in Safari, as well as web content used by other applications on your Mac and other devices. The Develop menu also provides quick access to Changing Developer settings in Safari on macOS and Changing Feature Flag settings in Safari on macOS.. Note. If you haven't already enabled features for web ...
How do I open developer tools on iOS Simulator?
Enable the Develop menu in Safari. To do this, open Safari, then click on the Safari menu, and then click on Settings: In the Settings dialog, go to the Advanced tab, and enable Show features for web developers: This will enable a menu item called Develop in the Safari menu bar: Quit Safari, and then restart it. Open the Developer Tools of the ...
WebKit Features in Safari 17.4
Just like Safari 15.4 and Safari 16.4, this March's release of Safari 17.4 is a significant one for web developers. We're proud to announce another 46 features and 146 bug fixes. You can experience Safari 17.4 on iOS 17.4, iPadOS 17.4, macOS Sonoma 14.4, macOS Ventura, macOS Monterey, and in visionOS 1.1. Architectural improvements
Unlock the Power of Safari Developer Tools on iOS
To open the Developer Tools in Safari iOS, go to your home screen and tap on the Settings icon. Next, scroll down and select Safari. Then, scroll down again and toggle on the switch next to Web ...
The web developer's toolkit
Discover Web Inspector improvements. Web Inspector provides the tools for you to understand and debug your web pages on macOS, iOS, and iPadOS. We'll take you through the latest features and improvements to Web Inspector, including a new overlay for inspecting CSS Grid containers on your pages, even more configurable breakpoints to make ...
Apple to allow web distribution for iOS apps in latest DMA tweaks
Apple will allow iOS developers located in the European Union to distribute apps from the web, rather than from its App Store. The option, which it says will be made available to qualifying ...
Getting ready for Web Distribution in the EU
Web Distribution, available in a software update later this spring, will let authorized developers distribute their iOS apps to EU users directly from a website the developer owns and operates. Apple will provide access to APIs that facilitate the distribution of developers' apps from the web, integrate with system functionality, back up and ...