safari simulator developer tools

Safari User Guide

• Get started
• Go to a website
• Bookmark webpages to revisit
• See your favorite websites
• Use tabs for webpages
• Import bookmarks and passwords
• Pay with Apple Pay
• Autofill credit card info
• View links from friends
• Keep a Reading List
• Hide ads when reading
• Translate a webpage
• Download items from the web
• Add passes to Wallet
• Save part or all of a webpage
• Print or create a PDF of a webpage
• Interact with text in a picture
• Change your homepage
• Customize a start page
• Create a profile
• Block pop-ups
• Make Safari your default web browser
• Hide your email address
• Manage cookies
• Clear your browsing history
• Browse privately
• Prevent cross-site tracking
• See who tried to track you
• Change Safari settings
• Keyboard and other shortcuts

Use the developer tools in the Develop menu in Safari on Mac

If you’re a web developer, the Safari Develop menu provides tools you can use to make sure your website works well with all standards-based web browsers.

If you don’t see the Develop menu in the menu bar , choose Safari > Settings, click Advanced, then select “Show features for web developers.”

Open Safari for me

This page requires JavaScript.

Please turn on JavaScript in your browser and refresh the page to view its content.

• Microsoft's Promise of Easy AI
• Walmart's Killer Tech Deals This Week

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 Get a Full Screen on iPad
• How to Activate and Use Responsive Design Mode in Safari
• How to Disconnect an iPad From an iPhone
• How to Clear Cache on an iPad
• What Is Safari?
• How to Use Web Browser Developer Tools
• How to Change the Default Search Engine in Chrome for iOS
• How to Inspect an Element on a Mac
• How to View HTML Source in Safari
• What's the Current macOS? The Complete macOS Versions Guide
• How to Change Your Homepage in Safari
• 4 Ways to Play Fortnite on iPhone
• How to Reset Safari to Default Settings
• How to Disable JavaScript in Safari for iPhone
• How to Manage History and Browsing Data on iPhone

Safari Browser Testing

Browserling offers free online cross-browser testing in the Safari browser. At the moment, we offer Safari versions that run on Windows but very soon we'll also be adding Safari on macOS. The Windows Safari versions are installed on Windows 11, 10, 8.1, 8, 7, and XP. The installed Safari versions are from the official Apple installation packages and they are not fake browser emulators or simulators. To access Safari from Browserling, you don't have to install any additional software as Browserling is powered by HTML5 and JavaScript.

Try Safari in Browserling now!

Use the browser testing widget (below) to load an online Safari browser. Simply enter the address of a website that you want to open and press the "Test now!" button.

The free Browserling version offers 3 minutes of Safari testing on Windows 10 but to get unlimited minutes and access to all other operating systems, you'll have to get the developer plan .

Safari Testing FAQ

What is the latest safari version for windows.

The latest Windows Safari version is 5.1.5. You can access it via our quick browsing URL: browserling.com/browse/safari/5.1.5 .

What is the earliest Safari for Windows?

The earliest Windows Safari version is 4.0 and you can also access it via our quick browsing URL: browserling.com/browse/safari/4.0 .

Does Apple still maintain the Windows port of Safari?

No, Apple stopped maintaining Windows Safari after version 5.1.5

Do you offer Safari testing on macOS?

We're working on it! We don't have Safari on macOS yet but it's one of our top priority tasks to add it. Stay tuned!

Do you offer Safari testing on iPhones?

Offering Safari browser testing on iPhones is also one of our top tasks and we're working on it!

What browser engine does Safari use?

Safari is based on the WebKit browser engine. WebKit is also used by Chrome , Edge , and Opera browsers.

Do you run a Safari emulator?

No, we installed Safari from the official Apple installation package and it runs on a real computer. It's not an emulator nor a simulator but a real browser.

Can you help us with an issue on our website in Safari?

We'd love to help. We have been solving cross-browser testing problems for over 10 years and know everything there is about the Safari browser. Please email us at [email protected] and we'll help you with your website issue in Safari.

What is the Live Safari API?

It's a technology that we created. It lets you embed a Safari in your own project (a website or a webapp). Take a look at the Live API page that shows how it works.

For any other questions about cross-browser testing in Safari please contact us at [email protected] or use our contact form .

How to Emulate the Latest Safari Browser Online

Start automating your tests 5X Faster in Simple English with Testsigma

Browser emulators are ideal for testing how responsive a site is. The term ‘browser emulator’ refers to software that imitates the functionality of various web browsers. For instance, a Safari emulator aims to emulate Safari. 

Emulators help attain the exact look and feel of an actual Safari browser when a website is launched on it. Safari is a popular browser exclusive to Apple devices. Although Apple has discontinued its usage in other operating systems, users can download older versions if they want to test its features.

You need to use a cross-browser testing tool, a virtual machine, or an emulator to emulate Safari browser online. This helps evaluate if a website is working as per expectations.

Table Of Contents

• 1 Can You Run the Safari Browser on Windows 10 & 11?
• 2.1 Use a Virtual Machine
• 2.2 Use Cross-Browser Testing Tools
• 3 How to Test Safari Browser on Windows?
• 4.1 How to Emulate Safari on Linux?
• 5.1 How to Emulate Safari on Chrome
• 5.2 How to Emulate Safari in Firefox
• 5.3 How to Emulate Safari on Internet Explorer?
• 5.4 How to Emulate Safari on Edge?
• 6 Emulate Safari Browser Online 
• 8.1 Can you emulate Safari on PC?
• 8.2 How do I emulate a device in Safari?
• 8.3 How do I test Safari online?
• Can You Run the Safari Browser on Windows 10 & 11?

A segment of users wishes to use Safari as a default browser on Windows 10 and 11. This is because of its user-friendly design and speed. Safari runs parallel with popular browsers like Chrome, Edge, and Firefox when it comes to its outstanding performance. However, there is a catch. 

Even if you can download Safari on Windows, you risk your system because you can face potential security issues. The overall performance of your PC might even get compromised if you download expired or old versions of the software. Apple, therefore, has discontinued offering Safari as a standalone browser for any other operating system, including Windows. 

However, you can install the browser as a substitute browser on any PC that runs the operating system of Microsoft from unofficial online platforms. Concludingly, we can say that there is currently no Safari emulator for Windows. 

No Safari emulator is dedicated to running on any version of Windows, be it Windows 10 or 11. However, many websites offer users the option of testing Safari on Windows.

How Can I Test Websites on Safari Without Mac? 

Safari has been deemed the second most popular browser in 2022 and is the native default browser of Apple devices. It is an ideal browser for testing any online product or site because of its fast responsiveness.

However, one of the biggest challenges most software testers and website developers face is the lack of a Mac (iMac or Macbook). You are primarily required to have a Mac for both automated and manual testing in the Safari browser because this browser is platform-specific.

To address this problem, you can use the following hacks to test your product on the Safari browser:-

Use a Virtual Machine

You don’t need to worry about not having a Mac to run your tests on the Safari browser. To do so, you can easily conduct them on a Windows local host with the help of a virtual machine by using your PC or system as the server. 

Numerous virtual machines are available for you to choose from, and they will run any browser inside Linux or Windows. 

All you need to do is configure a handful of settings at the hardware and the software level (choosing the amount of disk space and RAM to allocate to each OS). Your computer, however, needs to have enough power to sustain this configuration. 

Use Cross-Browser Testing Tools

It is imperative to run any website on multiple browsers to ensure a smooth-sailing experience for visitors. To overcome the challenge of testing websites on Safari without a Mac, you opt for cross-browser testing tools. These tools will allow you to see how the website functions and looks on multiple browsers in one go. It does not require additional costs and is ideal for testing various websites on Safari. 

What Tools Do You Use for Cross-Browser Testing? 

You can easily use special tools to test cross-browser compatibility. This will allow you to check the overall outlook of a website in numerous browsers as well as mobile devices.

Advantages of Cross-Browser Testing

The advantages of using a cross-browser testing platform are listed below:-

• It saves time: With cross-browser testing, you can check your website for any hidden bugs or glitches before launching it. This helps save money and time because it detects issues before publishing the website. 
• Test on local and on-premise machines: With cross-browser testing, you can run test cases and websites on any OS environment on any local system behind firewalls.
• Numerous test reporting procedures: You can choose any preferred reporting from videos, images, and the like for better understanding.
• Real test environments: You can seamlessly check your cross-browser compatibility on actual browsers to identify every kink and bug in your website or application.
• Secure customer privacy: These platforms take stringent measures to help maintain the privacy of every customer.
• Broad test coverage: Most platforms for browser testing are codeless because they are AI or NLP-powered. This helps in reaching a broader test coverage.
• Debugging is easy: The debugging features in cross-browser testing platforms are top-notch to help deliver bug-free websites seamlessly.
• Easy CI/CD integration: Most cross-browser platforms have convenient CI/CD pipelines for managing faster and continuous delivery.
• 24*7 test runs: Cloud-based cross-browser testing platforms help run test suites 24*7 to conduct faster and more efficient testing with the least effort.
• Requires no additional coding: You need not have prior knowledge of CSS or HTML coding for cross-browser testing. They are user-friendly and can even be used by beginners.

Common Cross-Browser Testing Tools

If you cannot use emulators or have access to actual devices, you can opt for cloud-based emulators. One of the biggest advantages of using cloud-based emulators rather than local emulators or real devices is automating unit tests for your site across various platforms. 

To make things easy for you, we have consolidated a list of top-tier testing sites and cloud-based emulators:-

Testsigma 

Testsigma is a reliable and comprehensive test automation platform. With Testsigma, you can run automated tests for your applications and software seamlessly. It helps ensure the compatibility of your website or application across various browsers.

It is highly scalable as a cloud-based test automation platform where you can run parallel tests and even write automated tests in simple English. Besides, the platform is ideal for both visual and functional testing. We have listed some of the best advantages of using Testsigma as a cross-browser testing platform:-

• Covers over 2000+ native browser or device combinations
• Helps track issues with test logs
• Enables local testing functionality
• Runs automated tests in parallel and gets results fast 
• Performs automated screenshot testing and Video Responsive testing 
• Tools like Jira, Slack, and others are available for integration 
• Offers geo-location testing 

BrowserStack

BrowserStack is an online testing platform for seamless manual and automated testing. You need to choose an appropriate operating system, a device type, a browser version, and a URL for browsing. BrowserStack offers a reliable hosted virtual machine for user interaction.

You can easily run many emulators all at the same time without having to change screens. You can even test out the look and feel of your website or app across numerous browsers and devices. Some advantages you can reap out of using Browserstack as a cross-browser testing platform are as follows:-

• Ability to reproduce, debug and solve issues to launch bug-free websites and apps. 
• Built for all kinds of teams, starting from Engineering, Marketing, Product, Support, and Growth for testing, collaborating, and delivering quality.
• Highly scalable and can accommodate large teams for successfully shipping out applications and websites.

LambdaTest is another widely used online testing platform where users can perform manual cross-browser testing. You can run a combination of multiple operating systems and browsers at once. You can even record videos of complicated bugs and share them via Slack, Microsoft Teams, and more.

Besides, the platform allows you to speed up your testing by running parallel testing. Some of the best features are:-

• You can test multiple browsers on any OS environment or browser of your choice. 
• It has a highly scalable cloud infrastructure. 
• It is highly secure and reliable for performing automated cross-browser testing .
• It offers high execution speeds as well as fast, automated screenshots.
• With its handy reporting feature and detailed integration, you can easily analyze your test runs and immediately send reports.

BrowserShots 

Browsershots is an open-source online platform that offers developers an easy and user-friendly way to run tests for checking a website’s compatibility with a browser. It also allows screenshotting your web design in numerous operating systems and browsers. BrowserShots is completely free of cost, which is convenient for checking how your website looks across multiple browsers.

• How to Test Safari Browser on Windows?

Testing Safari Browser on Windows can be challenging because Safari is primarily designed for macOS and iOS platforms. However, there are a few approaches you can consider to test Safari on a Windows machine:

• Remote testing services: Utilize remote testing services such as BrowserStack or Sauce Labs, which offer virtual machines with different operating systems and browsers, including Safari on macOS. These services allow you to access and test Safari on real macOS environments directly from your Windows machine through a web browser.
• macOS virtual machines: Set up a macOS virtual machine (VM) on your Windows computer using virtualization software like VMware or VirtualBox. You can install Safari on the macOS VM and perform testing as you would on a native macOS environment.
• Remote access to macOS device: If you have access to a physical macOS device, you can remotely connect to it from your Windows machine using remote desktop software like TeamViewer, AnyDesk, or Chrome Remote Desktop. This allows you to control and test Safari on the macOS device without needing to physically access it.
• Cross-browser testing tools: Some cross-browser testing tools like BrowserStack or Sauce Labs offer a feature called “Interactive Testing” where you can remotely access and interact with Safari browsers running on real macOS devices from your Windows machine.

Cloud-based test automation platforms: Consider using a cloud-based test automation platform like Testsigma, which provides access to real macOS environments with Safari installed. Testsigma allows you to run automated tests on Safari Browsers without needing physical access to macOS devices.

Emulate Safari Across Other Different OS

There are separate pathways for different operating systems when it comes to emulating Safari. We have consolidated the best ways to emulate Safari on the following OS:-

How to Emulate Safari on Linux?

To emulate Safari on Linux, you can follow two methods.

• Installing Safari using WINE.
• Using WINE and PlayOnLinux provides a graphical user interface (UI) for WINE. 
• Using a virtual visualization application for cross-browser testing

Emulate Safari Using Various Browsers

There are several browsers available that users use at their convenience. This is why you must test it on every possible platform before launching your website or application. Down below, we have listed the various ways you can emulate Safari on numerous browsers:-

How to Emulate Safari on Chrome

To emulate Safari on Chrome, you can use websites such as TestingBot or Chrome extensions such as BrowserStack. BrowserStack is a very reliable solution that allows you to initiate testing sessions with a large number of device and browser combinations. You can immediately set up a Safari testing environment by clicking on the BrowserStack extension icon in your Chrome browser.

Alternatively, you can use these steps to emulate Safari using the Developer tools:

• Hit the Control + Shift + I keys to open the Developer tools environment
• Go to the Network tab and click on Network conditions
• Go to the User Agent section and unselect the ‘Use browser default’ radio button and click on the dropdown with the ‘custom’ label
• Scroll down till you can see the devices under Safari, and then select the device (Mac, iPad etc.) you want to emulate Safari with

How to Emulate Safari in Firefox

Firefox is notably one of the most popular browsers used by millions worldwide. If you want to emulate Safari in Firefox, you have to use visualization software which you can download as a browser extension or turn to a cross-browser testing website. The latter option is completely free of cost, hassle-free, and requires no technological prowess.

How to Emulate Safari on Internet Explorer?

Internet Explorer is one of the oldest browsers known to mankind. Although quite rarely used, it is still surprisingly used to this day. If you still use Internet Explorer to this day, you can emulate Safari on Internet Explorer with a cross-browser testing platform or an additionally installed extension. 

How to Emulate Safari on Edge?

Edge is a popular browser developed by Microsoft. You can emulate other browsers by changing the user string. If you want to emulate Safari on Edge, you need to follow the steps listed below:-

• Open Microsoft Edge and visit the link you wish to test
• Hit the F12 key to open the Developer tools environment
• Go to the User Agent section and unselect the ‘Select automatically’ radio button and click on the dropdown
• Scroll down till you can see the devices under Safari and then select the device (Mac, iPad etc.) you want to emulate Safari with

Emulate Safari Browser Online 

Although the ideal way to emulate Safari is by using an open-source testing platform, some other ways to do the same have been listed below:-

• Using browser widgets
• Downloading older versions of Safari, like Safari 5.1.7 or previous versions 

Every application or website is built using codes using HTML, JavaScript, or CSS elements. Since they are launched online, it is impossible to ascertain which user will use which browser. Safari has its own technology, comes with its own set of challenges, and interprets every application in its own way. 

Therefore, to ensure that your website or application runs smoothly on Safari, you need to conduct cross-browser testing to maintain consistency in its display and functionality. Running automation tests is also integral to software testing. Testsigma is a great platform for seamlessly running automation tests. 

Frequently asked questions

Can you emulate safari on pc.

The Safari Browser has now been limited only to macOS and iOS. However, you can easily emulate this browser on Windows or any other OS by using a virtual machine with your computer as the server. 

How do I emulate a device in Safari?

To emulate a device in Safari, you can use the Simulator added with Xcode and debug/inspect those reviews remotely by using the Develop menu in Safari.

How do I test Safari online?

To run a website on a Safari browser without a Mac, you can use a cross-browser testing tool or an online testing platform. 

Suggested Reading

Android Emulator Online

• Emulate Safari Browser Online

RELATED BLOGS

Start automating your tests now

Simulate Device On Safari

You can emulate many iOS devices and runtimes using the Simulator included with Xcode, and remotely debug/inspect those webviews using Safari's Develop menu.

You can test out responsive layouts using Safari's Responsive Design Mode tool, under the Develop menu. This is also compatible with Web Inspector.

You can emulate many iOS devices and runtimes using the Simulator included with Xcode, and remotely debug/inspect those webviews using Safari's Develop menu

Can you kindly provide a step-by-step way to do this? I have opened my simulator and have a web page running, however when I go to Safari's Develop menu, there is no such menu item as "debug/inspect webview from Simulator", it does not exist.

@alberto567 there was shown devices, but now they are gone and you can just set px size of screen, but this is even not function as mobile for sites... :/

Debug iOS Safari with Xcode Simulator and Web Inspector

• Published: 15 Jun 2020

Uses: Xcode simulator

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

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

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

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

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

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

Step 1: Open Xcode and Launch Simulator

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

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

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

Step 2: Adjust the Simulator

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

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

Under Devices, add a device connected through USB.

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

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

Step 3: Simulate iOS Safari

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

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

Step 4: Use Web Inspector to Debug Mobile Safari

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

Additional Resources

Need more help?

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

Other guides that may be helpful:

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

Simulator Bonuses

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

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

• Written by Melanie E Magdalena

Tags: # debugging

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

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

Web inspector on ios devices and simulators.

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

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

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

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

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

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

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

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

Safari Developer Tools: The Comprehensive Guide for Web Developers

Introduction to Safari Developer Tools

Safari's built-in developer tools provide web developers with a powerful suite of features for testing responsive designs, debugging JavaScript, optimizing performance, and more. While historically Safari lagged behind Chrome and Firefox's devtools, modern Safari has caught up and offers a robust toolset that's invaluable for building progressive web apps and mobile web experiences.

Some key benefits of Safari developer tools include:

Integrated responsive design features like device frames, network throttling, and touch simulation to build mobile-friendly sites.

Powerful JavaScript debugger with breakpoints, profiling, and console to fix bugs and improve performance.

Web Inspector for real-time modification of HTML, CSS, and accessibility audits.

Resource tracking for optimizing loading and caching.

Built right into the Safari browser on Mac and iOS with seamless integration across all panels.

For web developers working on the front-end, Safari devtools can boost productivity and complement existing workflows. Let's explore some of the key capabilities.

Responsive Design Mode

Creating responsive, mobile-friendly websites is easier with Safari's responsive design tools.

Device Frames

Safari can simulate iPhone, iPad, and Desktop screens right in the browser window. Switch between device frames on-the-fly to preview how a site looks across various displays. Frames persist on page reloads and feel native with chrome controls. Custom frames can be created for any dimensions. For example, I was able to debug layout issues on the Amazon mobile shopping app by testing with exact iPhone dimensions.

Media Query Debugging

The Media Query Inspector shows which CSS media queries are currently applied. Click any media query to trigger it manually. Identify styles affecting elements across breakpoints faster. This feature allowed me to pinpoint styles specific to landscape orientation when building a news app.

Network throttling simulates slow connections and CPU throttling mimics mobile performance. Configure presets or custom throttling for repeatable testing. Throttling profiles integrate with device frames. I find this helpful for testing sites on simulated 2G networks.

Touch Simulation

Generate touch events and gestures to test tap, swipe and touch targets. Debug touch event handlers with the debugger. Ensure buttons work for touch devices. The ability to test swipes and taps has improved accessibility on some of my mobile web projects.

Viewport Resizing

Resize viewport dimensions directly in the browser window with pixel-perfect precision. Watch responsive changes instantly without reloads. Zoom in and out for additional debugging control. The viewport resizer is great for tweaking breakpoints and alignments.

Safari's JavaScript debugger is invaluable for squashing bugs in client-side code.

Breakpoints

Pause execution on any line. Conditional breakpoints stop on expressions. Break on exceptions or disabled breakpoints without deleting. Breakpoint Navigator organizes all breakpoints. Here's an example using breakpoints to debug a sticky header scroll effect:

Scope and Variables

Inspect scopes, local variables, watch expressions, this context. Safely edit values to test scenarios. Search variables by name. The variable inspection lets me quickly check values during development.

View the call stack trace of nested function executions. Click frames to jump to source. Inspect arguments passed. Understand async code flow. The call stack is invaluable for tracing promise chains and callbacks.

A REPL console to test snippets. Log messages, profile code, and export results. Autocomplete with bash/fish suggestions. Built-in utilities like copy() and keys() . The console is perfect for experimenting with code examples from Stack Overflow answers.

Record and analyze CPU usage, memory allocation, timeline of events. Find performance bottlenecks in JavaScript. Generate shareable profiling reports. Profiling has helped me optimize intensive data processing code.

Web Inspector

Modify HTML and CSS in real-time with Web Inspector.

Edit DOM elements and styles without page reloads. For example, I'll tweak paddings and colors to refine a design.

Inspect computed styles and layout. Quickly determine if flexbox or grids were applied correctly.

Audit for accessibility and best practices. Identify improvements needed before launch.

Resources panel to debug images, fonts, databases, and local storage. Ensure assets loaded properly.

Monitor network requests with the network panel.

Waterfall view visualizes resource loading. Optimize load order and caching.

Inspect headers, cookies, and parameters. Troubleshoot API requests.

Export HAR files for offline analysis. Share reports with collaborators.

Throttle network speed. Test on a simulated cellular connection.

Performance Optimization

In addition to profiling JavaScript, Safari provides auditing and analysis to measure real-world performance.

Frame rate analysis spots jank and dropped frames. Smoother UX.

Memory debugging tracks leaks and detached DOM trees. Prevent crashes.

Code coverage improves test quality. Identify untested areas.

Load performance checks for regressions. Page loads within 3 seconds.

Share results with team to track improvements. Metrics focused process.

Tips and Best Practices

Learn keyboard shortcuts to speed up workflows.

Enable experimental features like CSS grid debugging. Early access.

Use Debugs proxy to debug mobile Safari on real devices. iOS testing.

Create saved custom device frames for repeatable testing. Reuse always.

Export and share reports from Audits, Profiles, etc. Collaboration.

Set breakpoints before page load to debug initialization code. Catch issues early.

Safari developer tools offer powerful capabilities for debugging and testing modern web experiences. Integrated responsive testing lowers mobile development friction. Advanced profiling guides performance optimizations. With robust features now on par with Chrome and Firefox, Safari devtools deserve a spot in every web developer's toolkit.

For building mobile-friendly and high performance progressive web apps, Safari has emerged as a capable developer platform. Check out DevHunt to explore and compare the latest developer tools like Safari for your projects.

Related posts

• Safari Developer Tools: The Complete Guide for Web Developers
• Safari Dev Tools: The Complete 2023 Guide
• Master Chrome DevTools for Next-Level Web Development
• Unlock iOS Dev Power with Chrome DevTools

Product Area

Feature impact.

• How It Works
• Requirements for Mobile Publisher for Experience Cloud
• LWR Platform (Beta) Limitations
• Prepare Your App’s Information for Android
• Prepare Your App’s Information for iOS
• Create a Mobile Publisher Project
• Get Started with the Playground App
• Enable Cross-Website Tracking for the Publisher Playground App (iOS)
• Show or Hide Login Bar
• Playground App for Android
• Preview Your Experience Site on iOS (Simulator)
• Preview Your Experience Site on Android (Emulator)

Enable Safari Developer Tools

• Debug a Mobile Component (Safari)
• Enable Developer Mode on Your Emulated Device
• Debug a Mobile Component (Chrome)
• Test How URLs Open in the Playground Publisher App
• How to Check Your Experience Cloud Site URL
• Advantages of Binary Upload Distribution Method
• App Distribution Type Considerations
• Choose Distribution Type
• Create a Placeholder App
• Mobile Publisher Best Practices for App Content Declarations
• Update Test User Credentials
• Create Service Account User and Find Your Google Play Developer ID
• Grant Permission to Distribute Your Branded App
• Register Your Firebase App to Enable Mobile Publisher Android Push...
• Enter Your Information into Your Mobile Publisher Project for Android
• Register Salesforce Bundle ID
• Invite Salesforce to Your App Store Connect Account
• Record Your Apple Developer Team Account Info
• Enter Your Apple Developer Information into Your Mobile Publisher...
• Find Your Managed Google Play Organization Info
• Find Your Apple Deployment Programs Account Info
• Unlisted Option for iOS App Distribution
• Change Distribution Type for iOS
• Change Distribution Types for Android
• Change Distribution Account for iOS
• Change Distribution Account for Android
• Urge or Require Users to Update to the Latest Mobile Publisher App...
• Allow Experience Cloud App Users to Initiate Deletion of Their Data
• Configure App Navigation
• Set Up the Navigation Tab Bar
• Manage How URLs Open from Your App
• Creating a Custom Login Flow
• Set Up Your Android App for Google’s Privacy Policy Requirements
• Create a Privacy Policy Page in Experience Builder
• Create a Custom User Profile Menu Item for Your App’s Privacy Policy
• Add a Privacy Policy for Binary Uploads
• iPad Support Opt In
• Create a Certificate Signing Request
• Create Developer ID Certificate
• Find Your Certificate ID
• Configure Your Branded App with Apple
• Create an Apple Auth. Provider in Salesforce
• Update the Apple Configuration with the Callback URL
• Test the SSO Connection
• Create a Registration Handler
• Enable Advanced Authentication for a Mobile Publisher App
• Create a Support Case to Use Advanced Authentication for a Mobile...
• Test Your Mobile Publisher App’s Single Sign-On with Apple ID
• User Opt-In Biometric Login (Beta)
• Enable User Opt-In Biometric Login (Beta)
• Enable Mandatory Biometric ID App Unlock for iOS and Android
• Set Time Value for Biometric Login
• Set Up Enhanced Mobile App Security for Mobile Publisher
• Enhanced Mobile App Security Policies for Mobile Publisher
• Pre-Authorize User App Access Through Connected App Policies
• Create Custom Notifications for Your App
• Test Marketing Cloud Push Notifications
• Enable Marketing Cloud Push Notifications for Mobile Publisher Apps
• Mobile Publisher Fields for Enabling Marketing Cloud Push...
• Create a Permission Set and Grant API Enabled Access (Optional)
• Enable Full Content Push Notifications for Experience Cloud App
• Enable App Permissions for Device Capabilities
• App Permissions on Android Devices
• Scan Barcodes with a Mobile Device Camera
• Implement and Use Location-Based Features
• Implement a Contact Import Feature
• Access the Mobile Device Calendar
• Best Practices and Guidelines for App Rating and Feedback Requests
• Identify a User with a Mobile Device’s Biometrics Capabilities
• Set Up URL Schemes
• Use App Links with Mobile Publisher for Experience Cloud (Android)
• Use Universal Links with Mobile Publisher for Experience Cloud (iOS)
• Override Android App Links to Your Mobile Publisher App
• Override iOS Universal Links to Your Mobile Publisher App
• Enable Cross-Website Tracking (iOS)
• App Tracking Transparency (iOS)
• Add a Smart App Banner
• Add a Pass to Apple Wallet (iOS Only)
• Supported Objects for Download
• About Managed Packages
• Request a Managed Package
• Install a Managed Package
• Request a Beta Version of Your App
• Test with the UI Test Automation Model (UTAM) for Your App
• Switch Between Testing Modes in the Experience Cloud App
• Submit the App for Approval
• Types of Maintenance
• Create a New Version of Your Mobile Publisher for Experience Cloud App
• Managed Package Maintenance
• Considerations Before Changing Your Experience Cloud Site URL
• Authentication
• Temporarily Remove Mobile Publisher Apps from Sale
• Decommission a Mobile Publisher App
• Suggestions to Prevent App Store and Play Store Rejections
• Identify the Version of Your Experience Cloud App
• Mobile Publisher for Experience Cloud FAQ
• Known Issues and Limitations for Mobile Publisher

Start the debugging process for your iOS app.

Required Editions

• On your desktop development machine, open Safari.
• Select Safari | Preferences .
• Select Advanced .
• Check the Show Develop menu in menu bar box. The Safari developer tools are now available from the Develop menu in the menu bar.

Cookie Consent Manager

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

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

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

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

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

Cookie List

WebKit in Safari 18 beta">News from WWDC24: WebKit in Safari 18 beta

Jun 10, 2024

by Jen Simmons, Jon Davis, Karl Dubost, Anne van Kesteren, Marcos Cáceres, Ada Rose Canon, Tim Nguyen, Sanjana Aithal, Pascoe, and Garrett Davidson

Web apps for Mac

Safari extensions, spatial media, web inspector, deprecations, bug fixes and more, help us beta test.

The last year has been a great one for WebKit. After unveiling Safari 17 beta at WWDC23, we’ve shipped six releases of Safari 17.x with a total of 200 new web technologies. And we’ve been hard at work on multiple architectural improvement projects that strengthen WebKit for the long-term.

Now, we are pleased to announce WebKit for Safari 18 beta. It adds another 48 web platform features, as well as 18 deprecations and 174 bug fixes. Test it today on iOS 18 beta, iPadOS 18 beta, visionOS 2 beta, and macOS Sequoia beta.

Safari 18 for visionOS 2 beta adds support for immersive WebXR . Now you can create fully immersive experiences and deliver them on the web to people using Apple Vision Pro . Safari on visionOS 2 beta supports immersive-vr sessions. WebXR scenes are displayed using hardware-accelerated graphics driven by WebGL .

Safari for visionOS 2 beta supports the new WebXR transient-pointer input mode. It lets you make the most of natural input on visionOS, and allow your users to interact with a look and a pinch.

If you want to animate a 3D model of the user’s hands, Safari for visionOS 2 beta also includes support for WebXR hand tracking . To ensure privacy, permission to allow hand tracking will be requested from users at the start of their WebXR session.

Learn all about WebXR on visionOS 2 beta by watching Build immersive web experiences with WebXR at WWDC24, available Wednesday June 12. And learn more about transient-pointer input mode by reading Introducing natural input for WebXR in Apple Vision Pro .

View Transitions

WebKit added support for the View Transitions API in Safari 18 beta. It provides an optimized browser API to animate elements from one state to another. Safari supports the CSS View Transitions Module Level 1 specification that adds new CSS properties and pseudo-elements for defining transition animations, along with a new browser API to start transition animations and react to different transition states. It works by capturing the current (old) state of the page and applying an animated transition to the new state. By default, the browser applies a cross-fade between the states.

Call the document.startViewTransition() method to initiate the capture. You can pass a callback function as the first argument to make DOM state changes between the old and new captures. The method returns a ViewTransition object which contains promises that can be used to track when the view transition starts or ends.

Once the states are captured, a pseudo-element tree is built which can be targeted with CSS, allowing you to modify the CSS animations used for the transitions. The animations out of the old page state and into the new page state can be modified via the ::view-transition-new(*) and ::view-transition-old(*) selectors. You can also ask the browser to independently track state changes for a specific element by naming it with the CSS view-transition-name property. You can then use the pseudo-element to customize animations for it.

The example below demonstrates state management with tabbed navigation. Each tab view has a custom transition animation out and a subtly different animation in, while the tabs themselves rely on the default page transition.

Style Queries

WebKit for Safari 18 beta adds support for Style Queries when testing CSS Custom Properties. Similar to how developers can use Sass mixins, Style Queries can be used to define a set of reusable styles that get applied as a group.

Here, if the --background custom property is set to black, then certain styles will be applied — in this case to make the headline and paragraph text color white.

Don’t forget to pay attention the HTML structure. By default, Style Queries reference the styles on the direct parent element. You can create a different reference through the use of Container Query names.

currentcolor and system color keywords in Relative Color Syntax

Support for Relative Color Syntax shipped in Safari 16.4 . It lets you define colors in a more dynamic fashion, creating a new color from an existing color. The value lch(from var(--color) calc(L / 2) C H) for instance uses the lch color space to take the variable --color and calculate a new color that’s half its lightness, calc(L / 2) .

Now, starting in WebKit for Safari 18 beta, you can reference the currentcolor or a system color keyword as you define the new color. For example, this code will set the background color to be the same color as the text color, only 4 times lighter, as calculated in the oklch color space.

Being able to reference system color keywords opens up another world of options. System colors are like variables that represent the default colors established by the OS, browser, or user — defaults that change depending on whether the system is set to light mode, dark mode, high contrast mode, etc. For example, canvas represents the current default background color of the HTML page, while fieldtext matches the color of text inside form fields. Find the full list of system colors in CSS Color level 4 .

Relative Color Syntax lets you define dynamic connections between colors in your CSS, lessening the need to control color through variables in a tightly-regimented design system. Learn more about Relative Color Syntax by watching this portion of What’s new in CSS from WWDC23.

Animating display

WebKit for Safari 18 beta adds support for transition animation of the display property.

Many developers are excited to use @starting-style along with transition-behavior and display: none interpolation. WebKit for Safari 17.4 added general support for transition-behavior , including transition-behavior: allow-discrete . WebKit for Safari 17.5 added support for @starting-style , letting you define starting values for transitioning an element as it’s created (or re-created). Now in WebKit for Safari 18 beta, you can use these features together to transition the display property.

Shaping interaction regions on visionOS

As a web developer, you’re very familiar with how link styling works on the web. For decades you’ve been able to use CSS to style text-decoration , color and more for :link , :hover , :active , and :visited states. You’ve also been able to adjust the size of the invisible tap target through use of padding.

Apple Vision Pro adds a new dimension to how links work — tap targets are visible on visionOS. Anytime a user looks at an interactive element, it’s highlighted to let them know that it can be tapped. And you as a designer or developer can intentionally design how an interaction region looks. You may want to add padding, for instance, or even a rounded corner to the otherwise invisible box.

Now in Safari in visionOS 2 beta, when you use CSS clip-path to change the shape of tappable area of a link, the visible interaction region will change shape as well. Interactive UI elements built with SVG will also be highlighted with the proper shape. Learn more by watching Optimize for the spatial web at WWDC24, available Tuesday June 11.

Backdrop Filter

Originally shipped in Safari 9.0, backdrop filter provides a way to apply graphics effects to the content behind a particular element. You can apply backdrop-filter to a headline, for example, and everything behind the headline will be blurred, or have decreased saturation, or increased contrast. Any of the filter functions from SVG can be used — blur() , brightness() , contrast() , drop-shadow() , grayscale() , hue-rotate() , invert() , opacity() , saturate() , and sepia() .

For many years, backdrop filter only worked in Safari. It was available when you prefixed the property with -webkit-backdrop-filter . Now, starting in Safari 18 beta, you don’t need the prefix. We also improved our implementation, fixing bugs and boosting interoperability.

This demo shows eight different filters and what you might do with each one alone. You can, of course, combine filters to create even more interesting results. With backdrop filter supported in Safari since 2015, Edge since 2018, Chrome since 2019, Samsung Internet since 2020, and Firefox since 2022, this is a great time to consider the kind of graphic design possibilities it enables.

safe in Flexbox

WebKit for Safari 18 beta adds support for the safe keyword for alignment in Flexbox. This provides a mechanism for refining how flex items overflow. Let’s look at an example of a simple navigation menu — a classic use of Flexbox.

The following CSS creates a simple layout that wraps when there’s not enough space on one line for the menu, while centering the items in the available space.

By default, justify-content: center will always keep the items centered, even when the content is overflowing the containing box. You might prefer, however, that the content not be centered when it overflows — being centered cuts off both the beginning and end of the word, making the content harder to understand when the overflow is not visible.

The safe keyword lets you change how alignment works when content overflows. The justify-content: safe center rule will instead start align any item that is overflowing, while continuing to center the items that are not overflowing.

If you want to override the safe keyword, you can use unsafe . The justify-content: unsafe center rule will do the same thing as justify-content: center . The unsafe keyword has been supported in WebKit for Safari for quite some time.

Content visibility

WebKit for Safari 18 beta adds support for content-visibility . This property controls whether or not an element renders its contents in a fashion that’s useful for making performance optimizations. It lets you communicate to the browser that certain portions of the page will likely be initially offscreen, and suggest they be omitted from layout and rendering. This can make the page load faster.

Last year , we added support for web apps in macOS Sonoma. You can add any website to your dock — whether or not it was built with a Manifest file, Service Worker, or other technology to customize the web app experience. Go to the site in Safari, then File > Add to Dock… where you can customize the icon, change the name, and even clean up the URL. Then, just click on the web app icon in your Dock, and it will open as an app.

This year brings two improvements to web apps on Mac.

Opening links

macOS Sequoia beta adds support for opening links directly in web apps. Now, when a user clicks a link, if it matches the scope of a web app that the user has added to their Dock, that link will open in the web app instead of their default web browser.

For example, imagine you have added MDN Web Docs to the Dock. Then a colleague sends you a link to an MDN page in Messages, Mail, Slack, Discord, IRC, or any non-browser application on your Mac. Now when you click on that link, it will open in the MDN Web Docs web app instead of your default browser.

Clicking a link within a browser will maintain the current behavior. This feature only affects links opened elsewhere. (When a user is in Safari, clicking on a link that matches the scope of a web app that is added to Dock, they will see an “Open in web app” banner, unless they have previously dismissed the banner.)

By default, this behavior applies when the link matches the host of the web page used to create the web app. As a developer, you can refine this experience by defining the range of URLs that should open in the web app with the scope member in the web app manifest .

Extension support

Now you can personalize web apps on Mac with Safari Web Extensions and Content Blockers. Navigate to the web app’s Settings menu to access all your installed Content Blockers and Web Extensions. Any enabled in Safari will be on by default in the web app. Each web app is uniquely customizable, just like Safari profiles.

Safari 18 beta also adds support for Mobile Device Management of extension enabled state, private browsing state, and website access on managed devices. This means schools and businesses that manage iOS, iPadOS, or macOS devices can now include the configuration of Safari App Extensions, Content Blockers, and Web Extensions in their management.

One of the amazing experiences you can have on Apple Vision Pro is looking at spatial photos and panoramas. When you open the Photos app in visionOS, you see a montage of your photos. Tap an image, it appears alone in a floating frame in front of you, while the rest of the app disappears.

A spatial photo appears at just the right height and viewing angle to make it feel like you’ve gone back to a moment in time. A second tap of the UI breaks it out of the frame, as it grows and becomes even more immersive. Similarly, a panorama floats in a frame on first tap. Then on second tap of the UI, it expands to wrap all around you, creating a fully immersive experience.

Now in Safari 18 for visionOS 2 beta, you can use the Fullscreen API to create the same experience on the web. You can embed the photo in a web page, and provide the ability to tap. The photo will pop into a floating frame as the Safari window disappears. Then when the user taps on the spatial photo or panorama UI that visionOS provides, the photo will further expand to create a fully immersive experience. When they exit the image, the Safari window will return.

Let’s walk through how to support experiencing a spatial photo or panorama on the web using Fullscreen API. First, include the image on your web page using any of the techniques we’ve used on the web for years. Here, we can embed a flattened panoramic photo into the web page using simple HTML.

Then using JavaScript, we’ll trigger .requestFullscreen() on tap. Perhaps like this.

You could, of course, create your own UI for the user to tap, rather than making the entire photo the tap target.

Spatial images work just the same, although it’s likely we want to provide fallbacks for browsers that do not support HEIC files . We can do so with the picture element.

Spatial images are stereoscopic, with both a left and right channel. In Safari, when the image is embedded in the web page, the browser will show the left channel. And there’s no need to worry about providing a fallback of any sort for Safari on macOS, iOS, or iPadOS — the stereoscopic HEIC file works great.

This technique will also cause images to go fullscreen in any browser that supports Fullscreen API. Learn more about adding panorama and spatial photos to your websites by watching Optimize for the spatial web at WWDC24, available Tuesday June 11.

Writing Suggestions

At last year’s WWDC, Apple unveiled inline predictive text on iOS, iPadOS, macOS and more. It helps users input text faster by predicting what they might be typing and finishing the word, phrase or even a whole sentence when the user taps the space bar. Now, WebKit for Safari 18 beta on iOS, iPadOS, visionOS, macOS Sequoia and macOS Sonoma brings inline predictive text to the web.

While inline predictive text makes for a fantastic, personalized user experience, there might be specific situations on the web where it’s better to not have predictions. WebKit for Safari 18 beta on iOS, iPadOS, visionOS, macOS Sequoia and macOS Sonoma gives web developers the opportunity to disable inline predictions through the writingsuggestions attribute. By default, writing suggestions is set to true. You can turn off the capability by including the writingsuggestions="false" attribute on any type of text input field.

WebKit for Safari on iOS 18 beta adds haptic feedback for <input type=checkbox switch> . This means, now when a user taps a switch control on iPhone, a single tap is felt — just like how toggling a switch feels in Settings app on iOS. Try this demo to see what it’s like.

Date and time inputs

WebKit for Safari 18 beta on macOS improves accessibility support for date and time input field types. Now <input type="date"> , <input type="datetime-local"> , and <input type="time"> elements work properly with VoiceOver.

Usually elements have the labels they need, but sometimes there is no text label for a particular button or UI. In this situation, ARIA can be used to provide an accessible label. The aria-label attribute provides names of labels while aria-roledescription provides the description for the role of an element.

On very rare occasions, you may need to override aria-label or aria-roledescription to provide different names or descriptions specifically for braille. The aria-braillelabel and aria-brailleroledescription attributes provide such an ability. They exist to solve very specific needs, including educational contexts where the site needs to render the specific braille table dot pattern. If you do use braille-related ARIA attributes, be sure to test them using a braille reader. If in doubt, relying on the accessible name from content or aria-label / aria-roledescription is almost always the better user experience . WebKit has supported these ARIA attributes for years.

Now, WebKit for Safari 18 beta adds support for the ariaBrailleLabel and ariaBrailleRoleDescription element reflection properties. These make it possible to get and set the aria-braillelabel and aria-brailleroledescription ARIA attributes on DOM elements directly via JavaScript APIs, rather than by using setAttribute and getAttribute .

Watch video without distractions in Viewer for Safari 18 beta on macOS.

When you play in Viewer, the video fills the Safari window, while providing full access to system playback controls. Then it automatically enters picture-in-picture anytime you switch tabs, close the window, or occlude the web page with another window. Look for Video Viewer in the new page menu in Safari whenever you are on a web page with a prominent video element.

Video on visionOS

Managed Media Source

WebKit for Safari 18 beta adds Workers support for both Managed Media Source (MMS) and Media Source Extensions ( MSE ). This can be especially helpful on complex websites that want to ensure continuous and smooth video playback even when other site activity (such as live commenting) causes a very busy main thread. You can see the performance difference in this demo .

WebKit for Safari 18 beta adds support for the WebRTC HEVC RFC 7789 RTP Payload Format. Previously, the WebRTC HEVC used generic packetization instead of RFC 7789 packetization. This payload format provides a new option for improving videoconferencing, video streaming, and delivering high-bitrate movies and TV shows.

WebKit for Safari 18 beta adds support for MediaStreamTrack processing in a dedicated worker. And it adds support for missing WebRTC stats.

Two years ago at WWDC22, we announced support for passkeys — a groundbreaking industry-standard way to login to websites and app services. Passkeys provide people with an extremely easy user experience, while delivering a profound increase in security. To learn more, watch Meet Passkeys or read Supporting passkeys .

WebKit for Safari 18 beta adds support for three new features as we continue to improve passkeys. First, Safari 18 beta adds support for using mediation=conditional for web authentication credential creation. This allows websites to automatically upgrade existing password-based accounts to use passkeys. Learn more by watching Streamline sign-in with passkey upgrades and credential managers at WWDC24, available on Tuesday, June 11.

Second, WebKit for Safari 18 beta adds support for using passkeys across related origins. This lets websites use the same passkey across a limited number of domains which share a credential backend.

And third, WebKit for Safari 18 beta adds support for the WebAuthn prf extension. It allows for retrieving a symmetric key from a passkey to use for the encryption of user data.

WebKit for Safari 18 beta adds support for secure HTTPS for all images, video, and audio by upgrading passive subresource requests in mixed content settings. This means that if some files for a website are served using HTTPS and some are served using HTTP (known as “mixed content”), all images and media will now be auto-upgraded to HTTPS, in adherence with Mixed Content Level 2 .

WebKit for Safari 18 beta adds support for Unicode 15.1.0 characters in RegExp. Unicode 15.1 added 627 characters, bringing the total of characters to 149,813. Now, these new characters can be used in regular expressions.

WebKit for Safari 18 beta also adds support for the v flag with RegExp.prototype[Symbol.matchAll] . providing more powerful ways to match Unicode characters, as specified in the ECMAScript 2024 standard.

For example, you can now specify to only match on Latin characters, while avoiding matching on Cyrillic script characters.

Or split a string matching on Emojis.

WebKit for Safari 18 beta adds support for URL.parse() , a way to parse URLs which returns null rather than an exception when parsing fails.

WebKit for Safari 18 beta expands Declarative Shadow tree support by adding the shadowRootDelegatesFocus and shadowRootClonable IDL attributes to the <template> element. It also adds the shadowRootSerializable attribute and shadowRootSerializable IDL attribute to the <template> element, enabling those using Declarative Shadow roots to opt into making them serializable. Serializing can be done through the new getHTML() method that has been added at the same time.

WebKit for Safari 18 beta adds support for PopStateEvent ’s hasUAVisualTransition , indicating whether the user agent has a visual transition in place for the fragment navigation.

WebKit for Safari 18 beta adds support for subresource integrity in imported module scripts, which gives cryptographic assurances about the integrity of contents of externally-hosted module scripts.

WebKit for Safari 18 beta adds support for the bytes() method to the Request, Response , Blob , and PushMessageData objects. This replaces the need for web developers to call arrayBuffer() , which can be difficult to use, and wraps the result in a Uint8Array . Calling bytes() is now the recommended way going forward when you need to access the underlying bytes of the data these objects represent.

WebKit for Safari 18 beta adds support for feature detecting text fragments by exposing document.fragmentDirective . Note that the returned object (a FragmentDirective ) doesn’t provide any functionality, but it’s helpful if you need to know if Fragment Directives are supported by the browser.

WebKit for Safari 18 beta adds support for the willReadFrequently context attribute for the getContext() method. It indicates whether or not a lot of read-back operations are planned. It forces the use of a software accelerated 2D or offscreen canvas, instead of hardware accelerated. This can improve performance when calling getImageData() frequently.

WebKit for Safari 18 beta extends 2D canvas support for currentcolor . It can now be used inside color-mix() or Relative Color Syntax. Here currentcolor will default to the computed color property value on the canvas element.

WebKit for Safari 18 beta adds support for six new WebGL extensions:

• EXT_texture_mirror_clamp_to_edge
• WEBGL_render_shared_exponent
• WEBGL_stencil_texturing
• EXT_render_snorm
• OES_sample_variables
• OES_shader_multisample_interpolation

WebKit for Safari 18 beta adds support for fuzzy search code completion in the Web Inspector’s CSS source editor.

WebKit for iOS 18 beta, iPadOS 18 beta, visionOS 2 beta, and macOS Sequoia beta adds support for two new API — the Writing Tools API and an API to control adaptive image glyph insertion. Learn more about these API by watching Get started with Writing Tools and Bring expression to your app with Genmoji at WWDC24, both available Tuesday June 11.

WebKit for Safari 18 beta adds support for Apple Pay funds transfer.

While it’s rare to deprecate older technology from the web, there are occasions when it makes sense. We’ve been busy removing -webkit prefixed properties that were never standardized, aging media formats that were never supported in other browsers, and more. This helps align browser engines, improve interoperability, and prevent compatibility problems by reducing the possibility that a website depends on something that’s not a web standard.

WebKit for Safari 18 beta removes support for OffscreenCanvasRenderingContext2D ’s commit() method.

WebKit for Safari 18 beta deprecates support for a number of rarely used -webkit prefixed CSS pseudo-classes and properties — and even one -khtml prefixed property.

• -webkit-alt and alt properties
• :-webkit-animating-full-screen-transition pseudo-class
• :-webkit-full-screen-ancestor pseudo-class
• :-webkit-full-screen-controls-hidden pseudo-class
• :-webkit-full-page-media pseudo-class
• :-webkit-full-screen-document pseudo-class
• :-khtml-drag pseudo-class

WebKit for Safari 18 beta also deprecates support for the resize: auto rule. Support for the resize property remains, just as it’s been since Safari 4. The values Safari continues to support include : none , both , horizontal , vertical , block , inline , plus the global values. Early versions of CSS Basic User Interface Module Level 3 defined auto , but it was later written out of the web standard.

WebKit for Safari 18 beta also deprecates support for non-standardize WEBKIT_KEYFRAMES_RULE and WEBKIT_KEYFRAME_RULE API in CSSRule .

WebKit for Safari 18 beta removes support for the JPEG2000 image format. Safari was the only browser to ever provide support.

If you’ve been serving JPEG2000 files using best practices, then your site is using the picture element to offer multiple file format options to every browser. Safari 18 beta will simply no longer choose JPEG2000, and instead use a file compressed in JPEG XL, AVIF, WebP, HEIC, JPG/JPEG, PNG, or Gif — choosing the file that’s best for each user. Only one image will be downloaded when you use <picture> , and the browser does all the heavy lifting.

We have noticed that some Content Deliver Networks (CDN) use User Agent sniffing to provide one file to each UA, offering only JPEG2000 images to Safari — especially on iPhone and iPad. If you expect this might be happening with your site, we recommend testing in Safari 18 beta on both macOS Sequoia and iOS or iPadOS 18. If you see problems, contact your SaaS provider or change your image delivery settings to ensure your website provides fallback images using industry best practices.

If you notice a broken site, please file an issue at webcompat.com .

WebKit for Safari 18 beta removes support for non-standard VTTRegion.prototype.track .

WebKit for Safari 18 beta removes the last bits of support for AppCache.

When AppCache first appeared in 2009, in Safari 4, it held a lot of promise as a tool for caching web pages for use offline. It was imagined as “HTML5 Application Cache” back when HTML itself was being further expanded to handle more use cases for web applications. A developer could create a simple cache manifest file with a list of files to be cached. Its simplicity looked elegant, but there was no mechanism for cache busting, and that made both developing a site and evolving the site over time quite frustrating. AppCache also had security challenges. So new web standards were created to replace it. Today, developers use Service Workers and Cache Storage instead.

WebKit deprecated AppCache with a warning to the Console in Safari 11.0. Then in 2021, we removed support for AppCache from Safari 15.0, with a few exceptions for third-party users of WKWebView . Now we are removing those exceptions. This change to WebKit will only affect the rare web content loaded in older third-party apps that have JavaScript code which relies on the existence of AppCache related interfaces.

WebKit for Safari 18 beta removes the SVGAnimateColorElement interface.

WebKit for Safari 18 beta removes support for four non-standard Web APIs:

• KeyboardEvent.altGraphKey
• AES-CFB support from WebCrypto
• KeyboardEvent.prototype.keyLocation
• HashChangeEvent ’s non-standard initHashChangeEvent() method

In addition to all the new features, WebKit for Safari 18 beta includes work to polish existing features.

Accessibility

• Fixed role assignment for <header> inside <main> and sectioning elements.
• Fixed range input not firing an input event when incremented or decremented via accessibility APIs.
• Fixed setting aria-hidden on a slot not hiding the slot’s assigned nodes.
• Fixed comboboxes to expose their linked objects correctly.
• Fixed time input accessibility by adding labels to subfields.
• Fixed aria-hidden=true to be ignored on the <body> and <html> elements.
• Fixed datetime values being exposed to assistive technologies in the wrong timezone.
• Fixed time control accessibility by adding a label to the meridiem component.
• Fixed wrong datetime value being exposed to assistive technologies for datetime-local inputs.
• Fixed ignored CSS content property replacement text when it is an empty string.
• Fixed the computed role for these elements: dd , details , dt , em , hgroup , option , s , and strong .
• Fixed hidden elements targeted by aria-labelledby to expose their entire subtree text, not just their direct child text.
• Fixed accessible name computation for elements with visibility: visible inside a container with visibility: hidden .
• Fixed updating table accessibility text when its caption dynamically changes.
• Fixed updating aria-describedby text after the targeted element changes its subtree.
• Fixed the transition property to produce the shortest serialization.
• Fixed the animation property to produce the shortest serialization.

Authentication

• Fixed navigator.credentials.create() rejects with “NotAllowedError: Operation Failed” after a conditional UI request is aborted.
• Fixed renaming DigitalCredential’s response attribute to data .
• Fixed setting the cancel flag once the cancel completes regardless of a subsequent request occurring.
• Fixed drawImage(detachedOffscreenCanvas) to throw an exception.
• Fixed OffscreenCanvas failing to render to the placeholder with nested workers.
• Fixed losing the contents layer of the placeholder canvas of OffscreenCanvas when switching off the tab.
• Fixed drawImage to not alter the input source or the destination rectangles.
• Fixed toggling the visibility on a canvas parent undoing the effect of clearRect() .
• Fixed the Canvas drawImage() API to throw an exception when the image is in broken state.
• Fixed setting white-space to a non-default value dynamically on a whitespace or a new line.
• Fixed turning text-spacing properties into font properties.
• Fixed custom counter styles extending disclosure-open and disclosure-closed to point to the correct direction in right-to-left.
• Fixed backface-visibility to create a stacking context and containing block.
• Fixed getComputedStyle() to work with functional pseudo-elements like ::highlight() .
• Fixed: Aliased :-webkit-full-screen pseudo-class to :fullscreen .
• Fixed: Aliased :-webkit-any-link to :any-link and :matches() to :is() .
• Fixed getComputedStyle() pseudo-element parsing to support the full range of CSS syntax.
• Fixed @supports to correctly handle support for some -webkit prefixed pseudo-elements that were incorrectly treated as unsupported.
• Fixed updating media-query sensitive meta tags after style changes.
• Fixed changing color scheme to update gradients with system colors or light-dark() .
• Fixed incorrect inline element size when using font-variant-caps: all-small-caps with font-synthesis .
• Fixed :empty selector to work with animations.
• Fixed preserving whitespace when serializing custom properties.
• Fixed updating style correctly for non-inherited custom property mutations.
• Fixed element removed by parent to end up losing the last remembered size.
• Fixed an incorrect difference between implicit and explicit initial values for custom properties.
• Fixed the contrast of Menu and MenuText system colors.
• Fixed keeping the shorthand value for CSS gap as-is in serialized and computed values.
• Fixed the style adjuster for @starting-style incorrectly invoking with a null element.
• Fixed excluding -apple-pay-button from applying to any element that supports appearance: auto and is not a button.
• Fixed missing color interpretation methods added to CSS color specifications.
• Fixed hsl() and hsla() implementation to match the latest spec changes.
• Fixed the implementation of rgb() and rgba() to match the latest spec.
• Fixed the hwb() implementation to match the latest spec.
• Fixed the remaining color types to be synced with the latest spec changes.
• Fixed carrying analogous components forward when interpolating colors
• Fixed applying the fill layer pattern for mask-mode .
• Fixed displayed datalist dropdown to sync its options elements after a DOM update.
• Fixed <select multiple> scrollbars to match the used color scheme.
• Fixed updating the input value when selecting an <option> from a <datalist> element.
• Fixed the value attribute not getting displayed in an input element with type="email" and the multiple attribute.
• Fixed the iOS animation for <input type=checkbox switch> .
• Fixed form controls drawing with an active appearance when the window is inactive.
• Fixed constructed FormData object to not include entries for the image button submitter by default.
• Fixed the properties of History to throw a SecurityError when not in a fully active Document.
• Fixed “about:blank” document.referrer initialization.
• Fixed parsing a self-closing SVG script element. It now successfully executes.
• Fixed RegExp.prototype.@@split to update the following legacy RegExp static properties: RegExp.input , RegExp.lastMatch , RegExp.lastParen , RegExp.leftContext , RegExp.rightContext , and RegExp.$1, ... RegExp.$9 .
• Fixed String.prototype.replace to not take the fast path if the pattern is RegExp Object and the lastIndex is not numeric. (
• Fixed spec compliance for Async / Await, Generators, Async Functions, and Async Generators.
• Fixed async functions and generators to properly handle promises with throwing “constructor” getter.
• Fixed return in async generators to correctly await its value.
• Fixed Symbol.species getters to not share a single JS Function.
• Fixed throwing a RangeError if Set methods are called on an object with negative size property.
• Fixed eval() function from another realm to not cause a direct eval call.
• Fixed eval() call with ...spread syntaxt to be a direct call.
• Fixed try/catch to not intercept errors originated in [[Construct]] of derived class.
• direct eval() in a default value expression inside a rest parameter creates a variable in the environment of the function rather than the separate one of the parameters;
• a ReferenceError is thrown when accessing a binding, which is defined inside rest parameter, in eval() , or a closure created in a default value expression of a preceding parameter, but only if there is a var binding by the same name;
• a closure, created in the default value expression inside a rest parameter, is created in a different VariableEnvironment of the function than its counterparts in preceding parameters which causes the incorrect environment to be consulted when querying or modifying parameter names that are “shadowed” by var bindings.
• Fixed TypedArray sorting methods to have a special-case for camparator returning false .
• Fixed programming style for bitwise and in setExpectionPorts.
• Fixed emitReturn() to load this value from arrow function lexical environment prior to the TDZ check.
• Fixed NFKC normalization to work with Latin-1 characters.
• Fixed parsing of private names with Unicode start characters.
• Fixed instanceof to not get RHS prototype when LHS is primitive.
• Fixed bracket update expression to resolve property key at most once.
• Fixed bracket compound assignement to resolve the property key at most once.
• Fixed Object.groupBy and Map.groupBy to work for non-objects.
• Fixed Array.fromAsync to not call the Array constructor twice.
• Fixed inconsistent output of Function.prototype.toString for accessor properties.
• Fixed Set#symmetricDifference to call this.has in each iteration.
• Fixed logical assignment expressions to throw a syntax error when the left side of the assignment is a function call.
• Fixed throwing a syntax error for nested duplicate-named capturing groups in RegEx.
• Fixed ArrayBuffer and SharedArrayBuffer constructor to check length before creating an instance.
• Fixed Intl implementation to ensure canonicalizing “GMT” to “UTC” based on a spec update.
• Fixed RegEx lookbehinds differing from v8.
• Fixed fractionalDigits of Intl.DurationFormat to be treated as at most 9 digits if it is omitted.
• Fixed navigator.cookieEnabled to return false when cookies are blocked.
• Fixed video sound coming from another window after changing tabs in the Tab Bar in visionOS.
• Fixed playback for MSE videos on some sites.
• Fixed allowing a video’s currentTime to be further than the gap’s start time.
• Fixed broken audio playback for a WebM file with a Vorbis track.
• Fixed sampleRate and numberOfChanges to be required and non-zero in a valid AudioEncoderConfig.
• Fixed media elements appending the same media segment twice.
• Fixedrejecting valid NPT strings if ‘hours’ is defined using 1 digit.
• Fixed an issue where Safari audio may be emitted from the wrong window in visionOS.
• Fixed upgrading inactive or passive subresource requests and fetches in would-be mixed security contexts to match standards.
• Fixed incorrect Sec-Fetch-Site value for navigation of a nested document.
• Fixed loading WebArchives with a non-persistent datastore.
• Fixed Timing-Allow-Origin to not apply to an HTTP 302 response.
• Fixed print buttons with a print action implementation.
• Fixed Open in Preview for a PDF with a space in its name.
• Fixed Greek uppercase transforms failing for some characters.
• Fixed resizing a <textarea> element with 1rem padding.
• Fixed the color correctness of the color matrix filter.
• Fixed backdrop-filter to apply to the border area of an element with a border-radius .
• Fixed intrinsic inline size calculators to account for whitespace before an empty child with nonzero margins.
• Fixed overlapping elements with flex box when height: 100% is applied on nested content.
• Fixed incorrect grid item positioning with out-of-flow sibling.
• Fixed break-word with a float discarding text.
• Fixed min-content calculation for unstyled only-child inlines elements.
• Fixed ellipsis rendering multiple times when position: relative and top are used.
• Fixed a bug for inline elements inserted in reverse order after a block in a continuation.
• Fixed the flash of a page background-colored bar in the footer when the window is resized.
• Fixed the cursor not updating as content scrolls under it on some pages.
• Fixed the SVG parser to interpret “form feed” as white space.
• Fixed error handling for invalid filter primitive references.
• Fixed displaying an SVG element inside a <switch> element.
• Fixed SVG title to have display: none as the default UA style rule.
• Fixed the UA stylesheet for links in SVGs to apply cursor: pointer matching standards.
• Fixed returning the initial value for the SVG gradient stop-color if it is not rendered in the page.
• Fixed the SVG marker segment calculations if the marker path consists of sub-paths.
• Fixed SVGLength to sync with the WebIDL specification.

Web Animations

• Fixed percentage transform animations when width and height are animated.
• Fixed updating an animation when changing the value of a transform property while that property is animated with an implicit keyframe.
• Fixed animating with color-mix .
• Fixed cssText setter to change the style attribute when the serialization differs.
• Fixed history.pushState() and history.replaceState() to ignore the title argument.
• Fixed URL text fragment directives not fully stripped from JavaScript.
• Fixed showPicker() method to trigger suggestions from a datalist .
• Fixed lang attribute in no namespace to only apply to HTML and SVG elements.
• Fixed unnecessarily unsetting the iframe fullscreen flag.
• Fixed DOM Range to correctly account for CDATASection nodes.
• Fixed getGamepads() to no longer trigger an insecure contexts warning.
• Fixed inserting a <picture> element displaying the same image twice.
• Fixed throwing exceptions in navigation methods if in a detached state.
• Fixed a minor issue in URL’s host setter.
• Fixed cloning of ShadowRoot nodes following a DOM Standard clarification.
• Fixed GeolocationCoordinates to expose a toJSON() method.
• Fixed GeolocationPosition to expose a toJSON() method.
• Fixed setting CustomEvent.target when dispatching an event.
• Fixed navigator.language only returning the system language in iOS 17.4.
• Fixed: Removed presentational hints from the width attribute for <hr> .
• Fixed resolving www. sub-domain for Associated Domains for all web apps.

Web Assembly

• Fixed initialization of portable reference typed globals.
• Fixed font sizes in the Audits tab.
• Fixed expanded sections of Storage to not collapse
• Fixed CSS font property values marked !important not getting overridden when using the interactive editing controls.
• Fixed an issue where the Web Inspector viewport might appear cut off.
• Fixed runtimes to be aligned in the Audit tab.
• Fixed remembering the message type selection in the Console tab.
• Fixed autocomplete for the text-indent property suggesting prefixed properties instead of each-line or hanging .
• Fixed background autocompletion suggestion to include repeating-conic-gradient .
• Fixed console clearing unexpectedly when Web Inspector reopens
• Fixed console code completion to be case-insensitive.
• Fixed overflow: scroll elements to scroll as expected when highlighting an element from the DOM tree.
• Fixed showing additional Safari tabs from an iOS device in the Develop menu.
• Fixed Console and code editor completion not auto-scrolling the suggestion into view.
• Fixed search in the DOM tree view unexpectedly chaning the text display.
• Fixed clicking the “goto” arrow for computed CSS when “show independent Styles sidebar” is disabled.
• Fixed inspectable tabs from Safari in the visionOS Simulator don’t appear in Developer menu on the host macOS.
• Fixed Gamepad API in WKWebView.
• Fixed repainting HTML elements when their width or height change in legacy WebView.
• Fixed VideoTrackGenerator writer to close when its generator track (and all its clones) are stopped.
• Fixed WebRTC AV1 HW decoding on iPhone 15 Pro.
• Fixed black stripes with screen sharing windows.
• Fixed black stripes with getDisplayMedia captured windows when the window is resized.

You can test Safari 18 beta by installing the beta of macOS 15, iOS 18, or iPadOS 18. Or, if you’d like, you can try out Safari 18 beta on macOS Sonoma or macOS Ventura by downloading the Safari 18 beta , once it’s available. (Sign in using a free Apple ID to download. Installing Safari 18 beta on macOS Sonoma or macOS Ventura will replace your existing version of Safari with no way to revert to an earlier version.) You can also help test many of these features in Safari Technology Preview .

We love hearing from you. To share your thoughts on Safari 18 beta, 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 (learn more about filing Feedback ), or your WebKit bug report about web technologies or Web Inspector. If you notice a website that seems broken in Safari, but not in other browsers, please file a report at webcompat.com . 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 18 beta release notes .

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

What are browser developer tools?

Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. This article explains how to use the basic functions of your browser's devtools.

Note: Before you run through the examples below, open the Beginner's example site that we built during the Getting started with the Web article series. You should have this open as you follow the steps below.

How to open the devtools in your browser

The devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using:

How do you pull it up? Three ways:

• Windows: Ctrl + Shift + I or F12
• macOS: ⌘ + ⌥ + I

• Chrome: More tools ➤ Developer tools
• Safari: Develop ➤ Show Web Inspector. If you can't see the Develop menu, go to Safari ➤ Preferences ➤ Advanced , and check the Show Develop menu in menu bar checkbox.
• Opera : Developer ➤ Developer tools
• Context menu: Press-and-hold/right-click an item on a webpage (Ctrl-click on the Mac), and choose Inspect Element from the context menu that appears. ( An added bonus: this method straight-away highlights the code of the element you right-clicked.)

The Inspector: DOM explorer and CSS editor

The developer tools usually open by default to the inspector, which looks something like the following screenshot. This tool shows what the HTML on your page looks like at runtime, as well as what CSS is applied to each element on the page. It also allows you to instantly modify the HTML and CSS and see the results of your changes reflected live in the browser viewport.

If you don't see the inspector,

• Tap/click the Inspector tab.
• In Chrome, Microsoft Edge, or Opera, tap/click Elements.
• In Safari, the controls are not so clearly presented, but you should see the HTML if you haven't selected something else to appear in the window. Press the Style button to see the CSS.

Exploring the DOM inspector

For a start, right-click (Ctrl-click) an HTML element in the DOM inspector and look at the context menu. The available menu options vary among browsers, but the important ones are mostly the same:

• Delete Node (sometimes Delete Element ). Deletes the current element.
• Edit as HTML (sometimes Add attribute / Edit text ). Lets you change the HTML and see the results on the fly. Very useful for debugging and testing.
• :hover/:active/:focus . Forces element states to be toggled on, so you can see what their styling would look like.
• Copy/Copy as HTML . Copy the currently selected HTML.
• Some browsers also have Copy CSS Path and Copy XPath available, to allow you to copy the CSS selector or XPath expression that would select the current HTML element.

Try editing some of your DOM now. Double-click an element, or right-click it and choose Edit as HTML from the context menu. You can make any changes you'd like, but you cannot save your changes.

Exploring the CSS editor

By default, the CSS editor displays the CSS rules applied to the currently selected element:

These features are especially handy:

• The rules applied to the current element are shown in order of most-to-least-specific.
• Click the checkboxes next to each declaration to see what would happen if you removed the declaration.
• Click the little arrow next to each shorthand property to show the property's longhand equivalents.
• Click a property name or value to bring up a text box, where you can key in a new value to get a live preview of a style change.
• Next to each rule is the file name and line number the rule is defined in. Clicking that rule causes the dev tools to jump to show it in its own view, where it can generally be edited and saved.
• You can also click the closing curly brace of any rule to bring up a text box on a new line, where you can write a completely new declaration for your page.

You'll notice a number of clickable tabs at the top of the CSS Viewer:

• Computed : This shows the computed styles for the currently selected element (the final, normalized values that the browser applies).
• Box Model : represents visually the current element's box model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is.
• Grid : If the page you are inspecting uses CSS grid, this section allows you to view the grid details.
• Fonts : In Firefox, the Fonts tab shows the fonts applied to the current element.

Find out more

Find out more about the Inspector in different browsers:

• Firefox Page inspector
• Chrome DOM inspector (Opera's inspector works the same as this)
• Safari DOM inspector and style explorer

The JavaScript debugger

The JavaScript debugger allows you to watch the value of variables and set breakpoints, places in your code that you want to pause execution and identify the problems that prevent your code from executing properly.

To get to the debugger:

Chrome : Open the Developer tools and then select the Sources tab. (Opera works the same way.)

Safari : Open the Developer Tools and then select the Debugger tab.

Exploring the debugger

There are three panes in the JavaScript Debugger on Firefox.

The first pane on the left contains the list of files associated with the page you are debugging. Select the file you want to work with from this list. Click on a file to select it and view its contents in the center pane of the Debugger.

Source code

Set breakpoints where you want to pause execution. In the following image, the highlight on the number 18 shows that the line has a breakpoint set.

Watch expressions and breakpoints

The right-hand pane shows a list of the watch expressions you have added and breakpoints you have set.

In the image, the first section, Watch expressions , shows that the listItems variable has been added. You can expand the list to view the values in the array.

The next section, Breakpoints , lists the breakpoints set on the page. In example.js, a breakpoint has been set on the statement listItems.push(inputNewItem.value);

The final two sections only appear when the code is running.

The Call stack section shows you what code was executed to get to the current line. You can see that the code is in the function that handles a mouse click, and that the code is currently paused on the breakpoint.

The final section, Scopes , shows what values are visible from various points within your code. For example, in the image below, you can see the objects available to the code in the addItemClick function.

Find out more about the JavaScript debugger in different browsers:

• Firefox JavaScript Debugger )
• Microsoft Edge Debugger
• Chrome Debugger
• Safari Debugger

The JavaScript console

The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console in any browser:

If the developer tools are already open, click or press the Console tab.

This will give you a window like the following:

To see what happens, try entering the following snippets of code into the console one by one (and then pressing Enter):

Now try entering the following incorrect versions of the code and see what you get.

You'll start to see the kind of errors that the browser returns. Often these errors are fairly cryptic, but it should be pretty simple to figure these problems out!

Find out more about the JavaScript console in different browsers:

• Firefox Web Console
• Chrome JavaScript Console (Opera's inspector works the same as this)
• Safari Console
• Debugging HTML
• Debugging CSS

• Eye Candy
• Free Resources

Andras Ketzer releases FluidNinja VFX Tools 1.8

Developer Andras Ketzer has released FluidNinja VFX Tools 1.8 , the latest version of his simulation baking toolset for Unreal Engine .

The update adds support for Unreal Engine’s new Heterogeneous Volume type, and for Unreal Engine 5.4 , the latest version of the software.

A popular tool for baking fluid simulations inside Unreal Engine First released in 2019 , FluidNinja VFX Tools bakes fluid simulations like fire, smoke, clouds and magical effects to 2D data inside Unreal Engine.

The resulting baked data – which can include flipbooks and flow maps – can be used to drive volumes or Niagara particle simulations in-game.

The process reduces the size of simulation assets, and enables complex sims to run in real time.

According to Ketzer, the baked data provides an alternative to VDB assets 100x larger: he cites typical file sizes of 1-4MB versus 100-400MB.

Now supports Unreal Engine’s new Heterogenous Volumes FluidNinja VFX Tools 1.8 adds support for the new Heterogeoneous Volume (HVOL) volume type introduced in Unreal Engine 5.3 .

HVOL is suited to detailed, small-to-medium environmental effects, for which FluidNinja VFX Tools previously used a custom volume type.

In version 1.8, a single volume function handles all of Unreal Engine’s native volume types: Fog Volumes (FVOL), Cloud Volumes (CVOL), and the new HVOL.

Price and system requirements FluidNinja VFX Tools 1.8 is compatible with Unreal Engine 4.20+ and 5.0+. A perpetual license costs $99.99.

The Student Edition – which isn’t limited to students: it’s a non-feature-limited, non-time-limited non-commercial edition – is free to use on personal and showreel projects.

Read more about the new features in FluidNinja VFX Tools 1.8 on Discord

Read more about FluidNinja VFX Tools on the Unreal Engine Marketplace

Have your say on this story by following CG Channel on Facebook , Instagram and X (formerly Twitter) . As well as being able to comment on stories, followers of our social media accounts can see videos we don’t post on the site itself, including making-ofs for the latest VFX movies, animations, games cinematics and motion graphics projects.

Related Posts

• Unity is laying off around 4% of its staff
• F12 releases The Grove 2.1 for Blender and Houdini
• Sneak peek: EmberGen 1.0
• Foundry ships Modo 16.0

CG Channel is part of the Gnomon group of companies

We use cookies to improve your site visit. Find out more .

WWDC24 Highlights

Apple Reveals Apple Intelligence

iOS 18 Makes iPhone More Personal and Intelligent Than Ever

iPadOS 18 Takes iPad to the Next Level

macOS Sequoia Brings New Ways of Working and Transformative Intelligence to Mac

watchOS 11 Offers Powerful Health and Fitness Insights, and More Personalization

visionOS 2 Brings New Spatial Computing Experiences to Apple Vision Pro

Home and Audio Updates Elevate Entertainment and Bring More Convenience

Text of this article

June 10, 2024

Relive the biggest moments from WWDC24

Today Apple kicked off its 2024 Worldwide Developers Conference, revealing groundbreaking new technologies and features during a keynote that was live-streamed from Apple Park to millions around the world. During the weeklong event, developers and students will have unique access to Apple experts, as well as insight into new tools, frameworks, and features to help elevate their apps and games.

This year’s keynote revealed Apple Intelligence , the personal intelligence system that combines the power of generative models with users’ personal context — at the core of iPhone, iPad, and Mac to deliver intelligence that’s incredibly useful and relevant. Major updates also come to iOS 18 , iPadOS 18 , macOS Sequoia , and watchOS 11 , including the biggest-ever redesign of the Photos app, game-changing productivity tools, and new ways for users to express themselves and customize their devices. visionOS 2 brings powerful new ways to interact with Apple Vision Pro and exciting updates to spatial photos and Mac Virtual Display, and tvOS 18 infuses useful information in Apple TV+ films and shows on users’ biggest screen in the home.

Beginning this month, Apple Vision Pro is also coming to more countries and regions, including China mainland, Hong Kong, Japan, Singapore, and next month will come to Australia, Canada, France, Germany, and the U.K.

Apple Intelligence harnesses the power of Apple silicon to understand and create language and images, take action across apps, and draw from users’ personal context to simplify and accelerate everyday tasks. A cornerstone of Apple Intelligence is on-device processing, which delivers personal intelligence without collecting users’ data. Private Cloud Compute sets a new standard for privacy in AI, with the ability to flex and scale computational capacity between on-device processing, and larger, server-based models that run on dedicated Apple silicon servers.

With iOS 18 , users will now be able to arrange apps and widgets in any open space on the Home Screen, customize the buttons at the bottom of the Lock Screen, and quickly access more controls in Control Center. With the biggest redesign ever of the Photos app, photo libraries are automatically organized in a new single view in Photos, and helpful new collections keep favorites easily accessible. All-new text effects come to iMessage, amplifying any letter, word, phrase, or emoji with dynamic, animated appearances to bring conversations to life. Users can also now communicate over satellite in the Messages app, even when a cellular or Wi-Fi connection isn’t available.

With iPadOS 18 , the iPad experience is more versatile and intelligent than ever with new features and apps designed for Apple Pencil. The Calculator app comes to iPad with Math Notes, which allows users to type or write out mathematical expressions and see them instantly solved in their own handwriting. New handwriting tools in Notes including Smart Script make handwritten notes more fluid, flexible, and easier to read.

With macOS Sequoia , Continuity between iPhone and Mac gets better than ever with iPhone Mirroring, enabling full access to and control of iPhone directly from Mac. Safari gets another big update with the new Highlights feature for effortless information discovery on webpages while browsing. Gaming is even more immersive with Personalized Spatial Audio that puts players in the middle of the action like never before. And Apple Intelligence unlocks new ways for Mac users to enhance their writing and communicate more effectively, create playful images in seconds, and more. Apple Intelligence takes full advantage of the power of Apple silicon and its Neural Engine, and will be supported by every Mac with an M-series chip.

watchOS 11 offers breakthrough insights into users’ health and fitness, and more personalization than ever. The new Vitals app surfaces key health metrics and context, the ability to measure training load offers a game-changing new experience when working out, and the popular Activity rings are even more customizable. The Smart Stack and Photos face use intelligence to feature more individualization, and Apple Watch and the Health app on iPhone and iPad offer additional support for users who are pregnant. Check In, the Translate app, and new capabilities for the double tap gesture come to Apple Watch for added connectivity and convenience.

Just months after its initial release, visionOS 2 brings powerful spatial computing experiences to Apple Vision Pro, including new ways for users to create spatial photos with the images already in their library, intuitive hand gestures to easily access important information at a glance, and new features for Mac Virtual Display, Travel Mode, and Guest User. visionOS 2 also introduces exciting new capabilities like Follow Your Breathing in the Mindfulness app, SharePlay for Photos, and multiview in the TV app.

With tvOS 18 , intelligent new features like InSight — and updates to Enhance Dialogue and subtitles — level up cinematic experiences, while new Apple Fitness+, Apple Music, and FaceTime capabilities get even better on users’ biggest screen. The Home app gains new features with iOS 18, like guest access and hands-free unlock with home keys, delivering effortless and secure access to the home. AirPods software updates will transform the way users respond to Siri with new gestures, take calls with friends and loved ones, and immerse themselves in their favorite games.

Press Contacts

Apple Media Helpline

[email protected]

Images in this article