dev tools for safari

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

• The Best Tech Gifts Under $100
• Traveling? Get These Gadgets!

How to Activate the iPhone Debug Console or Web Inspector

Use Safari's web developer tools to study problematic websites

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

What to Know

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

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

Activate Web Inspector on Your iPhone or Other iOS Device

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

Open the iPhone  Settings  menu.

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

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

Scroll to the bottom of the page and select Advanced .

Move the Web Inspector toggle switch to the On position.

Connect Your iOS Device to Safari on a Mac

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

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

Select the  Advanced  tab.

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

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

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

What Is Web Inspector?

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

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

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

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

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

Get the Latest Tech News Delivered Every Day

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

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 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

How To Get Developer Tools In Safari

• Software & Applications
• Browsers & Extensions

Introduction

Safari, the sleek and innovative web browser developed by Apple, is known for its user-friendly interface and seamless integration with Apple devices. While Safari offers a smooth browsing experience for users, it also provides powerful tools for web developers to create and optimize websites and web applications. One of the key features that sets Safari apart is its built-in Developer Tools, which offer a comprehensive set of resources for web development and debugging.

Whether you are a seasoned web developer or just starting out, having access to Safari's Developer Tools can significantly enhance your workflow and productivity. These tools enable you to inspect and modify web page elements, debug JavaScript, analyze network activity, and optimize website performance, among other capabilities. By leveraging Safari's Developer Tools, you can gain valuable insights into the structure and behavior of web pages, identify and troubleshoot issues, and fine-tune the performance of your web projects.

In this article, we will delve into the process of enabling and utilizing Safari's Developer Tools for web development. We will explore the various features and functionalities offered by these tools, providing practical insights and tips for leveraging them effectively. Whether you are a web developer, designer, or simply curious about the inner workings of websites, this guide will equip you with the knowledge and skills to harness the full potential of Safari's Developer Tools.

Let's embark on a journey to uncover the hidden gems of Safari's Developer Tools and unlock the power of web development within the confines of this innovative browser . Whether you're seeking to enhance your web development skills or gain a deeper understanding of web technologies, Safari's Developer Tools are your gateway to a world of possibilities. So, without further ado, let's dive into the realm of web development with Safari as our trusted companion.

Enabling Developer Tools in Safari

Enabling Safari's Developer Tools is a straightforward process that unlocks a treasure trove of functionalities for web development. Whether you're a seasoned developer or a curious enthusiast, accessing these tools can significantly enhance your web development experience within the Safari browser .

To enable Developer Tools in Safari, follow these simple steps:

Open Safari Preferences : Launch Safari and navigate to the "Safari" menu located in the top-left corner of the screen. From the drop-down menu, select "Preferences."

Access Advanced Settings : In the Preferences window, click on the "Advanced" tab. This will reveal a set of advanced settings for Safari.

Enable Develop Menu : Within the Advanced tab, locate the option labeled "Show Develop menu in menu bar" and ensure that it is checked. This action activates the Develop menu, which houses a plethora of web development tools and features.

Verify the Development Menu : After enabling the Develop menu, you should see it appear in the menu bar at the top of the screen, alongside other Safari menu options.

Once you have completed these steps, Safari's Developer Tools will be readily accessible, empowering you to delve into the intricacies of web development and gain valuable insights into the structure and behavior of web pages.

By enabling Developer Tools in Safari, you gain access to a suite of powerful resources that can elevate your web development capabilities. From inspecting and modifying web page elements to analyzing network activity and optimizing website performance, Safari's Developer Tools provide a comprehensive toolkit for enhancing your web projects.

With Developer Tools at your fingertips, you are poised to embark on an enriching journey through the realms of web development, armed with the tools and insights needed to create, optimize, and fine-tune captivating web experiences within the Safari browser.

Using Developer Tools for Web Development

Safari's Developer Tools offer a robust set of features and functionalities that empower web developers to streamline their workflows, troubleshoot issues, and optimize web projects. By leveraging these tools, developers can gain valuable insights into the inner workings of web pages and applications, ultimately enhancing the user experience and performance of their creations.

Inspecting and Modifying Web Page Elements

One of the fundamental capabilities of Safari's Developer Tools is the ability to inspect and modify web page elements in real time. By right-clicking on any element within a web page and selecting "Inspect Element," developers can access a detailed view of the HTML and CSS properties associated with that element. This feature is invaluable for understanding the structure and styling of web pages, allowing developers to make on-the-fly adjustments and see the immediate impact on the page layout.

Debugging JavaScript and Analyzing Console Output

Safari's Developer Tools include a robust JavaScript debugger, enabling developers to identify and resolve issues within their JavaScript code. By setting breakpoints, stepping through code, and examining variable values, developers can pinpoint and troubleshoot errors, ultimately improving the functionality and reliability of their web applications. Additionally, the console within Developer Tools provides a space for logging messages, errors, and warnings, offering valuable insights into the runtime behavior of JavaScript code.

Network Analysis and Performance Testing

Another powerful aspect of Safari's Developer Tools is the network panel, which allows developers to analyze network activity and optimize the performance of web pages. By monitoring network requests, loading times, and resource sizes, developers can identify opportunities for optimization, such as minimizing file sizes, leveraging caching strategies, and reducing unnecessary network requests. This capability is instrumental in creating fast and efficient web experiences for users across various devices and network conditions.

Modifying and Testing CSS in Real Time

Safari's Developer Tools provide a seamless environment for modifying and testing CSS styles directly within the browser. Developers can experiment with different styles, colors, and layouts, observing the immediate effects on web page elements. This real-time feedback accelerates the design and development process, allowing developers to fine-tune the visual presentation of their websites with precision and agility.

Leveraging Additional Tools and Resources

In addition to the aforementioned features, Safari's Developer Tools offer a wide array of resources, including the Elements panel for inspecting and editing the DOM, the Application panel for managing web storage and service workers, and the Security panel for identifying potential security vulnerabilities within web applications. These tools collectively provide a comprehensive toolkit for web developers, empowering them to create secure, performant, and visually compelling web experiences.

By harnessing the power of Safari's Developer Tools, web developers can elevate their skills, optimize their workflows, and deliver exceptional web experiences to users. Whether you are fine-tuning the layout of a responsive website, debugging complex JavaScript interactions, or optimizing the performance of a web application, Safari's Developer Tools are your indispensable companions in the journey of web development.

Inspecting and Debugging Web Pages

Inspecting and debugging web pages is a fundamental aspect of web development, and Safari's Developer Tools provide a robust set of features for this purpose. When it comes to understanding the structure and behavior of web pages, as well as identifying and resolving issues, the inspection and debugging capabilities within Safari's Developer Tools are indispensable.

Inspecting Web Page Elements

The ability to inspect web page elements is a cornerstone of Safari's Developer Tools. By right-clicking on any element within a web page and selecting "Inspect Element," developers can access a detailed view of the HTML and CSS properties associated with that element. This feature provides a comprehensive breakdown of the selected element, including its position, dimensions, styling, and any associated event listeners. This level of insight allows developers to gain a deep understanding of the composition and layout of web page elements, facilitating precise modifications and optimizations.

Modifying Web Page Elements in Real Time

In addition to inspecting web page elements, Safari's Developer Tools enable developers to modify elements in real time. By directly editing the HTML and CSS properties of elements within the Elements panel, developers can experiment with different styles, content, and layouts, observing the immediate impact on the web page. This real-time editing capability is invaluable for fine-tuning the visual presentation of web pages and rapidly iterating on design and layout changes.

Safari's Developer Tools include a powerful JavaScript debugger, which allows developers to identify and resolve issues within their JavaScript code. By setting breakpoints, stepping through code, and examining variable values, developers can pinpoint and troubleshoot errors, ultimately improving the functionality and reliability of their web applications. Additionally, the console within Developer Tools provides a space for logging messages, errors, and warnings, offering valuable insights into the runtime behavior of JavaScript code. This feature is instrumental in diagnosing and addressing JavaScript-related issues, ensuring the smooth execution of interactive and dynamic web elements.

In essence, Safari's Developer Tools provide a comprehensive suite of capabilities for inspecting and debugging web pages. From gaining insights into the structure and styling of web page elements to identifying and resolving JavaScript-related issues, these tools empower developers to create, optimize, and fine-tune web experiences with precision and efficiency. By leveraging the inspection and debugging features within Safari's Developer Tools, developers can elevate their skills, streamline their workflows, and deliver exceptional web experiences to users.

Modifying and Testing CSS and JavaScript

Modifying and testing CSS and JavaScript is a crucial aspect of web development, and Safari's Developer Tools offer a seamless environment for making real-time adjustments and testing code changes. Whether you're refining the visual presentation of a website or fine-tuning the functionality of interactive elements, Safari's Developer Tools provide a comprehensive toolkit for working with CSS and JavaScript.

Real-time CSS Modifications

Safari's Developer Tools allow developers to modify CSS styles directly within the browser, providing immediate feedback on the visual appearance of web page elements. By accessing the Styles panel, developers can experiment with different styles, colors, and layouts, observing the instant effects on the web page. This real-time editing capability accelerates the design and development process, enabling developers to iterate on visual enhancements with agility and precision.

Testing JavaScript Code

In addition to CSS modifications, Safari's Developer Tools facilitate the testing and debugging of JavaScript code. The JavaScript debugger within Developer Tools empowers developers to set breakpoints, step through code, and inspect variable values, facilitating the identification and resolution of JavaScript-related issues. By leveraging the debugging capabilities, developers can ensure the reliability and functionality of interactive elements, such as dynamic user interfaces and client-side interactions.

Performance Optimization

Furthermore, Safari's Developer Tools provide insights into the performance of CSS and JavaScript code. Developers can analyze the impact of CSS styles and JavaScript functions on web page loading times and responsiveness, identifying opportunities for optimization. By monitoring the execution of CSS and JavaScript, developers can fine-tune code to enhance the overall performance and user experience of web applications.

In summary, Safari's Developer Tools offer a comprehensive suite of features for modifying and testing CSS and JavaScript. From real-time CSS adjustments to JavaScript debugging and performance optimization, these tools empower developers to create visually compelling and functionally robust web experiences. By harnessing the capabilities within Safari's Developer Tools, developers can refine the presentation and behavior of web pages with precision, ensuring an exceptional user experience across various devices and platforms.

Network analysis and performance testing are critical components of web development, and Safari's Developer Tools provide a robust set of features for evaluating the network activity and optimizing the performance of web pages and applications.

Monitoring Network Activity

Safari's Developer Tools offer a comprehensive Network panel, which allows developers to monitor and analyze the network activity associated with a web page. This includes tracking network requests, such as HTTP requests for resources like HTML, CSS, JavaScript, images, and other assets. By examining the network waterfall, developers can gain insights into the timing and sequence of network requests, identifying potential bottlenecks and optimizing the loading process.

Resource Size and Loading Times

The Network panel within Safari's Developer Tools provides detailed information about the size and loading times of individual resources. Developers can assess the impact of resource sizes on web page performance, identifying opportunities to optimize assets for faster loading. By analyzing the loading times of resources, developers can prioritize critical content and streamline the delivery of essential assets, ultimately enhancing the overall user experience.

Safari's Developer Tools empower developers to optimize the performance of web pages by identifying and addressing potential performance bottlenecks. By leveraging the insights from the Network panel, developers can implement strategies to minimize file sizes, leverage browser caching, and reduce unnecessary network requests. Additionally, developers can assess the efficiency of third-party integrations and external resources, ensuring that web pages load quickly and responsively across various devices and network conditions.

Network Throttling

One of the standout features of Safari's Developer Tools is the ability to simulate different network conditions using network throttling. Developers can emulate various network environments, such as 3G , 4G, or slower connections, to assess the performance of web pages under different bandwidth constraints. This capability enables developers to optimize web pages for a wide range of network conditions, ensuring a consistent and reliable user experience for diverse audiences.

In essence, Safari's Developer Tools provide a comprehensive suite of capabilities for network analysis and performance testing. By monitoring network activity, assessing resource sizes and loading times, optimizing web page performance, and simulating network conditions, developers can create fast, efficient, and responsive web experiences. Leveraging the insights and tools within Safari's Developer Tools, developers can fine-tune the performance of web pages, ultimately delivering exceptional user experiences in the ever-evolving landscape of the web.

In conclusion, Safari's Developer Tools serve as a gateway to the intricate world of web development, offering a rich array of features and functionalities that empower developers to create, optimize, and fine-tune web experiences with precision and efficiency. By enabling and leveraging these tools, developers gain valuable insights into the structure, behavior, and performance of web pages, ultimately enhancing the user experience and functionality of their web projects.

From inspecting and modifying web page elements to debugging JavaScript, analyzing network activity, and optimizing performance, Safari's Developer Tools provide a comprehensive toolkit for addressing the diverse challenges of web development. The seamless integration of real-time editing, debugging, and performance analysis within the browser environment streamlines the development process, allowing developers to iterate on design and functionality with agility and precision.

Furthermore, the ability to simulate network conditions and assess the impact of resource sizes on web page performance equips developers with the tools needed to create fast, efficient, and responsive web experiences across various devices and network environments. This capability is instrumental in ensuring a consistent and reliable user experience, regardless of the user's location or network conditions.

By harnessing the power of Safari's Developer Tools, developers can elevate their skills, optimize their workflows, and deliver exceptional web experiences to users. Whether it's refining the visual presentation of a website, debugging complex JavaScript interactions, or optimizing the performance of a web application, Safari's Developer Tools are indispensable companions in the journey of web development.

In essence, Safari's Developer Tools not only provide a window into the inner workings of web pages but also empower developers to craft immersive, performant, and visually compelling web experiences. As the web continues to evolve, Safari's Developer Tools stand as a testament to Apple's commitment to providing developers with the resources and capabilities needed to thrive in the dynamic landscape of web development.

In the ever-expanding digital ecosystem, Safari's Developer Tools remain a steadfast ally for developers, offering a robust platform for innovation, creativity, and excellence in web development. Whether you're a seasoned developer or an aspiring enthusiast, Safari's Developer Tools invite you to embark on a journey of discovery and mastery, shaping the future of the web one line of code at a time.

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

• Fintechs and Traditional Banks Navigating the Future of Financial Services
• AI Writing How Its Changing the Way We Create Content

Related Post

How to find the best midjourney alternative in 2024: a guide to ai anime generators, 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 On IPhone Safari

How To Install Safari On Apple TV 4

How To Debug In Safari

How To Reset Safari 9.0

Why Does Safari Not Work On My Mac

How To Enable Webgl On Safari

How To Post On Instagram From Mac Safari

How To Download Video On Safari

Recent stories.

Fintechs and Traditional Banks: Navigating the Future of Financial Services

AI Writing: How It’s Changing the Way We Create Content

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

Navigation Menu

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%

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?

Optimizing WebKit & Safari for Speedometer 3.0

Apr 10, 2024

by Alan Baradlay, Antti Koivisto, Matt Woodrow, Patrick Angle, Ryosuke Niwa, Vitor Ribeiro Roriz, Wenson Hsieh, and Yusuke Suzuki

The introduction of Speedometer 3.0 is a major step forward in making the web faster for all, and allowing Web developers to make websites and web apps that were not previously possible. In this article, we explore ways the WebKit team made performance optimizations in WebKit and Safari based on the Speedometer 3.0 benchmark.

In order to make these improvements, we made an extensive use of our performance testing infrastructure. It’s integrated with our continuous integration , and provides the capability to schedule A/B tests. This allows engineers to quickly test out performance optimizations and catch new performance regressions.

Improving Tools

Proper tooling support is the key to identifying and addressing performance bottlenecks. We defined new internal JSON format for JavaScriptCore sampling profiler output to dump and process them offline. It includes a script which processes and generates analysis of hot functions and hot byte codes for JavaScriptCore. We also added FlameGraph generation tool for the dumped sampling profiler output which visualizes performance bottlenecks. In addition, we added support for JITDump generation on Darwin platforms to dump JIT related information during execution. And we improved generated JITDump information for easy use as well. These tooling improvements allowed us to quickly identify bottlenecks across Speedometer 3.0.

Improving JavaScriptCore

Revising megamorphic inline cache (ic).

Megamorphic IC offers faster property access when one property access site observes many different object types and/or property names. We observed that some frameworks such as React contain a megamorphic property access. This led us to continuously improve JavaScriptCore’s megamorphic property access optimizations: expanding put megamorphic IC, adding megamorphic IC for the in operation, and adding generic improvements for megamorphic IC.

Revising Call IC

Call IC offers faster function calls by caching call targets inline. We redesigned Call IC and we integrated two different architectures into different tiers of Just-In-Time (JIT) compilers. Lower level tiers use Call IC without any JIT code generation and the highest level tier uses JIT code generatiton with the fastest Call IC. There is a tradeoff between code generation time and code efficiency, and JavaScriptCore performs a balancing act between them to achieve the best performance across different tiers.

Optimizing JSON

Speedometer 3.0 also presented new optimization opportunities to our JSON implementations as they contain more non-ASCII characters than before. We made our fast JSON stringifier work for unicode characters . We also analyzed profile data carefully and made JSON.parse faster than ever .

Adjusting Inlining Heuristics

There are many tradeoffs when inlining functions in JavaScript. For example, inline functions can more aggressively increase the total bytecode size and may cause memory bandwidth to become a new bottleneck. The amount of instruction cache available in CPU can also influence how effective a given inlining strategy is. And the calculus of these tradeoffs change over time as we make more improvements to JavaScriptCore such as adding new bytecode instruction and changes to DFG’s numerous optimization phases. We took the release of the new Speedometer 3.0 benchmark as an opportunity to adjust inlining heuristics based on data collected in modern Apple silicon Macs with the latest JavaScriptCore.

Make JIT Code Destruction Lazy

Due to complicated conditions, JavaScriptCore eagerly destroyed CodeBlock and JIT code when GC detects they are dead. Since these destructions are costly, they should be delayed and processed while the browser is idle. We made changes so that they are now destroyed lazily, during idle time in most cases.

Opportunistic Sweeping and Garbage Collection

In addition, we noticed that a significant amount of time goes into performing garbage collection and incremental sweeping across all subtests in both Speedometer 2.1 and 3.0. In particular, if a subtest allocated a large number of JavaScript objects on the heap, we would often spend a significant amount of time in subsequent subtests collecting these objects. This had several effects:

• Increasing synchronous time intervals on many subtests due to on-demand sweeping and garbage collection when hitting heap size limits.
• Increasing asynchronous time intervals on many subtests due to asynchronous garbage collection or timer-based incremental sweeping triggering immediately after the synchronous timing interval.
• Increasing overall variance depending on whether timer-based incremental sweeping and garbage collection would fall in the synchronous or asynchronous timing windows of any given subtest.

At a high level, we realized that some of this work could be performed opportunistically in between rendering updates — that is, during idle time — instead of triggering in the middle of subtests. To achieve this, we introduced a new mechanism in WebCore to provide hints to JavaScriptCore to opportunistically perform scheduled work after the previous rendering update has completed until a given deadline (determined by the estimated remaining time until the next rendering update). The opportunistic task scheduler also accounts for imminently scheduled zero delay timers or pending requestAnimationFrame callbacks : if it observes either, it’s less likely to schedule opportunistic work in order to avoid interference with imminent script execution. We currently perform a couple types of opportunistically scheduled tasks:

• Incremental Sweeping : Prior to the opportunistic task scheduler, incremental sweeping in JavaScriptCore was automatically triggered by a periodically scheduled 100 ms timer. This had the effect of occasionally triggering incremental sweeping during asynchronous timing intervals, but also wasn’t aggressive enough to prevent on-demand sweeping in the middle of script execution. Now that JavaScriptCore is knowledgable about when to opportunistically schedule tasks, it can instead perform the majority of incremental sweeping in between rendering updates while there aren’t imminently scheduled timers. The process of sweeping is also granular to each marked block, which allows us to halt opportunistic sweeping early if we’re about to exceed the deadline for the next estimated rendering update.
• Garbage Collection : By tracking the amount of time spent performing garbage collection in previous cycles, we’re able to roughly estimate the amount of time needed to perform the next garbage collection based on the number of bytes visited or allocated since the last cycle. If the remaining duration for performing opportunistically scheduled tasks is longer than this estimated garbage collection duration, we immediately perform either an Eden collection or full garbage collection . Furthermore, we integrated activity-based garbage collections into this new scheme to schedule them at appropriate timing.

Overall, this strategy yields a 6.5% total improvement in Speedometer 3.0 *, decreasing the time spent in every subtest by a significant margin, and a 6.9% total improvement in Speedometer 2.1 *, significantly decreasing the time spent in nearly all subtests.

* macOS 14.4, MacBook Air (M2, 2022)

Various Miscellaneous Optimizations for Real World Use Cases

We extensively reviewed all Speedometer 3.0 subtests and did many optimizations for realistic use cases. The examples include but are not limited to: faster Object.assign with empty objects , improving object spread performance , and so on.

Improving DOM code

Improving DOM code is Speedometer’s namesake, and that’s exactly what we did. For example, we now store the NodeType in the Node object itself instead of relying on a virtual function call. We also made DOMParser use a fast parser, improved its support of li elements , and made DOMParser not construct a redundant DocumentFragment . Together, these changes improved TodoMVC-JavaScript-ES5 by ~20%. We also eliminated O(n^2) behavior in the fast parser for about ~0.5% overall progression in Speedometer 3.0. We also made input elements construct their user-agent shadow tree lazily during construction and cloning , the latter of which is new in Speedometer 3.0 due to web components and Lit tests. We devirtualized many functions and inlined more functions to reduce the function call overheads. We carefully reviewed performance profile data and removed inefficiency in hot paths like repeated reparsing of the same URLs .

Improving Layout and Rendering

We landed a number of important optimizations in our layout and rendering code. First off, most type checks performed on RenderObject are now done using an inline enum class instead of virtual function calls , this alone is responsible for around ~0.7% of overall progression in Speedometer 3.0.

Improving Style Engine

We also optimized the way we compute the properties animated by Web Animations code. Previously, we were enumerating every animatable properties while resolving transition: all . We optimized this code to only enumerate affected properties. This was ~0.7% overall Speedometer 3.0 progression. Animating elements can now be resolved without fully recomputing their style unless necessary for correctness.

Speedometer 3.0 content, like many modern web sites, uses CSS custom properties extensively. We implemented significant optimizations to improve their performance. Most custom property references are now resolved via fast cache lookups, avoiding expensive style resolution time property parsing. Custom properties are now stored in a new hierarchical data structure that reduces memory usage as well.

One key component of WebKit styling performance is a cache (called “matched declarations cache”) that maps directly from a set of CSS declarations to the final element style, avoiding repeating expensive style building steps for identically styled elements. We significantly improved the hit rate of this cache.

We also improved styling performance of author shadow trees, allowing trees with identical styles to share style data more effectively.

Improving Inline Layout

We fixed a number of performance bottlenecks in inline layout engine as well. Eliminating complex text path in Editor-TipTap was a major ~7% overall improvement. To understand this optimization, WebKit has two different code paths for text layout: the simple text path, which uses low level font API to access raw font data, and the complex text path, which uses CoreText for complex shaping and ligatures. The simple text path is faster but it does not cover all the edge cases. The complex text path has full coverage but is slower than the simple text path.

Previously, we were taking the complex text path whenever a non-default value of font-feature or font-variant was used. This is because historically the simple text path wouldn’t support these operations. However, we noticed that the only feature of these still missing in the simple text path was font-variant-caps . By implementing font-variant-caps support for the simple text path , we allowed the simple text path to handle the benchmark content. This resulted in 4.5x improvement in Editor-TipTap subtest, and ~7% overall progression in Speedometer 3.0.

In addition to improving the handling of text content in WebKit, we also worked with CoreText team to avoid unnecessary work in laying out glyphs. This resulted in ~0.5% overall progression in Speedometer 3.0, and these performance gains will benefit not just WebKit but other frameworks and applications that use CoreText.

Improving SVG Layout

Another area we landed many optimizations for is SVG. Speedometer 3.0 contains a fair bit of SVG content in test cases such as React-Stockcharts-SVG. We were spending a lot of time computing the bounding box for repaint by creating GraphicsContext, applying all styles, and actually drawing strokes in CoreGraphics. Here, we adopted Blink ’s optimization to approximate bounding box and made ~6% improvement in React-Stockcharts-SVG subtest. We also eliminated O(n^2) algorithm in SVG text layout code, which made some SVG content load a lot quicker .

Improving IOSurface Cache Hit Rate

Another optimization we did involve improving the cache hit rate of IOSurface. An IOSurface is a bitmap image buffer we use to paint web contents into. Since creating this object is rather expensive, we have a cache of IOSurface objects based on their dimensions. We observed that the cache hit rate was rather low (~30%) so we increased the cache size from 64MB to 256MB on macOS and improved the cache hit rate by 2.7x to ~80%, improving the overall Speedometer 3.0 score by ~0.7%. In practice, this means lower latency for canvas operations and other painting operations.

Reducing Wait Time for GPU Process

Previously, we required a synchronous IPC call from the Web Process to the GPU process to determine which of the existing buffers had been released by CoreAnimation and was suitable to use for the next frame. We optimized this by having the GPUP just select (or allocate) an appropriate buffer, and direct all incoming drawing commands to the right destination without requiring any response. We also changed the delivery of any newly allocated IOSurface handles to go via a background helper thread , rather than blocking the Web Process’s main thread.

Improving Compositing

Updates to compositing layers are now batched , and flushed during rendering updates, rather than computed during every layout. This significantly reduces the cost of script-incurred layout flushes.

Improving Safari

In addition to optimizations we made in WebKit, there were a handful of optimizations for Safari as well.

Optimizing AutoFill Code

One area we looked at was Safari’s AutoFill code. Safari uses JavaScript to implement its AutoFill logic, and this execution time was showing up in the Speedometer 3.0 profile. We made this code significantly faster by waiting for the contents of the page to settle before performing some work for AutoFill. This includes coalescing handling of newly focused fields until after the page had finished loading when possible, and moving lower-priority work out of the critical path of loading and presenting the page for long-loading pages. This was responsible for ~13% progression in TodoMVC-React-Complex-DOM and ~1% progression in numerous other tests, improving the overall Speedometer 3.0 score by ~0.9%.

Profile Guided Optimizations

In addition to making the above code changes, we also adjusted our profile-guided optimizations to take Speedometer 3.0 into account. This allowed us to improve the overall Speedometer 3.0 score by 1~1.6%. It’s worth noting that we observed an intricate interaction between making code changes and profile-guided optimizations. We sometimes don’t observe an immediate improvement in the overall Speedometer 3.0 score when we eliminate, or reduce the runtime cost of a particular code path until the daily update of profile-guided optimizations kicks. This is because the modified or newly added code has to benefit from profile-guided optimizations before it can show a measurable difference. In some cases, we even observed that a performance optimization initially results in a performance degradation until the profile-guided optimizations are updated.

With all these optimizations and dozens more, we were able to improve the overall Speedometer 3.0 score by ~60% between Safari 17.0 and Safari 17.4. Even though individual progressions were often less than 1%, over time, they all stacked up together to make a big difference. Because some of these optimizations also benefited Speedometer 2.1, Safari 17.4 is also ~13% faster than Safari 17.0 on Speedometer 2.1. We’re thrilled to deliver these performance improvements to our users allowing web developers to build websites and web apps that are more responsive and snappier than ever.

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

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

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

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

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

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

Get weekly top MacRumors stories in your inbox.

Top Rated Comments

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

Popular Stories

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

Apple Releases Open Source AI Models That Run On-Device

Apple Cuts Vision Pro Shipments as Demand Falls 'Sharply Beyond Expectations'

Apple Finally Plans to Release a Calculator App for iPad Later This Year

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

Next article.

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

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

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

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

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

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

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

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

Other Stories

10 hours ago by Joe Rossignol

14 hours ago by MacRumors Staff

1 day ago by Joe Rossignol

3 days ago by Tim Hardwick

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.

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• Chrome for Developers

New in Chrome 124

Here are the highlights in Chrome 124:

There are two new APIs that allow the declarative shadow DOM to be used from JavaScript.

• You can use streams in Web Sockets .
• View Transitions get a little better.
• And there's plenty more .

Want the full run down? Check out the Chrome 124 Release Notes .

Use declarative shadow DOM in JavaScript

setHTMLUnsafe() is similar to innerHTML , and lets you set the inner HTML of an element to the string provided. This helps when you have some HTML that includes a declarative shadow DOM, like this.

If you just use innerHTML , the browser won't parse it properly, and there's no shadow DOM. But with setHTMLUnsafe() , your shadow DOM is created, and the element is parsed as you'd expect.

The other API is parseHTMLUnsafe() , and it works similarly to DOMParser.parseFromString() .

Both of these APIs are unsafe , which means they don't do any input sanitization. So you'll want to make sure that whatever you feed them, is safe. In an upcoming release, we expect see a version that does provide sanitization of the input.

Finally, both of these APIs are already supported in the latest version of Firefox and Safari!

WebSocket Stream API

WebSockets are a great way to send data back and forth between the user's browser and the server without having to rely on polling. This is great for things like chat apps, where you want to deal with information as soon as it comes in.

But what if the data arrives faster than you can handle?

That's called back pressure, and can cause some serious headaches for you. Unfortunately, the WebSocket API doesn't have a nice way to deal with back pressure.

The WebSocket Stream API gives you the power of streams, and web sockets, which means back pressure can be applied without any extra cost.

Start by constructing a new WebSocketStream and passing it the URL of the WebSocket server.

Next, you wait for the connection to be opened, which results in a ReadableStream and a WritableStream . By calling the ReadableStream.getReader() method, you get a ReadableStreamDefaultReader which you can then read() data from until the stream is done.

To write data, call the WritableStream.getWriter() method, which gives you a WritableStreamDefaultWriter , that you can then write() data to.

View transitions improvements

I'm excited about the View Transitions features, and there are two new features in Chrome 124 designed to make view transitions easier.

The pageswap event is fired on a document's window object when a navigation will replace the document with a new document.

And document render-blocking which lets you block rendering of a document until the critical content has been parsed, ensuring a consistent first paint across all browsers.

Of course there's plenty more.

disallowReturnToOpener hints to the browser that it shouldn't show a button in the picture-in-picture window that allows the user to go back to the opener tab.

Keyboard-focusable scroll containers improves accessibility by making scroll containers focusable using sequential focus navigation.

And universal install allows users to install any page, even those not meeting the current PWA criteria .

Further reading

This covers only some key highlights. Check the following links for additional changes in Chrome 124.

• Chrome 124 Release Notes
• What's new in Chrome DevTools (124)
• ChromeStatus.com updates for Chrome 124
• Chromium source repository change list
• Chrome release calendar

To stay up to date, subscribe to the Chrome Developers YouTube channel , and you'll get an email notification whenever we launch a new video.

I'm Pete LePage, and as soon as Chrome 125 is released, we'll be right here to tell you what's new in Chrome!

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

Last updated 2024-04-16 UTC.