safari extensions developer tools

Safari User Guide

• Change your homepage
• Import bookmarks, history, and passwords
• Make Safari your default web browser
• Go to websites
• Find what you’re looking for
• Bookmark webpages that you want to revisit
• See your favorite websites
• Use tabs for webpages
• Pin frequently visited websites
• Play web videos
• Mute audio in tabs
• Pay with Apple Pay
• Autofill credit card info
• Autofill contact info
• Keep a Reading List
• Hide ads when reading articles
• Translate a webpage
• Download items from the web
• Share or post webpages
• Add passes to Wallet
• Save part or all of a webpage
• Print or create a PDF of a webpage
• Customize a start page
• Customize the Safari window
• Customize settings per website
• Zoom in on webpages
• Get extensions
• Manage cookies and website data
• Block pop-ups
• Clear your browsing history
• Browse privately
• Autofill user name and password info
• Prevent cross-site tracking
• View a Privacy Report
• Change Safari preferences
• Keyboard and other shortcuts
• Troubleshooting

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 > Preferences, click Advanced, then select “Show Develop menu in menu bar.”

Open Safari for me

View in English

Watch the latest videos about Safari

Safari for developers

Safari is the best way to experience the internet on iPhone, iPad, and Mac. Thanks to blazing-fast performance and industry-leading energy efficiency, millions of users enjoy exploring the web with Safari. Take advantage of powerful new features, advanced developer tools, and cutting-edge technologies in Safari to deliver best-in-class websites and apps.

Now people can add your website to their Dock on Mac or to their Home Screen in iOS and iPadOS for easy access. On Mac, any website added to the Dock becomes a web app, with an app-like appearance and system integration similar to other apps. Create a web app manifest to communicate your website’s intended behavior for web app-related features in iOS, iPadOS, and macOS.

Watch the latest video

Safari web extensions

Safari web extensions use HTML, CSS, and JavaScript to offer powerful browser customizations — and now you can create them for every device that supports Safari. Learn how to build a Safari web extension that works for all devices, and how to convert an existing extension to Safari through Xcode and the Safari Web Extension Converter.

Learn about Safari web extensions

SharePlay in Safari

Create SharePlay experiences that people can enjoy on the web and in your app. Learn how to use the Group Activities framework in combination with your website to bring SharePlay to Safari, connecting people through shared interactions — even if they haven’t yet downloaded your app from the App Store.

Learn about Group Activities in Safari

Compact tab bar

In the compact tab bar view, the browser interface yields to the content. Safari blends the tab bar into each website by matching its background color. As a web designer or developer, you can choose the color and code it into your HTML. The entire interface is on one line, and elements naturally appear when needed, making your content feel more expansive as each web page or web app extends to all four edges of the window.

Learn about design in Safari

Verification codes

Easily create more secure logins for users in iOS 15, iPadOS 15, and macOS Monterey, or later using the new iCloud Keychain verification codes. Take advantage of verification codes, AutoFill, iCloud Keychain sync, and two-tap setup to simplify the multistep sign-in process.

Passkeys with WebAuthn

With the Passkeys Technology Preview, you can try a new type of credential that’s intended to replace passwords. A passkey is a phishing-resistant WebAuthn credential that’s backed up and synced across devices with iCloud Keychain. Enable the technology preview using Enable Syncing Platform Authenticator in the Develop menu.

Split View in Safari on iPad

People can view two websites at once on their iPad using split view. Responsive Design Mode makes it easy to see how your websites will render in this view — just tap the iPad preview until it turns into a split view.

Apple Pay on the Web

Provide an easy and secure way to make purchases in Safari 10 or later. Apple Pay lets people quickly pay without entering payment, shipping, or contact information on supported websites from their Mac, iPhone, or iPad. Because card numbers aren’t used and each transaction is confirmed with a fingerprint or passcode, Apple Pay is more secure than accepting credit and debit cards.

Web Push in Safari

Send notifications to people who use your website or web app in Safari 16 on macOS 13 — even when Safari isn’t running. Fully interoperable, Web Push’s standards-based implementation relies on the Push API, Notification API, and Service Workers. If you’ve already coded Web Push using industry best practices, it will automatically work on Safari. And you don’t need to be an Apple Developer Program member to implement this feature.

Safari Technology Preview

Download Safari Technology Preview to get a sneak peek at upcoming web technologies in iOS, iPadOS, and macOS, and experiment with them in your websites and extensions.

How-To Geek

How to turn on the develop menu in safari on mac.

The Develop menu lets you view page source in Safari on Mac.

Quick Links

How to enable the develop menu in safari on mac, how to view page source in safari on mac.

When you right-click on any web page in Safari on Mac, it doesn't reveal the Show Page Source and Inspect Element buttons. To see these, you need to enable the Develop menu---we'll show you how to do that.

Once you've enabled the Develop menu, right-clicking a blank space on any website will reveal the Inspect Element and Show Page Source buttons. These allow you to take a look at the source code of any website, which is useful for things like downloading images from websites and debugging code or finding out what it looks like behind any site (for website designers).

You can easily turn on the Develop menu in Safari by following a couple of steps. Open Safari on your Mac and click the "Safari" button in the menu bar.

Next, select "Preferences." Alternatively, you can use the keyboard shortcut Command+, (comma). This will also open up Safari preferences.

Go to the "Advanced" tab.

Check the box for "Show Develop Menu in Menu Bar."

Now the Develop menu will appear between Bookmarks and Window at the top.

Apart from being able to view the page source, this will allow you to access developer-focused features, such as disabling JavaScript on any website.

Once you've enabled the Develop menu, there are a couple of ways to view the page source in Safari.

Open any website in Safari and right-click the blank space on the page. Now, select "Show Page Source." You can also get to this menu by using the keyboard shortcut Option+Command+u.

If you're looking for images or other media elements from any web page, Safari makes it easy to find these. In the left-hand pane, you will see various folders such as Images, Fonts, etc. Click the "Images" folder to quickly find the photos that you need.

After selecting an image, you can view its details easily by opening up the details sidebar. The button to open this is located at the top-right of the console, just below the gear icon. You can also open this with the shortcut Option+Command+0.

Click "Resource" at the top of the details sidebar to view details, such as the size of the image and its full URL.

You can change the position of the page source console easily, too. There are two buttons at the top-left of this console, right next to the X button. Click the rectangle icon to move the console to a different side within the browser window.

If you'd like to open the page source console in a separate window, you can click the two-rectangles icon. This will detach the console and open it in a separate window.

To check out the code for any specific element on the page, you can right-click that element and select "Inspect Element." This will take you directly to the code for the element that you selected.

Whenever you're done looking at the code, click the X button to close the page source console and return to browsing on Safari. You can also check out how to view a website's page source in Google Chrome  here.

Related: How to View the HTML Source in Google Chrome

How To Open Developer Tools In Safari

• Software & Applications
• Browsers & Extensions

Introduction

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

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

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

Opening Developer Tools in Safari on Mac

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

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

Using the Menu Bar:

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

Accessing the Advanced Settings:

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

Opening Developer Tools:

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

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

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

Opening Developer Tools in Safari on iPhone or iPad

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

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

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

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

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

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

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

Leave a Reply Cancel reply

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

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

• Crowdfunding
• Cryptocurrency
• Digital Banking
• Digital Payments
• Investments
• Console Gaming
• Mobile Gaming
• VR/AR Gaming
• Gadget Usage
• Gaming Tips
• Online Safety
• Software Tutorials
• Tech Setup & Troubleshooting
• Buyer’s Guides
• Comparative Analysis
• Gadget Reviews
• Service Reviews
• Software Reviews
• Mobile Devices
• PCs & Laptops
• Smart Home Gadgets
• Content Creation Tools
• Digital Photography
• Video & Music Streaming
• Online Security
• Online Services
• Web Hosting
• WiFi & Ethernet
• Browsers & Extensions
• Communication Platforms
• Operating Systems
• Productivity Tools
• AI & Machine Learning
• Cybersecurity
• Emerging Tech
• IoT & Smart Devices
• Virtual & Augmented Reality
• Latest News
• AI Developments
• Fintech Updates
• Gaming News
• New Product Launches

• AI Writing How Its Changing the Way We Create Content
• How to Find the Best Midjourney Alternative in 2024 A Guide to AI Anime Generators

Related Post

Ai writing: how it’s changing the way we create content, unleashing young geniuses: how lingokids makes learning a blast, 10 best ai math solvers for instant homework solutions, 10 best ai homework helper tools to get instant homework help, 10 best ai humanizers to humanize ai text with ease, sla network: benefits, advantages, satisfaction of both parties to the contract, related posts.

How To Inspect Page On Safari

How To Enable Inspect In Safari

How To Inspect On IPhone Safari

How To Open Developer Tools On Safari

How To Change Location In Safari

How To Reset Safari In Mac

How To Post On Instagram From Mac Safari

How To Reset Safari 9.0

Recent stories.

How to Find the Best Midjourney Alternative in 2024: A Guide to AI Anime Generators

How to Know When it’s the Right Time to Buy Bitcoin

How to Sell Counter-Strike 2 Skins Instantly? A Comprehensive Guide

10 Proven Ways For Online Gamers To Avoid Cyber Attacks And Scams

• Privacy Overview
• Strictly Necessary Cookies

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

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

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

Safari Dev Tools: The Complete 2023 Guide

Introduction to safari developer tools.

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

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

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

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

A Brief History of Safari

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

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

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

Why Learn Safari Developer Tools?

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

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

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

Core Safari Developer Tools

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

The Web Inspector

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

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

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

The Debugger

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

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

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

The Resources Panel

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

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

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

Storage Inspector

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

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

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

The Audits Panel

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

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

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

Advanced Safari Developer Tools

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

Device Mode

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

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

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

Advanced Debugging

Safari provides next-level JavaScript debugging capabilities:

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

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

Network Throttling

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

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

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

Experimental Features

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

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

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

Debugging JavaScript Issues

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

Breakpoint Usage

Effective breakpoint usage is key for isolating issues:

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

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

Scope Inspection

Understanding scope is vital for tracking down variable issues:

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

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

Async Debugging

Safari provides multiple approaches for debugging asynchronous code:

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

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

Error Handling

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

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

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

Optimizing Page Speed

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

Image Optimization

Safari provides multiple ways to optimize images:

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

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

Script Loading

Optimizing script loading is key for performance:

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

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

Caching Assets

Effective caching can boost repeat visit performance:

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

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

Layout Thrashing

Diagnosing layout thrashing is key for smooth UX:

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

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

Wrap Up and Key Takeaways

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

Key highlights include:

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

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

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

Related posts

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

How to Use React DevTools in Safari

Published on Jun 09, 2023 in platforms by Lucien Chemaly 11 minute read

React is commonly used for the frontend in static site generators like Gatsby and now WordPress . React DevTools is a set of developer tools with a multitude of features that can make your workflow more efficient and help you debug and optimize your code.

However, if you use Safari, you may be disappointed to learn that there is no browser extension for React DevTools like there is in Chrome and Firefox.

Fortunately, there is a solution. You can still use standalone React DevTools to connect to your site in Safari. This practical tool is also useful for debugging non-browser-based React applications, like React Native apps. It can help simplify the process of optimizing and debugging your code, making your workflow more efficient.

In this article, you’ll learn how to install and use the standalone version of React DevTools to debug a React application running in Safari. In addition, the article also highlights the differences between the standalone version and the Chrome extension, as well as some limitations of the tools.

Use Cases for Debugging React Apps

The standalone version of React DevTools is a separate application that provides a powerful set of debugging and inspection tools for React applications. It’s independent of any specific browser and can be used across various platforms and environments. This makes it a versatile option for developers who need to debug their React apps in different contexts.

Some of the use cases for the standalone version of React DevTools include:

• Debugging non-browser-based React apps: The standalone version of React DevTools is particularly useful when debugging React Native applications because it is platform-independent and can connect to apps running on iOS or Android devices. For example, you can use it to determine why a specific component of your React Native app isn’t rendering correctly on an iOS device. You can use React DevTools to inspect the component tree, check component props and state, and identify issues with styling or logic that may be causing the rendering problem.
• Debugging React apps in Safari: Safari is a widely used browser, especially among macOS users. Although Safari has its own set of developer tools, it doesn’t have extensions or support for React applications like Chrome or Firefox. The standalone version of React DevTools can be used to debug React applications running in Safari, as it provides developers with a powerful set of tools to inspect components and diagnose issues. For instance, if a specific UI component in your React app doesn’t behave as expected when viewed in Safari, you can use React DevTools to inspect the component in question. You can check its state and props and identify any issues.
• Debugging server-rendered React apps: In most static site generators, React apps are server-rendered, which means components are rendered on the server side and sent as HTML to the client. In these scenarios, the standalone version of React DevTools can help you debug issues related to server-rendered components. For example, if you’re using a solution like Next.js or React Server Components to perform server-side rendering, you can use the standalone version of React DevTools to inspect the rendered components and identify issues related to data fetching, state management, or rendering logic.

How to Debug a React App in Safari

The following tutorial explains how to use the standalone version of React DevTools to debug a React application running in Safari. By the end, you’ll be equipped with the knowledge and tools you need to confidently debug your React application.

Prerequisites

To complete this tutorial, you’ll need:

• A Mac running Safari
• A code editor, such as Visual Studio Code
• Git installed on your machine
• Node.js and npm (the Node package manager) installed on your system

To verify the installation of Node.js and npm, execute these commands in your shell or terminal:

If they aren’t installed, download and install Node.js , which also automatically installs npm. This tutorial uses Node version 18.12.1 and npm version 8.19.2.

Creating a React Demo Application

You’ll first need to set up a basic React demo application, which you’ll run and debug in your Safari browser using the standalone version of React DevTools.

Create a new React project using Create React App by executing this command:

This command will generate a new folder with the specified name and populate it with boilerplate code for a React application.

Change the current directory to your newly created project folder by running the following command:

Execute the following command to start the development server:

Your React application should now be live at http://localhost:3000/ . Use your Safari browser to open the application:

Any modifications made to the source code will trigger an automatic page refresh.

Connecting Standalone React DevTools to Your App in Safari

To connect React DevTools to your app in Safari, you first need to install the standalone React DevTools package using npm from your terminal or shell:

Run React DevTools with this command:

After you run the command, you’ll get the following screen telling you to add an additional script to your React DOM :

This tutorial uses the script with the localhost link ( <script src="http://localhost:8097"></script> ) to connect the React application, but the LAN IP address also works. Since you’re not working with a mobile application, the localhost link will work just fine.

Go to your source project and open the index.html file in the public folder. Add the localhost link just after the <head> tag, then open React DevTools. You should see the following in the Components section:

Creating a User Listing

Once you have connected React DevTools to your application, you can use the various features it provides. These features include the ability to inspect the component tree, examine component state and props, and profile component performance.

As the sample application doesn’t have many components, you’ll only see the App component in the tree. To explore more features of React DevTools, you’ll need to add more components.

To add a User component, create a file named User.js in the src folder and add the following code to it:

This component displays user information, such as first name, last name, age, and date of birth (DOB).

You’ll now create a UsersList component that utilizes the User component to display the list of users. Create a file named UsersList.js in the src folder and add the following code to it:

To populate the list of users, you need to create some dummy data and wrap the UsersList component in the App component. To do this, replace the code in App.js with the following:

Note: The App component renders the UsersList component, which in turn renders each User component for every user in the list.

The application in your Safari browser should look like the following:

Debugging and Inspecting Your App

Now that your application is ready, you can start debugging it with React DevTools.

If you open React DevTools, you should see your application tree. It begins with the App component at the top, followed by the UsersList component, and ends with the User component:

If you click the UsersList component in the tree, the props that are passed to the component will be displayed in the right pane. In this case, the props include the array of users from your dummy data:

Clicking a User component displays the props that it passes (the user object in this case). You can click any of three User components and check their relative props:

When you use React DevTools to debug your application, it’s important to understand the application tree and how it represents the component hierarchy. The application tree can help you quickly identify rendering issues and data flow by providing a visual representation of the components. You can inspect the props and state of each component to pinpoint bugs and troubleshoot issues that may arise.

Additionally, you can pin the location of a selected component in your browser by clicking the eye icon in React DevTools:

Once this has been activated, it will highlight the component in light blue in your browser:

You can also log the selected component in the console by clicking the bug icon in React DevTools:

The following image shows the results in the browser when you click the bug icon:

Using React DevTools, you can gain a better understanding of the structure and behavior of your applications. You can also more easily identify and fix bugs and performance issues. The standalone version is particularly useful because it can be used with any React application, whether it’s running locally or on a remote server, and it provides a separate, dedicated window for debugging purposes. Overall, the standalone version of React DevTools is a practical tool for developing and debugging React applications.

Differences between Standalone React DevTools and the Chrome Extension

If you use the standalone version of React DevTools, you’ll be able to use it with any browser, not just Safari. It also offers more customization options and flexibility compared to the Chrome extension. The following are some other differences between the two versions:

• Cross-platform compatibility: The standalone version of React DevTools is designed to work across various platforms, including browsers and devices, enabling a broader range of debugging and development possibilities. Chrome extensions, on the other hand, are limited to working within the Chrome browser environment.
• Ease of setup and connection: Chrome extensions are designed to integrate seamlessly with the browser, so using the extension version makes it easy to detect and connect to React apps running in the browser. The standalone version of React DevTools often requires manual configuration to connect to the target app, which can be more time-consuming and error-prone.
• Updates and maintenance: These two versions of React DevTools may have different release schedules and update processes. Chrome extensions typically update automatically with the browser, while the standalone version may require manual updates.

Limitations of Standalone React DevTools

It’s also important to be aware that the standalone version of React DevTools has some limitations. For instance, the tool may not work as effectively with certain types of components, such as those built with third-party libraries. You may need to use additional tools or methods to gather the necessary information if the tool provides limited data.

The following are some of the most notable limitations:

• Browser-specific features: The standalone version of React DevTools may lack some browser-specific features, such as network request inspection, JavaScript debugging, or browser performance profiling. For these features, developers need to use the browser’s built-in developer tools or rely on other debugging solutions tailored for the specific browser.
• Integration with browser environment: The standalone version doesn’t have the same level of integration with the browser environment as the extensions. Certain tasks, like interacting with browser APIs or manipulating the DOM, may be more challenging or impossible to accomplish using the standalone version.
• Learning curve: Due to differences in features, interface, and setup process, developers may need to invest additional time in learning how to use the standalone version of React DevTools. This may slow down their development process, especially if they are already familiar with the Chrome extension.
• Performance and resource usage: The standalone version of React DevTools may have different performance characteristics and resource usage compared to the Chrome extension version. Depending on the specific tools and configurations used, developers may experience varying levels of performance and resource consumption, which can impact their development experience.

By keeping these limitations in mind, you can adjust your approach and optimize your code more effectively. For instance, you can use alternative tools or workarounds to gather the information you need.

The standalone version of React DevTools offers a versatile solution for developers who need a powerful and flexible set of debugging tools, whether they’re working on browser-based React apps or non-browser-based applications like React Native apps.

This article introduced the standalone version of React DevTools and demonstrated how to use it to debug a React app running in Safari. You should now be comfortable with setting up, connecting, and using React DevTools to inspect and debug your React applications. With the knowledge from this article, you’ll be able to debug your React applications, regardless of the environment or browser they are running in.

You can find the code that was used in this article in this GitHub repository .

By Lucien Chemaly

Lucien has a Master's and Engineering Degree in IT and Telecommunications from the University of Rennes, France. He teaches seasonal courses for engineering students at the Saint Joseph University of Beirut and has been involved in programming training for private companies. He also writes for Draft.dev.

Build a Blog that Software Developers Will Read

The Technical Content Manager’s Playbook is a collection of resources you can use to manage a high-quality, technical blog:

• A template for creating content briefs
• An Airtable publishing calendar
• A technical blogging style guide

WebKit Features in Safari 17 beta">News from WWDC23: WebKit Features in Safari 17 beta

Jun 6, 2023

by Patrick Angle, Jean-Yves Avenard, Marcos Caceres, Ada Rose Cannon, Eric Carlson, Garrett Davidson, Jon Davis, Karl Dubost, Brady Eidson, Matthew Finkel, Simon Fraser, Brent Fulgham, Rachel Ginsberg, David Johnson, Anne van Kesteren, Mark Lam, Sihui Liu, Justin Michaud, Jer Noble, Tim Nguyen, Ben Nham, Richard Robinson, Michael Saboff, Alexey Shvaika, Jen Simmons, Sam Sneddon, Brandon Stewart, John Wilander, Luming Yin

Spatial Web

Javascript and web api, web developer tools, browser changes, safari extensions, bug fixes and more, help us beta test.

It’s been a fantastic year for WebKit. We’ve shipped eight Safari releases since WWDC22, with more than 140 new web technologies in the first half of 2023 alone. Now, we are pleased to announce another 88 web features coming this fall in Safari 17.

Web apps are coming to Mac. With macOS Sonoma, you can add a website — any website — to your Dock. Just go to File > Add to Dock, adjust the name and icon if desired, and the web app icon appears in your Dock.

Web apps on Mac let you focus on the websites you use all the time, separate from the rest of your browsing. Like all Mac apps, web apps work great with Stage Manager, Mission Control, and keyboard shortcuts like Command + Tab. Web apps can be opened from the Dock, Launchpad, and Spotlight Search. Web apps work with AutoFill credentials from iCloud Keychain and from third-party apps that have adopted the Credential Provider Extension API. And users can grant permission to a web app to use their camera, microphone and location in the same way they grant such permissions to other Mac apps through system prompts and the Privacy & Security section of System Settings. Web apps on Mac support web push , badging , and all the usual web standards implemented by WebKit, just like web apps on iOS and iPadOS .

When a user clicks on a web app icon, the website always opens in its own window as a web app, even if the site does not have a manifest file (or legacy meta tags ). This expands the usefulness of web apps, putting users in charge of determining what becomes a web app and giving them the confidence it’s always something they can choose.

While the default web app experience on Mac is great, as a web app developer you can use web technologies like Service Workers to make it even better. By providing a web app manifest , you can customize the presentation of your web app, including the display mode, name, theme color, and start URL. Learn about the details by watching What’s new in Web Apps at WWDC23.

When a user adds a website to their Dock, Safari will copy the website’s cookies to the web app. That way, if someone is logged into their account in Safari, they will remain logged in within the web app. This will only work if the authentication state is stored within cookies. Safari does not copy over any other kind of local storage. After a user adds a web app to the Dock, no other website data is shared, which is great for privacy.

Add to Home Screen from Safari View Controller

Add to Home Screen is now available from Safari View Controller on iOS and iPadOS. Tapping a link within an app that uses Safari View Controller as the in-app browser allows the user to add the open website to their Home Screen right from there. Just like Add to Home Screen from Safari on iOS and iPadOS (or any other browser that implemented support ), if the website has a manifest file with a display mode of standalone or fullscreen , it will open as a Home Screen web app.

We can’t wait for you to try out Safari on Vision Pro. This truly is Safari, with the same WebKit engine — plus a few additions. All of your websites will work beautifully out of the box, thanks to its extensive support for web standards. You can see exactly how Safari on Vision Pro works by watching the WWDC23 Keynote and Meet Safari for spatial computing .

We are collaborating on two technologies to make the web in spatial computing even more powerful — the <model> element and WebXR.

The <model> element will provide a way to easily present 3D content in a web page without any scripting. Just like with <img> and <video> , HTML makes it possible for <model> to work in a robust and simple manner across web browsers on any platform. Model is still undergoing specification and is subject to change, but we expect it will work like this:

By creating a declarative element, we can leverage well-known patterns for supporting multiple file formats, while simultaneously providing fallbacks for browsers without support.

The interactive attribute will enable user interaction and allow people to rotate the model in place. An accompanying JavaScript API will provide even more capabilities, including access to the camera. The exact details of how <model> will work are currently being debated at the Immersive Web Community Group .

The ability to embed rich 3D content into a web page will open up a world of possibilities. For example, an online shoe store might provide models of all their shoes. Or a website for interior design inspiration could provide furniture models for people to “place” virtually in their homes. Safari on Vision Pro will take such experiences to the next level, with a full stereoscopic view and environmental lighting — all in a privacy-preserving way. What or where the user is looking is never exposed to the web page.

You can try out <model> in Safari on iOS, iPadOS, and macOS by turning on its feature flag and navigating to this demo page .

When embedding a 3D model into a web page isn’t enough, WebXR provides the technology for creating a fully immersive experience on the web. WebXR is based on WebGL, and many popular WebGL libraries already have built in support.

Safari on Vision Pro currently has testable support for WebXR, available behind a feature flag while we collaborate with the W3C Immersive Web Working Group on updates to the web standard. WebKit supports the immersive-vr session type in WebXR. Vision Pro does not have external controllers. Instead, you can request the “hand-tracking” feature to let users interact with your content.

Visit the Immersive Web Working Group developer page at immersiveweb.dev to learn more about getting started with different frameworks that include WebXR support and to find one that best fits your project.

We are pleased to announce that support for JPEG XL is coming to Safari 17. Similar to JPEG, the new image format provides another modern option for finding the right balance between quality and file size. JPEG XL uses a new compression algorithm called “Modular Entropy Coding” that allows for greater flexibility in adjusting the compression ratio. With support for progressive loading, it’s well suited for images served over slow connections, since users start to see the image before the whole file is downloaded. And you can recompress existing JPEG files into JPEG XL without any loss of data, while reducing their size by an average of 20%. Or compress from the original image file to create a file that’s up to 60% smaller compared to JPEG!

Use the <picture> element to provide JPEG XL files to browsers that have support , while providing a fallback for browsers that don’t.

JPEG XL will be supported by WebKit for Safari 17, Safari View Controller and WKWebView on macOS Sonoma, macOS Ventura and macOS Monterey, as well as iOS, iPadOS, watchOS, and visionOS.

We are also adding support for HEIC images to Safari 17, which uses the HEVC video codec compression algorithm. HEIC is the file format used on iPhone and iPad to store photos taken with the camera. With support for HEIC in Safari, Safari View Controller, and WKWebView, developers can support importing and editing such photos right in the browser, without needing to convert them into another format. HEIC is also ideal for displaying images when using WKWebView inside an app.

Safari 17 also improves our implementation of image-set() , increasing interoperability with other browsers as part of our commitment to Interop 2023 , and adding support for the optional resolution and type arguments. The type argument provides you with a means to offer browsers multiple image formats to choose from, including JPEG XL and HEIC.

Managed Media Source

WebKit for Safari 17 also brings the new Managed Media Source API. It provides a power-efficient solution fulfilling advanced needs as a low-level toolkit for streaming video.

Adaptive bitrate streaming allows for switching between media data formats — ensuring delivery of the best possible video quality based on the user’s internet connection speed and device capabilities, even as those conditions change. Media Source Extensions (MSE) is an existing low-level toolkit for adaptive streaming giving the web page more control and responsibilities for managing buffering and resolution. But MSE isn’t particularly good at managing buffer levels, network access, and media variant selection. And it uses a lot of power on mobile devices.

Managed Media Source adds the capabilities of MSE, without any of the drawbacks. It’s available on iPadOS 17 beta and macOS Sonoma beta, and is in preview on iOS 17 beta, where it can be tested by turning on its feature flag. Note that Managed Media Source is only made available when an AirPlay source alternative is present.

Learn more about JPEG XL, HEIC, and Managed Media Source API by watching Explore media formats for the web at WWDC23.

Media player stats overlay

If you’ve enabled Developer Features, WebKit now provides a media player stats overlay where you can see technical details about a video — its source type, size, performance metrics, resolution, codec string, and color configuration. To show the overlay, use the context menu on any <video> element and select “Show Media Stats”. Now you can tell at a glance the exact codec and configuration used by media on your page and use that information to craft accurate queries in MediaCapabilities.

And more video

WebKit now supports USB cameras on iPadOS 17. When a USB camera is attached to an iPad, it’s included in the output of enumerateDevices() and is selectable with getUserMedia() along with the built-in cameras.

Improvements to WebRTC add support for InputDeviceInfo , the inbound rtp trackIdentifier stat field, exposing zoom in MediaTrackCapabilities, and getDisplayMedia video track clone resizing.

WebKit for Safari 17 adds additional support for low-power mode — optimizing video streaming by tone mapping HDR video to SDR.

Safari 17 adds support for the popover attribute. It provides a framework for displaying overlays, popups, popovers, and dialogs. There are two types of popovers, which can be used as values for the popover attribute:

• auto popovers, which automatically close when you click outside of the popover; and
• manual popovers, which don’t have this automatic closing behavior.

Use a button (either a <button> element or button input type) to create the UI for opening and closing the popover. And add the appropriate HTML attributes to create the desired result.

The popovertarget attribute connects the button to the popover content through an ID. The optional popovertargetaction attribute takes show , hide , or toggle as values. By default, toggle is used.

This is just one UI pattern you might find useful. There are many possible combinations. Having a popover mechanism in HTML makes for quick work, while ensuring great usability and full accessibility.

To go beyond a simple button trigger, a JavaScript API opens up more powerful possibilities through showPopover() , hidePopover() , and togglePopover() .

And more HTML

Safari 17 on macOS adds support for <hr> inside of <select> , which is a feature the WebKit team added to the HTML Standard. This makes it easier to create a visual separator between items without requiring the use of JavaScript.

The <menu> element is now mapped to role=list . Slotted elements are now announced when inside <dialog> or aria-modal . And now slot elements referenced with aria-labelledby are properly labeled.

Counter styles

Safari 17 adds support for CSS Counter Styles , providing a mechanism through @counter-style for changing a counter’s language or character set in CSS — both for ordered/unordered lists with list-style-type , and for CSS Counters .

Font size adjust

In Safari 16.4 , we shipped initial support for font-size-adjust , which allows you to easily make the visual size of different fonts consistent — even across all possible combinations of fallback fonts. The basic version of font-size-adjust lets you tell the browser to resize letters so that their x-height is a specific ratio of the font-size .

In Safari 17, we’re expanding support to include more advance capabilities of font-size-adjust , including the from-font value and two-value syntax. Instead of declaring a ratio with a number value, the from-font value allows you to ask the browser to pull the sizing metric from the main font being specified, and apply that ratio to all fonts. Two-value syntax lets you switch from adjusting ex-height to adjusting cap-height , ch-width , ic-width , or ic-height — providing support for a broader range of languages and design choices.

Let’s look at an example. Here, font-size-adjust tells the browser to make all of the fonts inside article match the size of the x-height of the main font being used. This means all of the text in paragraphs and code will visually appear to be the same size, no matter which font is applied from either stack, or how different the paragraph and code fonts appear in actual size.

To learn much more about how font-size-adjust works, as well as all about Counter Styles, watch What’s new in CSS at WWDC23.

Safari 17 also brings support for @font-face size-adjust , which provides a way for you to normalize visual size when defining a font’s use.

Text transform

Safari 17 adds support for text-transform: full-width and full-size-kana, and adds support for multiple text-transform values. The full-width value transforms all the characters in a string of text to be “full-width” — to match the size of characters in an East Asian script like those for Chinese, Japanese, or Korean. It’s especially useful when wanting to improve consistency in sizing when typesetting CJK. The full-size-kana value transforms the size of Kana characters in Japanese to be full-size, rather than the typical small size — useful to make ruby text more legible when needed.

Font support

To expand what’s possible with web typography, Safari 17 adds two feature queries for writing CSS depending on the presence or absence of browser support for font tech or format: @supports font-tech() as well as @supports font-format() . Font tech refers to specific kinds of OpenType technology used in some fonts, like COLRv0. Safari 17 also adds support for @font-face { src: url() tech() } , making it easy to define the use of a font that depends on newer tech, while providing a fallback for browsers without support.

Media Queries 4

Safari 17 rounds out support for Media Queries level 4 , with support for two new media queries. Like the others, overflow-block and overflow-inline provide a way to conditionally apply CSS depending on the qualities of a user’s device — in this case, how the device handles overflow. For example, can it scroll the page like a typical browser on a computer? Does it page the content, like an e-book reader? Or does it have no mechanism for handling overflow, like a digital billboard?

And more CSS

WebKit for Safari 17 includes multiple fixes to improve accessibility of display: contents , including making aria-activedescendant , aria-dropeffect , aria-flowto , aria-grabbed , aria-owns , AXAccessKey, CSS speak-as , and URL AX APIs work on elements that have display: contents applied. As well as computing the accessible name for display: contents elements that rely on labels or captions, and making display: contents elements to be able to return selected accessibility children.

Safari 17 also adds support for contain-intrinsic-size , providing a way to set the size of an element to use for layout when the element is subject to size containment .

To increase the usefulness of :has() , WebKit now supports :has(:buffering) and :has(:stalled) to expand the ability to apply CSS conditionally based on the state of media playback. And Safari 17 supports :has(:defined) for applying styling based on the presence of a custom element that has been defined .

To keep up with the most recent changes to the web standard for Container Queries, Safari 17 adds support for containerName and containerQuery, and updates conditionText to be containerName containerQuery in CSSContainerRule .

Offscreen Canvas

When using Canvas, the rendering, animation, and user interaction usually happens on the main execution thread of a web application. Offscreen Canvas provides a canvas that can be rendered off-screen, decoupling the DOM and the Canvas API so that the <canvas> element is no longer entirely dependent on the DOM. Rendering can be transferred to a worker context, allowing you to run tasks in a separate thread and avoid heavy work on the main thread that can negatively impact the user experience. The combination of DOM-independent operations and rendering of the main thread can provide a significantly better experience for users, especially on low-power devices. Support for Offscreen Canvas 2D operations shipped in Safari 16.4 . Now, Safari 17 adds support for 3D contexts in Offscreen Canvas.

WebKit has made some big updates to the storage quota policy. Previously, an origin had a starting storage limit of 1 GB. When exceeding the limit, the subsequent storage operation would fail in Home Screen web apps, or the user would see a prompt asking to increase the quota for the origin in Safari. Starting in macOS Sonoma, iOS 17 and iPadOS 17, the quota is calculated based on total disk space without the user’s input. The origin generally gets a much higher limit, and the user isn’t prompted in Safari. To get the estimated value of the current origin quota and usage, you can use the newly supported navigator.storage.estimate() method.

As each origin gets a higher storage limit by default, WebKit will evict data by origin when the total usage of all origins is bigger than a certain value, the “overall quota”, calculated based on total disk space. An origin is exempt from eviction when its storage mode is persistent. To check the storage mode of your origin, you can use navigator.storage.persisted() ; to request the mode be changed to persistent, you can use navigator.storage.persist() . Critical bug fixes have been made to ensure the storage mode value is remembered across sessions, and eviction will count on it. The Storage API is now fully supported.

Safari 17 adds JavaScript support for two new Regular Expression features, RegExp v flag with set notation + properties of strings and RegExp duplicate named capture groups . The RegExp v flag feature allows for the creation of regular expressions containing Unicode properties, including some multi-character Emoji sequences. It also allows for creating regular expressions with union, intersection, and subtraction set operations on character classes and collections of strings.

The Duplicate Named Capture Group feature enables the creation of regular expressions with named captures where more than one capture group uses the same name. This allows you to create regular expressions with intuitive group names where there is more than a one-way pattern to search. An example is creating one regular expression that can search data strings written in multiple ways, e.g. M/D/Y versus D-M-Y, while extracting the matched results with captured group names month , day, and year regardless of which string format was matched.

Set Operations

Another new JavaScript feature adds several new Set operation methods , including intersection() and union() as well as comparison methods including difference() , isSubsetOf() and isSuperSetOf() . Together these new methods make Sets first class objects.

And so on. Check out also the new .symmetricDifference() and .isDisjointFrom() methods, which open some interesting comparison possibilities.

Gamepad API

WebKit for Safari 17 adds support for Gamepad.prototype.vibrationActuator. It enables “dual-rumble” haptic feedback on gamepads. The API allows you to check if “dual-rumble” is supported by the gamepad, as well as control the duration and magnitude of the haptic effect.

Traditionally, to ensure you could parse a URL, you needed to use a try sequence. Now, you can directly detect if an URL input can be parsed with URL.canParse(tentativeURL, optionalBase) . The method will return true or false .

In addition, the has() and delete() methods on URLSearchParams have been extended. The has() method makes it possible to detect if a parameter has been set. And the delete() method can delete a parameter. Until now, you could only check for, and delete, by name alone. Now, the methods have been extended so that you can check for, and delete, specific name-value pairs.

For example, the following URL has currency as a duplicate key: https://example.com/?currency=USD&currency=JPY , before you could only check params.has('currency'). It is now possible to do: params.has('currency', 'JPY') .

Be mindful that with this update, method signatures are not directly feature detectable, so they can return false positives. Until all browsers support these updates, be sure to run a small test to confirm support. For example:

Web Sockets

You can now use relative URLs (as well as HTTP(S) URLs) in the WebSocket constructor — this makes it a lot easier to point to WebSocket endpoints without hard-coding URLs into your web application. For example, new WebSocket('/updates') .

And more JavaScript and Web API

• Support for <link rel="modulepreload"> .
• Support for the focus fixup rule .
• Support for Ed25519 cryptography.
• Support for pausing and resuming background fetches.
• Support for ReadableStream .
• Support for fetch priority hints.
• Support for customElements.getName method.

Redesigned Develop Menu

In Safari 17 on macOS Sonoma, macOS Ventura and macOS Monterey, a completely redesigned Develop menu makes it easier to find the key tools available to help you create websites, web apps, web content inside other apps, web extensions, and more.

Devices and simulators are now more prominent in the Develop menu, making them easier to identify at a glance. Inside the menu for each iOS or iPadOS device, app icons make it easier to find the application or web content you want to inspect. On macOS Sonoma you can pair with Apple TV and Vision Pro directly from Safari to inspect those platforms.

Rethought Feature Flags

The new Feature Flags panel replaces the previous Experimental Features section of the Develop menu, allowing you to search for specific features and to easily see bolded features toggled from their default state. Feature flags are now organized by topic: Animation, CSS, HTML, JavaScript, Media and more. And each feature is clearly categorized into one of four statuses: Stable, Testable, Preview, and Developer.

Stable represents features that have recently shipped in Safari, on by default. These features can be turned off to help you debug an issue or test progressive enhancements. Stable features will eventually be removed from the list.

Testable features are disabled by default. These features might be in the process of being implemented, or they might be waiting for changes to the web standards. They have a ways to go, but still could be interesting enough to test out.

Preview is for features that have not yet shipped in Safari, but are closer to being complete. These features are on by default in Safari Technology Preview , and are ready for developers to try out. They may still have bugs, or may even undergo significant change as web standards evolve. This is a great time to help find and file bugs, and to comment on whether the web standard for a new technologies solves your needs.

Developer features are not as common. This category is for miscellaneous features added to the list of feature flags so developers can toggle them on and off for testing. Developer tools may appear here, for example.

New Developer settings panel

The new Developer panel in Safari 17’s Settings let you toggle developer features that apply across all websites open in Safari, like Allow remote automation (which enables automating Safari with WebDriver ) and other features that were previously in the Develop menu.

New tab-specific setting overlay

Some previously-global settings from the Develop menu, like disabling CSS or changing WebRTC behavior, have moved to Web Inspector where they are now scoped to the inspected tab, allowing you to use other tabs and windows normally.

Redesigned Responsive Web Design Mode

Responsive Design Mode has also been refreshed to focus on the responsiveness of a page’s design at any width or height on your Mac. You can type in a specific viewport size at the top of Responsive Design Mode in addition to dragging the resize handles around the view.

Also new is the ability to open the page in a Simulator right from Responsive Design Mode.

You can also open any page from Safari in a Simulator directly from the Develop > Open Page With menu, even when you are not using Responsive Design Mode.

Using a Simulator is a great way to test the experiences you’re making on iOS, iPadOS, and coming soon, visionOS — including device-specific behaviors, like the rendered size of type, the effects of the viewport meta tag , double-tap to zoom, and even Home Screen web apps on iOS and iPadOS. Simulators are free, and come included with Xcode from the Mac App Store .

If you don’t have Xcode installed, a link to documentation is conveniently available in the Develop > Open Page With menu, as well as the Open with Simulator menu in Responsive Design Mode, to help you get started, or to add more devices and OS versions.

Learn all about the new Develop menu, redesigned Responsive Web Design mode, how to easily connect to directly to a real device, how to install and use a Simulator, and much more in Rediscover Safari developer features at WWDC23.

Web Inspector

We’ve also made improvements to Web Inspector . When working with minified sources, pretty printing in Web Inspector can help make the code easier to read, set breakpoints in, and debug. New in Safari 17, more JavaScript syntax is supported for pretty printing minified scripts, including template strings , optional chaining , private variables and functions in classes , and static variables and functions .

Changes to Web Inspector in Safari 17 also include:

• Elements tab: Added settings to always show rulers and element overlays for grid and flexbox when highlighting elements in Web Inspector or in Element Selection Mode.
• Elements tab: Added editing controls for variation axes in the Fonts sidebar.
• Console tab: Added setting to show timestamps for console messages.
• Console tab: Added support for viewing the target of a WeakRef .
• Sources tab: Added support for ES2022 Private Fields when inspecting and logging JavaScript objects.
• Graphics tab: Added support for OffscreenCanvas.

Learn more by watching What’s new in Web Inspector at WWDC23.

GPU Process

Last year brought GPU process support to WebKit on iOS, iPadOS and watchOS. This year we’re adding support on macOS Sonoma. The change moves all drawing (including the drawing of page content, 2D Canvas and WebGL rendering) so it occurs in the “GPU Process”. This new architecture allows WebKit to isolate powerful graphics hardware and driver access away from the WebContent process, which is the process that interacts with untrusted content from the Internet. The new design also allows the WebContent process sandbox to completely block IOKit access, resulting in improved security.

New interfaces are added to WKWebsiteDataStore and related classes to further unlock the potential of your WebKit apps. The new capabilities include creating persistent website data stores, configuring cookie policy, customizing proxy settings, requesting HTTPS upgrade for all navigations, and controlling state of inline prediction for autocomplete.

Safari Profiles

Safari 17 adds support for profiles. History, favorites, Tab Groups and website data such as cookies, caches, service workers, and Web Push subscriptions are scoped per-profile. Users can manage each profile’s data individually.

Safari Private Browsing

In Safari 17, Private Browsing gets even more private with added protection against some of the most advanced techniques used to track you. Technical changes include:

• Adding blocking for known trackers and fingerprinting.
• Adding support for mitigating trackers that map subdomains to third-party IP addresses.
• Adding blocking for known tracking query parameters in links.
• Adding noise to fingerprintable web APIs.
• Adding console log messages when blocking requests to known trackers.
• Adding support for blocking trackers that use third-party CNAME cloaking.
• Adding support for Private Click Measurement for direct response advertising, similar to how it works for in-app direct response advertising .

Text cursor color

On macOS Sonoma, the redesigned text cursor now uses the system accent color and matches iOS behavior. You can still customize the color with the caret-color CSS property.

Safari 17 adds support for vertical text recognition in images and videos.

Apple Pay via Payment Request API

You can now enable Apple Pay to be used in third-party iframes by setting the allow="payment" attribute. This “permissions policy” enables the Payment Request API on an iframe, allowing you to embed third-party payment handlers. If using this feature, be sure you also use the X-Frames-Options HTTP header to prevent your site from being embedded by malicious websites.

Authentication

Safari 17 adds support for largeBlob extension for passkeys. Websites can use the additional storage to save data that can later be retrieved when signing in with a passkey. These saved blobs are synced and shared along with passkeys.

We also are adding support for enterprise WebAuthn attestation for passkeys in iCloud Keychain. Managed devices can provide an attestation statement when creating passkeys, using a certificate provisioned through MDM.

Safari 17 adds support for preconnect via HTTP Early Hints.

Lockdown mode

Lockdown mode now:

• Disables IndexedDB.
• Disables the File API and FileReader API.
• Disables support for the <embed> element.
• Disables the Web Speech (Speech Synthesis) API.
• Disables the WebLocks API.
• Disables support for experimental APIs.
• Supports select web fonts.

Lockdown Mode is also now supported in WebKit on watchOS.

Safari 17 now lets you customize where extensions run with even more granularity.

First, Safari App Extensions now have the same per-site permissions model as Safari Web Extensions. It puts users in control over the browsing data they share with every extension they use in Safari.

Second, as an additional layer of control, Safari Extensions can be turned off in Private Browsing. Extensions that access browsing data, like browsing history or webpage contents, will be off by default in Private Browsing but can be allowed with a single toggle in Safari Settings.

Third, all Safari Extensions can be turned on or off per Safari Profile. You can imagine this being useful for turning on an extension used only for school or work in a relevant profile, but keeping it off everywhere else. Each profile runs a separate instance of the extension — meaning there are unique storage areas, background pages, service workers, and more. However, per-site permissions are shared across profiles, so an extension only needs to be granted once. If your extension leverages native messaging capabilities to communicate with a host app, it’s possible to distinguish between profiles to ensure your extension behaves correctly across profiles.

Learn more by watching What’s new in Safari extensions at WWDC23.

To learn even more about what’s in Safari 17 for web developers, including an extensive list of bug fixes, read the Safari 17 beta release notes .

You can test Safari 17 beta by installing the beta of macOS Sonoma, iOS 17, or iPadOS 17.

Or, if you’d like, you can try out Safari 17 beta on macOS Ventura or macOS Monterey by downloading the Safari 17.0 public beta , once it’s available later this summer. You will need to sign in using a free Apple ID to download. Note that installing Safari 17 beta will replace your existing Safari install with no way to revert to an earlier version.

We love hearing from you. Send a tweet to @webkit to share your thoughts on Safari 17.0 beta. You can find us on Mastodon at @[email protected] and @[email protected] . If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technologies or Web Inspector. Filing issues really does make a difference.

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

View in English

Meet Safari Web Extensions on iOS

Safari extensions

Enhance and customize the web browsing experience on iPhone, iPad, and Mac with Safari extensions. Using powerful native APIs and frameworks, as well as familiar web technologies such as HTML, CSS, and JavaScript, you can easily create Safari extensions in Xcode and distribute them on the App Store in the Extensions category. Xcode 12 and later supports the popular WebExtension API and includes a porting tool to make it easy to bring your extensions to Safari.

Blocking content

Give users the ability to block certain content types on Safari iOS, iPadOS, and macOS. Built with Xcode, these app extensions are designed for speed and don’t slow down browsing. And because extensions never see what webpages users visit, user data is protected.

Learn about content blockers

Web extensions

Extend the web-browsing experience by allowing Safari to read and modify web page content. Now supported in iOS 15 and iPadOS 15, Safari web extensions are available on all Apple devices that support Safari. These extensions are built with Xcode and can communicate and share data with native apps — so you can integrate app content into Safari or send web data back to your app to create a unified experience.

Learn about Safari web extensions

Distributing and managing extensions

The Extensions category on the App Store for iPhone, iPad, and Mac showcases Safari extensions, with editorial spotlights and top charts to help people discover and download great extensions from the developer community. When your Safari extension is ready to be released, upload it to App Store Connect for distribution on the App Store. Apple reviews all extensions and updates to ensure they work reliably. Before submitting for review, make sure to read the guidelines for extensions .

Get started with App Store Connect

Converting extensions from other browsers

Web extensions that work in browsers other than Safari can be converted to support Safari on Apple platforms. Run the command-line web extension converter to create an Xcode project configured with a macOS app and/or iOS or iPadOS app that includes an extension that can be enabled in Safari.

Learn about converting a web extension for Safari

Upgrading macOS Safari web extensions to support iOS and iPadOS

It's easy to upgrade an existing macOS Safari web extension to also support iOS and iPadOS. Simply rerun your project through the command-line web extension converter tool with the --rebuild-project option. This will create a new Xcode project based on your existing project that includes extensions for these platforms.

React Developer Tools

Use React Developer Tools to inspect React components , edit props and state , and identify performance problems.

You will learn

• How to install React Developer Tools

Browser extension

The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers:

• Install for Chrome
• Install for Firefox
• Install for Edge

Now, if you visit a website built with React, you will see the Components and Profiler panels.

Safari and other browsers

For other browsers (for example, Safari), install the react-devtools npm package:

Next open the developer tools from the terminal:

Then connect your website by adding the following <script> tag to the beginning of your website’s <head> :

Reload your website in the browser now to view it in developer tools.

Mobile (React Native)

React Developer Tools can be used to inspect apps built with React Native as well.

The easiest way to use React Developer Tools is to install it globally:

Next open the developer tools from the terminal.

It should connect to any local React Native app that’s running.

Try reloading the app if developer tools doesn’t connect after a few seconds.

Learn more about debugging React Native.

How do you like these docs?

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

This is a port of the vue-devtools extension available for Google Chrome and Mozilla Firefox browsers. This repository contains an Xcode project that ports the extension using an existing Chrome extension installation into a Swift-based Safari Extension.

arizsiddiqui/vue-devtools-for-safari

Folders and files, repository files navigation, vue devtools for safari, how to run this project.

To install Vue-devtools in Safari, follow these steps:

1. Install Xcode

If not already installed, you need to install Xcode to run the project as well as build the Safari Extension. There are multiple ways to download the latest version of Xcode:-

• via the Mac App Store.
• via tha Apple Developers website.

Make sure you have more than 40-45 GBs free on your disk to ensure smooth installation of the IDE.

2. Enable Developer mode in Safari to allow Unsigned Extensions.

• To enable Developer mode in Safari, Press ⌘, to open the Safari App Preferences.
• Navigate to the 'Advanced' Tab
• Check the 'Show Develop menu in menu bar'. You should now be able to see the 'Develop' tab appear after the 'Bookmarks' tab in the menu bar.
• Open the 'Develop' menu and click the 'Allow Unsigned Extensions' option in the menu.
• Close Safari to make sure the changes take effect.

3. Clone this repository.

• Open Terminal or your preferred Terminal emulator.
• Navigate to the directory you want to save this codebase in.
• Clone the repository using the command: git clone https://github.com/arizsiddiqui/vue-devtools-for-safari
• This codebase should now be available on your local machine.

4. Run the project.

• In Finder navigate inside this repository until you find the 'Vue.js devtools.xcodeproj' file.
• Double click this file to open the entire project in Xcode.

5. Bundle the source code into a Safari WebExtension App.

• In Xcode, open the 'Product' menu in the menu bar and click 'Archive'. Xcode will start building the project to be bundled into an application.
• In the Archives window that then appears, choose 'Distribute App', and 'Copy App' in the distribution dialog box.
• Choose the destination folder for the bundled application.

6. Add the extension to Safari.

• In Finder, navigate to the destination folder. Here you should find an application by the name of 'Vue.js devtools.app'.
• Run the app by double clicking on it.
• Click the button inside to open Safari Extensions.
• Check the box next to the devtools extension to enable it in Safari.
• JavaScript 98.1%

• Trending Blogs
• Geeksforgeeks NEWS
• Geeksforgeeks Blogs
• Tips & Tricks
• Website & Apps
• ChatGPT Blogs
• ChatGPT News
• ChatGPT Tutorial
• How will AI Impact the Future of Work and Life?
• 20 Best Artificial Intelligence Movies You Must Watch (2023)
• Sparse Rewards in Reinforcement Learning
• Resolution Theorem Proving
• Understanding Reinforcement Learning in-depth
• Propositional Logic based Agent
• Optimal Decision Making in Multiplayer Games
• Types of Reasoning in Artificial Intelligence
• 10 Most Demanded Job Roles in Artificial Intelligence
• Top 10 Industries using Virtual Reality
• Face recognition using Artificial Intelligence
• Top Challenges for Artificial Intelligence in 2020
• Advantages and Disadvantage of Artificial Intelligence
• Game Theory in AI
• What is Artificial General Intelligence (AGI)?
• Difference between Chatbot and Virtual Assistant
• Difference between Artificial Intelligence and Automation
• The State of Artificial Intelligence in India and How Far is Too Far?
• 6 Ways Artificial Intelligence Will Change Education in the 2020s

The 7 Best AI Tools for Programmers to Streamline Development in 2024

If you are a developer focused on efficiency and productivity, you should use AI tools that simplify your job. The AI Tools for Programmers give you the edge you need to win in the coding world. These tools will automate many recurring tasks and boost the code quality. Using these tools, you can help businesses cut expenses and provide workable code.

With numerous AI Tools for Programmers making rounds online, finding the best ones to revolutionize or streamline the development process is complex. No matter whether you are a professional programmer or a new one, we have listed the seven best AI Tools for Programmers.

Top 7 AI Tools for Programmers

2. github copilot, 6. mintlify, 6. alphacode, 7. code by sourcegraph, what to look for in ai tools for programmers, what is the best tool of all ai tools for programmers, faqs – ai tools for programmers.

Following are top 7 AI tools for programmers to streamline development

Tabnine is one of the best AI tools for programmers, and it helps developers boost productivity by automatically extracting the code and introducing workflow efficiency. The tab nine tool will predict the following line of code based on the provided syntax and context.

• Offer you a complete list of suggestions related to functions.
• Works on laptops, servers, desktops, and cloud.
• Support different languages such as Python, Go, Rust, and TypeScript.
• Complete all the code lines with just a single stroke.
• Easy to integrate with popular code editors such as Visual Studio code, eclipse, Android Studio, and IntelliJ.
• Developers will be able to train the data to receive tailored suggestions. Programmers can easily connect to the code repositories like GitHub or Bitbucket.
• Performance is not expected in some programming languages or frameworks with complicated syntax.
• When AI runs on local hardware, it consumes many resources over the cloud.
• Pro – free for 90 days- $12/month
• Enterprise: $39/month

Link: https://www.tabnine.com/

Github Copilot will automatically generate the code made by Github and OpenAI. It is one of the most powerful AI tools for programmers trained with billions of code lines to translate natural language requests and generate code recommendations in various languages.

• Offer extensions to IDEs such as Visual Studio Code, JetBrains, Neovim, and Visual Studio.
• Suggest the code and complete functions while you are coding.
• Offer you with auto-complete suggestions in no time.
• Identify the errors in the code and fix the bugs briskly.
• Support multiple programming languages like Javascript, C++, Python, and Go.
• Support real-time collaboration with other developers to communicate easily about the project.
• Sometimes, these AI Tools for Programmers will suggest efficient and correct code.
• Code correction will need human corrections.
• Team: $3.67/month
• Enterprise: $19.25/month

Link: https://github.com/features/copilot

AskCodi is one of the best AI tools for programmers and is designed to improve the coding experience. The clear-cut translate app will convert natural language into programming languages like Ruby, Python, C++, Java, and PHP.

• It supports a lot of IDE extensions, such as VScode and Pycharm.
• It offers a lot of code snippets in different languages, such as English, German, and Polish.
• It is easy to share the code snippets with others.
• Analyze the code to fix bugs and improve the code performance and security.
• Support many programming languages such as JavaScript, Python, C++, Java, and Ruby
• Use NLP-powered AI capabilities to answer questions related to the software development projects and offer suggestions.
• New users complain about the learning curve.
• The response time for providing the code would be late.
• Ultimate: $24.99/month
• Premium:$8.33/month

Link : https://www.askcodi.com/

Scribe is one of the best AI tools for programmers for software development , and it will use AI to create, debug, and control the whole process document. Its rich user interface lets developers record the workflow and procedures in real-time, develop guides and tutorials, and visualize data to comprehend better.

• It is easy to customize the text, steps, and images.
• Access the tool through the Chrome extension and desktop application.
• Come with robust enterprise-level security and a lot of controls
• It integrates with many tools, such as IDEs or AI tools for developers.
• Programmers can record the workflows and procedures.
• Create comprehensive manuals that will be a valuable resource for developers and others.
• Does not support many AI integrations
• Errors will occasionally be encountered while using this tool.
• Pro personal:$23/month
• Pro team: $12/month
• Enterprise: Custom

Link : https://scribehow.com/

Mintlify will use AI to generate code and play a key role in saving developers time dealing with technical tasks. Using this one of the AI tools for programmers, you can search for the code for the document already in place and generate this document to explain each line of code.

• Automated documentation features will let developers create documents that are easier to search efficiently.
• Developers can improve the documentation by making this document readable.
• It is easy for developers to track documentation patterns and improve accessibility.
• Integrate with Github to sync the documents and code repositories.
• These AI Tools for Programmers support many programming languages to generate the code in the language you want.
• Comprehend the code context with this tool accurately.
• It does not generate the document for all the files in one go.
• It could have added a lot of programming languages to generate the code in those languages.
• Startup: $120/month
• Growth: $400/month

Link : https://mintlify.com/

Alpha code will auto-generate code for the natural language problems you stated in your own words. It is one of the AI tools for programmers that is best for development as it helps solve many problems that involve logic, reasoning, algorithms, and coding.

• Transformer-based language models will be used to generate code using this one of the best tools for developers.
• It helps to correct the errors in the code.
• It is trained on the GitHub datasets to complete programming tasks.
• Generate the code in various programming languages like C++, Python, Haskell, and Java.
• Organize the samples into different clusters to create custom test cases.
• Available for free to use on GitHub.
• Many times, the tool will offer you free code snippets.
• Needs to handle issues related to tags and ratings efficiently.

Pricing: Free

Link : https://alphacode.ai/en/

Code by Sourcegraph is one of the best AI tools for programmers to help developers debug and automate the code. The AI chatbot will thoroughly analyze the code base and offer you accurate answers to queries.

• These AI Tools for Programmers supports programming languages like Javascript, Typescript, Python, and Go.
• It detects and helps you resolve the bugs in the code.
• Generate code snippets and generate functions based on the commands.
• Allow developers to access context-based predictions, reducing the time it takes to write code.
• Debug the code and will answer the queries in no time.
• Generate accurate code snippets by providing appropriate instructions.
• The UX of the tool could have been improved for a better user experience.
• Support from other languages would help the developers generate code for different languages.
• Pro: $9/month
• Enterprise: $19/month

Link: https://sourcegraph.com/

The following are the features you should look for while buying AI tools for developer s:

1. Completion of Code

It would help if you looked for tools that offer code suggestions and auto-complete the rest of the code to expedite the development process and keep errors at bay.

2. Review Coding Capabilities

You must access the tool and look for the one to review and analyze the code for its quality, style, and critical issues.

3. Security Features

Ensure you use the tool with security features to safeguard the data and code from users accessing it unauthorizedly.

4. Suggest Functions

You can look for tools that will suggest functions and methods, optimize the code quality, and boost its efficiency.

5. Perform Unit Testing

You need to check whether the tool supports automated code and unit testing to improve the software quality.

6. Different Integration Options

It would help if you looked for a tool to integrate with third-party programs and apps for development.

7. Support Multiple Programming Languages

Look for a tool that supports programming languages you work with and can understand natural language to generate the code based on it.

Out of all the AI tools for programmers, Github Copilot is the best one since it has an artificial intelligence engine that is ideal for coders and developers to generate code snippets in no time just by providing natural prompts. It is also compatible to use with different IDEs. This best developer companion lets you give the prompt to generate the code strings. It also offers different recommendations based on the project context and style conventions.

AI tools for programmers are a breakthrough in the technology world. With many AI tools for development available in the market, developers are using them to boost the coding experience and complete coding tasks briskly. However, the tools available will only give a helping hand but are only a partial replacement for the job of a developer. As the coding world evolves, these AI tools for programmers are crucial in generating efficient code that executes flawlessly.

Can beginners use AI tools for development?

Yes, the AI development tools are for beginners, too, since every line of code generated by this tool comes with explanations for developers to understand thoroughly.

Will AI tools replace human developers?

AI tools for developers will only replace human developers if human intelligence is required to write the code and humans have better problem-solving skills than those tools.

Are the AI tools for development highly secure to use?

Yes, the AI coding tools available are highly secure for developers to use responsibly. However, it is recommended that sensitive data and information be kept private from the tool despite meeting security standards.

How will AI coding tools promote collaboration between developers?

The generative AI tools for developers will promote better collaboration by offering real-time suggestions and letting multiple developers work on the same code simultaneously.

Can I use AI tools for development to build applications without any prior coding knowledge?

Yes, everyone can generate code snippets and build apps. These tools will also help people with no coding knowledge to produce software. It uses machine learning techniques to generate code based on the user-specified functionality.

Please Login to comment...

Similar reads.

• Artificial Intelligence
• Trending News
• How to Organize Your Digital Files with Cloud Storage and Automation
• 10 Best Blender Alternatives for 3D Modeling in 2024
• How to Transfer Photos From iPhone to iPhone
• What are Tiktok AI Avatars?
• 30 OOPs Interview Questions and Answers (2024)

Improve your Coding Skills with Practice

What kind of Experience do you want to share?