safari developer tools extension

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.

Safari Developer Tools: The Complete Guide for Web Developers

Introduction to safari developer tools.

Safari is one of the major web browsers along with Chrome, Firefox, and Edge. As an Apple product, it comes pre-installed on Macs and iOS devices. Over the years, Safari has evolved to include robust developer tools accessible from the Develop menu. These built-in tools provide web developers with capabilities for debugging JavaScript, inspecting CSS, monitoring network requests, analyzing performance, auditing accessibility, and more.

Safari's developer tools are especially useful for testing and debugging web apps specifically within the Safari browser on macOS and iOS. They allow you to inspect cross-browser compatibility issues that may arise during development.

In this comprehensive guide, we'll explore the key features of Safari's developer tools and how to use them for front-end web development. Whether you are just getting started or looking to optimize your debugging workflow, you'll find tips and examples to help improve your process. Let's take a high-level look at what we'll cover:

• Using the JavaScript debugger to set breakpoints, inspect scope and objects, profile code performance, and log errors/warnings
• Inspecting and modifying CSS styles applied to page elements in real-time
• Monitoring network requests and analyzing load performance with Waterfall charts
• Throttling CPU and network to simulate mobile devices and slow connections
• Auditing for accessibility issues like color contrast, focus order, ARIA roles
• Testing responsive design across multiple device sizes and orientations
• Integrating with Xcode tools for advanced Swift/Obj-C debugging
• Additional tips like saving element inspection settings, keyboard shortcuts, and more

By the end, you'll have a solid understanding of how to leverage Safari developer tools in your web projects and debug more efficiently. Let's get started!

Debugging JavaScript with Safari Developer Tools

The JavaScript debugger is one of the most powerful features of Safari dev tools. It allows you to pause code execution at any point and step through your JavaScript line-by-line.

To start debugging, open the Sources tab and set breakpoints by clicking line numbers in your scripts. As you interact with your page, execution will pause when a breakpoint is hit. You can then step over, step into, or step out of functions and examine the current state.

For example, you can use the debugger to identify exactly where a promise-based function is failing by stepping through the promise callbacks line-by-line until you encounter the error.

In the Scope pane, you can inspect variable values in the current closure or parent scopes. The Call Stack shows the sequence of function calls. Object properties can be expanded in the Scope pane for detailed analysis.

The JavaScript debugger is especially useful for debugging asynchronous code like promises, timers, and events. Set breakpoints within callbacks to pause execution at the right moment.

The Console allows you to log messages like values, errors, warnings, and custom output. Use console.log() strategically throughout your code to understand control flow. The Console also displays runtime errors and exceptions to identify bugs.

For performance profiling, the Timelines tab provides JavaScript profiling. It visualizes script activity over time to identify slow functions. This helps pinpoint optimization opportunities.

Inspecting and Editing CSS

Safari dev tools make CSS debugging painless. The Elements tab lists all styles applied to the selected element, including information like specificity and inheritance.

The Styles pane displays media query breakpoints allowing you to view the cascade and specificity at different viewport sizes. This helps debug responsive layout issues.

You can edit CSS rules live in the Styles pane and instantly see the changes reflected on the page without having to save and refresh. This rapid feedback loop allows quick iteration on styling issues.

The magnifying glass tool lets you visually inspect padding, margins, and other box model properties overlaid on the page. This helps debug complex layouts and positioning issues.

To test state changes, you can force elements into states like :hover , :focus , and :active from the Styles pane. This allows you to debug styles applied on interaction without needing to actually interact with the element.

The Coverage tab identifies unused CSS rules that can safely be removed to optimize page load size. It also shows which rules have the greatest impact on render performance.

Debugging Network Requests and Performance

Safari developer tools provide rich insights into network requests, page load performance, and optimization opportunities.

The Network tab logs all requests sent by the page along with details like HTTP headers, response bodies, times, and more. Requests are color coded by type and can be searched and filtered.

Waterfall charts visualize resource loading over time, making it easy to spot assets that delay page render. Performance metrics like First Meaningful Paint help quantify user experience.

To simulate slow network connections, you can throttle CPU or bandwidth. This allows you to debug on 3G, or even EDGE mobile connections right from your desktop.

Auditing for Accessibility

The Audit tab in Safari dev tools scans your page for common accessibility issues and standards compliance.

It checks for insufficient color contrast, missing ARIA roles and attributes, invalid HTML, and more. Each issue links to detailed references to help fix it.

You can also manually inspect if elements have logical focus order, are navigable via keyboard, and meet other requirements. The Accessibility Tree view outlines the semantic structure.

Safari's built-in Reader mode provides a quick way to experience your site through a screen reader. It strips away formatting and extra elements, allowing you to focus on content structure.

Running regular audits during development prevents major accessibility regressions down the road and ensures your site meets guidelines like WCAG 2.1 AA.

Simulating Mobile Devices with Responsive Design Mode

Responsive web design requires continuously testing across viewport sizes. Safari dev tools make this easy with Responsive Design Mode.

You can select preset device dimensions like iPhone, iPad, and desktop or enter custom sizes. Safari will resize to match those dimensions so you can view your responsive layouts.

For mobile testing, you can simulate touch events like pinch/zoom and swipe scrolling. This reveals any issues with touch targets or scroll performance.

Responsive Design Mode also allows flipping between portrait and landscape orientations. Test how your UI adapts to both modes during mobile use cases.

To access experimental features, enable the Safari Technology Preview for additional device simulation capabilities like user agent spoofing. This allows you to test in even more specific mobile scenarios.

Matching real device sizes while building responsive features ensures they'll work correctly across the vast device ecosystem. No more guessing at breakpoints!

Additional Tips and Tricks

Safari developer tools contain many handy power user features beyond the basics. Here are some tips to level up your skills:

• You can save and reapply custom element selection settings like force states, orientation, and device frames.
• Changes made in the Console and Sources tabs persist on reload so you can iteratively debug.
• The dev tools window can be docked to the bottom of the Safari window for more vertical space.
• Open multiple instances of dev tools to compare different pages side-by-side.
• Learn keyboard shortcuts for common debugging actions like pause, step over, log, etc.
• Enable the experimental features tab for tools like WebGL profiler, layer borders, and more.

Debugging Safari Extensions

If you build Safari extensions, enable extension debugging in Preferences > Advanced to load them unpacked.

This allows inspecting extension files, storage, dev tools console, and inter-process communication. You can debug injected scripts, content scripts, cross-origin messages, and more.

Integration with Xcode Developer Tools

For native iOS apps with web views, Safari dev tools integrate tightly with Xcode.

You can connect them to share cookies, caches, and other state. Set Xcode breakpoints in Swift or Obj-C that pause JavaScript execution in Safari tools.

The Xcode CPU profiler helps find JavaScript bottlenecks. Memory debugging, Energy Impact, and other Xcode tools provide additional low-level details when debugging Safari web views in iOS simulators and on physical devices.

Conclusion and Key Takeaways

Safari developer tools provide a robust feature set optimized for front-end web development. Their tight integration and ease of use can boost productivity.

Key strengths include the precise JavaScript debugger, real-time CSS manipulation, detailed network and performance analysis, thorough accessibility auditing, and accurate mobile simulation.

Web developers should consider integrating Safari dev tools into their broader workflows, especially for projects targeting Apple devices. They excel at responsive design testing and debugging native iOS web views.

While Safari dev tools may not be as fully-featured as competitors, their focus on web fundamentals like JavaScript, CSS, performance, and accessibility makes them very capable for many use cases.

With the tips, guides, and examples covered in this post, you should feel empowered to debug websites efficiently using Safari's built-in developer tools. They can help track down bugs faster, optimize performance, and build high-quality responsive experiences.

If you build developer tools for iOS or macOS, be sure to test them thoroughly with Safari developer tools during the launch process. The comprehensive debugging capabilities can help identify and resolve issues specific to Apple devices and browser engines. Consider submitting your app to DevHunt to get discovered by the developer community.

Related posts

• Master Chrome DevTools for Next-Level Web Development
• Unlock Chrome's Power with These Dev Tools
• Safari Developer Tools Help Debug Websites and Apps
• Dev Tools on Chrome - Your Web Debugging Swiss Army Knife

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

How to Use Email Blasts Marketing To Take Control of Your Market

Learn to convert scanned documents into editable text with ocr, related post, how to make stairs planet coaster, how to rotate camera in planet coaster, how to make a good roller coaster in planet coaster, where is the minecraft folder, how to update minecraft windows, how to update minecraft education edition, related posts.

How To Inspect Page On Safari

How To Change Location In Safari

How To Enable Inspect In Safari

How To Open Developer Tools On Safari

How To See Source Code In Safari

How To View Page Source On Safari

How To Inspect On IPhone Safari

How To Inspect On Safari IPhone

Recent stories.

Top Mini Split Air Conditioner For Summer

Comfortable and Luxurious Family Life | Zero Gravity Massage Chair

Fintechs and Traditional Banks: Navigating the Future of Financial Services

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

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

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

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

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.

• Stream Your Favorite Sports
• Where to Watch WNBA Games

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 Change the Default Search Engine in Chrome for iOS
• What Is Safari?
• How to Inspect an Element on a Mac
• How to Use Web Browser Developer Tools
• How to Disable JavaScript in Safari for iPhone
• How to Clear Search History on iPhone
• 10 Hidden Features in macOS Sonoma
• How to View HTML Source in Safari
• How to Manage History and Browsing Data on iPhone
• How to Change Your Homepage in Safari
• How to Manage Cookies in the Safari Browser
• How to Reset Safari to Default Settings
• How to Clear Private Data, Caches, and Cookies on Mac

Safari User Guide

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

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

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

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

Open Safari for me

May 16th 2024

iOS Today 703

Safari extensions worth downloading.

1Blocker, Browser Note, Keyword Search

In this episode of iOS Today, Mikah Sargent and Rosemary Orchard dive into the world of Safari extensions, discussing a variety of handy tools that can enhance your browsing experience on iPhone, iPad, and Mac. From content blockers to custom search engines, the duo explores the benefits and potential drawbacks of these powerful add-ons. Additionally, Rosemary tackles a Shortcuts Corner question about switching Apple Watch faces using Siri.

Safari Extensions:

• Browser Note: A simple extension that allows you to stick virtual post-it notes on websites, reminding you of important information when you revisit the page.
• Keyword Search: An extension that enables custom search engines for various websites, allowing you to quickly search Amazon, DuckDuckGo, and even TWiT.tv right from Safari's address bar.
• 1Blocker: A powerful content blocker that prevents ads and trackers from loading on web pages, potentially speeding up your browsing experience and protecting your privacy.
• Redirect Web for Safari: An extension that lets you create custom redirect rules for websites, ensuring you always end up on the correct version of a site (e.g., old.reddit.com instead of www.reddit.com).
• PayPal Honey: A controversial but money-saving extension that automatically finds and applies coupons and deals as you shop online.
• Vinegar and Baking Soda: Two extensions that work together to improve your video watching experience by replacing the native video player controls on YouTube and other video sites with iOS's native controls.
• Opener: While not technically a Safari extension, this app allows you to choose which app opens when you click on a link, giving you more control over your browsing experience.

Shortcuts Corner:

• Doug asks how to switch Apple Watch faces using Siri without having to confirm the action on his watch when his iPhone is locked.
• Rosemary walks through the process of ensuring the shortcut has the necessary permissions to run when the device is locked and troubleshoots potential issues Doug may be facing.
• If the "Allow Running When Locked" option is missing, Rosemary suggests resetting the shortcut's privacy settings or recreating the shortcut from scratch.

Want access to the video version and exclusive features? Become a member of Club TWiT today! https://twit.tv/clubtwit

Club TWiT members can discuss this episode and leave feedback in the Club TWiT Discord .

You can also contribute to iOS Today by sending an email to [email protected] .

• Browser Note
• Keyword Search
• Redirect Web for Safari
• Userscripts
• PayPal Honey: Coupons, Rewards
• Baking Soda - Tube Cleaner
• Vinegar - Tube Cleaner
• Opener ‒ open links in apps

Contact iOS Today at [email protected] .

Subscribe to audio

Subscribe to video.

Download Options

(Right-click and Save As... to download)

WPWeb Infotech

Years of Avg. Experience

Happy Customers

Clients Worldwide

Completed Projects

Success Score on Upwork

WP Plugins Launched

Client Retention Rate

• Testimonials
• Wall of Fame
• Engagement Models

Best Browser for Web Developers: Find the Best

6 Minutes to read

• Last Updated On May 16, 2024

Table of Contents

Here’s a scenario. You’ve used the best web development tools to build a high-quality website . Now it’s time to bring it to life for the users to see and interact with. That’s where web browsers come in. Browsers act like interpreters, translating your code into the visual language users experience.

So our professional web developers use a variety of browsers to ensure the site looks, renders, and functions perfectly across the web. But which would be the best web browser for your project? Well, our experts have devised this guide to explain the selection criteria and our picks for the best browsers.

Let’s begin by discussing what makes a browser good for a web developer.

What Makes a Browser Best for Web Developers?

For web developers, the ideal browser isn’t just about smooth browsing. It should be a developer’s need for specific tools. Here are some key factors that make a browser shine for web development:

• Developer Tools: The availability and quality of built-in developer tools are crucial. A browser with developer tools, such as Chrome’s DevTools , can enhance a developer’s productivity. These tools provide features like debugging, performance monitoring, and network analysis. So it’s easy to build and troubleshoot web applications.
• Compatibility and Standards Support: A good browser for web development should follow web standards and offer broad compatibility. So the developers can create consistent websites across various browsers and devices.
• Performance: Speed and efficiency are crucial for web developers. A browser that loads pages quickly and uses minimal resources can help developers work more efficiently. Fast performance is particularly vital for testing and iterating on web applications.
• Extension Ecosystem: A rich ecosystem of extensions and plugins can enhance a browser’s functionality for web developers. Extensions like ad blockers and code validators can streamline development tasks and improve productivity.
• Security and Privacy Features: Security is vital, especially when handling sensitive information or deploying web applications. A browser that prioritizes security with features like built-in protection and regular security updates allows secure deployment.
• Cross-platform Support: Web developers often work across different OS and devices. The browser should offer consistent features across platforms for a seamless development experience.

By considering these factors, developers can identify the browser that best suits their needs. An ideal browser is a combination of developer tools, compatibility, rich extension, and cross-platform availability. You can consult with our dedicated web experts to get an idea on the best browsers for your project.

Want to create the best websites for your project?

Best browsers for web developers.

There isn’t one single best browser for web developers. The ideal choice depends on your workflow, priorities, and the type of development you do. Here’s a breakdown of some popular options, highlighting their features and benefits for web development:

Firefox Developer Edition

Built upon the powerful Firefox engine ( Quantum ), the Firefox Developer Edition is a specialized version built for web development. It comes pre-loaded with developer tools, eliminating the need for additional installations. This edition also prioritizes user privacy by offering enhanced controls compared to the basic version.

• Built-in DevTools Powerhouse: Inspect and edit HTML, CSS, and JavaScript directly in the browser. Debug code and analyze website performance for optimal speed.
• Multi-tasking Made Easy: Separate profiles keep your development environment organized and isolated from your regular browsing.
• Ready to Debug Out of the Box: Browser debugging, a dark theme, and a developer toolbar are pre-enabled for immediate use.
• Highly Customizable: Tailor the browser interface and functionality to your specific development needs.
• Enhanced Animation Inspector: Fine-tune and analyze web animations frame-by-frame for smooth execution.
• Privacy-focused Development: Ideal for developers who value strong privacy protections.
• Cross-browser Communication: Debug and test creations across different browsers.

Google Chrome

Developed by Google, Chrome is one of the world’s most popular browsers, with a massive user base that covers more than 60% of all web users. This widespread use makes Chrome a crucial testing ground for web developers to ensure their websites function flawlessly for major internet users.

• Built-in Developer Tools: Google Chrome offers a robust set of developer tools known as Chrome DevTools. These tools allow developers to debug, edit, and profile web applications directly within the browser.
• Extensions and Plugins: Chrome has a vast library of extensions and plugins available through the Web Store. These extensions can enhance productivity by adding new functionalities to the browser.
• Integration with Google Services: Chrome integrates seamlessly with other services, such as Drive and Cloud. So developers can access and manage their files easily.
• Widespread Compatibility: Ensure your website functions well for the majority of users due to Chrome’s high market share.
• Powerful Development Tools: DevTools offer a comprehensive set of features for debugging, performance optimization, and code analysis.
• Extensive Extension Library: Find extensions to customize your development environment and streamline specific tasks.

Brave is a privacy-focused browser based on the Chromium engine. It prioritizes user privacy by blocking ads and trackers by default. This can be particularly beneficial for developers who value a distraction-free environment and want to avoid intrusive tracking while working on web projects.

• Built-in Ad Blocker: Brave comes with a built-in ad blocker that blocks ads providing a faster and more private browsing experience.
• Brave Shields: Brave Shields block ads, trackers, and malicious scripts, enhancing privacy and security while browsing.
• Brave Rewards: It allows users to earn Basic Attention Tokens (BAT) by viewing privacy-respecting ads. Users can then tip their favorite content creators or websites.
• Brave Sync: Brave Sync allows users to sync bookmarks, passwords, and other browsing data across devices, ensuring a seamless browsing experience.
• Built on Chromium: Brave is built on the Chromium engine, which provides compatibility with modern web standards to Chrome users.

Apple Safari

Developed by Apple, Safari is the default browser on all Apple devices, including iPhones, iPads, and Macs. The dominance within the Apple ecosystem makes Safari an essential testing platform for web developers. Safari offers a clean interface that seamlessly integrates with the broader Apple ecosystem.

• Responsive Design Mode: Safari includes a responsive design mode that allows developers to test and preview websites across different screen sizes. 
• Intelligent Tracking Prevention: It helps protect user privacy by blocking tracking cookies and other methods used by advertisers to track users across websites.
• Web Technologies Support: Also supports the latest web technologies, such as WebRTC and WebAssembly , to create rich and interactive web applications.
• Essential for Apple Device Testing: Crucial for ensuring website functionality and responsiveness on iPhones, iPads, and Macs.
• Built-in Developer Tools: Provides necessary debugging and inspection features for efficient development.
• Clean Interface: Offers a minimalist and user-friendly interface that integrates well with the Apple ecosystem.

Microsoft Edge

Microsoft Edge transitioned to a Chromium-based engine, ensuring wider compatibility with modern web standards and frameworks. Plus, Edge incorporates a unique feature called “Sleeping Tabs” that helps conserve system resources by putting inactive tabs to sleep.

• Collections: It has a Collections feature that allows users to collect content from the web, making it easier to research and manage information for projects.
• Immersive Reader: Immersive Reader mode improves the readability of web pages by removing distractions and providing a more focused reading experience. 
• Web Capture: Edge allows users to take screenshots of web pages and add annotations, helping users to capture and share information more effectively.
• Built-in Microsoft Defender SmartScreen: Edge includes built-in Microsoft Defender SmartScreen, which helps protect users from phishing and malware attacks.
• Integration with Microsoft Services: It integrates seamlessly with Microsoft services such as Microsoft 365 and Azure, providing users with better user experience.
• Modern Development Tools: Offers a comprehensive set of features for debugging, performance optimization, and code analysis.
• Wider Compatibility: Chromium base ensures your website works well across different browsers.
• Improved Resource Management: The Sleeping Tabs feature helps maintain system performance while working with multiple tabs.

SeaMonkey is an all-in-one internet application suite. It combines a web browser, email client, newsgroup client, and Internet Relay Chat (IRC) into a single program. While not as widely used, SeaMonkey offers a unique set of features, particularly for a more integrated development environment.

• All-in-One Suite: It includes a web browser, email client, newsgroup client, IRC chat client, and HTML editor, providing users with a comprehensive internet suite.
• Browser: SeaMonkey is based on the Mozilla Firefox browser, providing users a familiar browsing experience and compatibility with Firefox extensions.
• Email Client: It has a robust email client that supports multiple accounts, and advanced search capabilities, making it easy to manage and organize email.
• Newsgroup Client: SeaMonkey includes a newsgroup client that allows users to access and participate in newsgroups to  stay connected with online communities.
• IRC Chat Client: IRC chat client allows users to connect to IRC servers with others in real time, making it easy to communicate with others online.
• Integrated Development Environment: Provides a convenient all-in-one solution for browsing, development, and communication.
• Lightweight and Resource-efficient: It can be a good option for older computers or those with limited resources.
• Highly Customizable: Offers some flexibility in tailoring the user interface to your preferences.

Remember, the “best” browser often depends on your workflow and needs. Try to use a combination of browsers to ensure your website renders consistently across different platforms. You can consult with our web development company to get a better idea on the best browser.

FAQs on the Best Browsers for Web Developers

Choosing the right browser can vary for each developer as per their specific needs. The ideal browser is the one that offers facilities ranging from dev tools to high compatibility. But if you are seeking to build dynamic sites, hiring web development experts can help you bring your vision to reality.

After all, the best browser is just a tool; it’s the expertise that truly shapes the website. So, choose the right tool to make the development smooth, efficient, and optimal for site creation.

Need help with your web project?

Leave a comment Cancel reply

I give my consent to the storage and processing of my personal data as per Privacy Policy

Join 5296 Subscribers

Get exclusive access to new tips, articles & updates on Technology. It’s free!

Subscribe to Our Newsletter

Your Source for Web, eCommerce Development & Digital Marketing, news. updates, how-to's and trends delivered daily to your inbox.

Thank you for subscribing.

Something went wrong.

Thanks for Subscribing!

Follow these steps....

• Open your inbox
• Look for an email from WPWeb Infotech
• Click on the link in the email to confirm your subscription

Once you’ve confirmed your email address you’ll officially be part of our family.

Note: If you don’t receive our confirmation email within 5 minutes, please check your spam folder. The algorithm might not have recognized this new step in your forthcoming journey to take your business to newer heights.

By continuing to use this website you agree to our a Cookie Policy . Accept

UiPath Browser Automation 4+

Uipath extension for safari, screenshots, description.

It enables native detection of UI elements when designing automations for web applications using UiPath Studio Web. This extension is part of a solution and only works together with UiPath Studio Web or UiPath Assistant/Robot on macOS. To start using UiPath Studio Web, visit https://www.uipath.com/product/studio-web

Version 24.10.1

This update enhances stability and performance through several bug fixes.

App Privacy

The developer, UiPath Inc , indicated that the app’s privacy practices may include handling of data as described below. For more information, see the developer’s privacy policy .

Data Not Collected

The developer does not collect any data from this app.

Privacy practices may vary, for example, based on the features you use or your age. Learn More

Information

• Developer Website
• App Support
• Privacy Policy

More By This Developer

UiPath Orchestrator

UiPath Events

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

Improving content filtering in Manifest V3

Over the past year, we have been actively involved in discussions with the vendors behind several content blocking extensions around ways to improve the MV3 extensions platform. Based on these discussions, many of which took place in the WebExtensions Community Group ( WECG ) in collaboration with other browsers, we have been able to ship significant improvements.

More static rulesets

Sets of filter rules are usually grouped into lists. For example, a more generic list could contain rules applicable to all users while a more specific list may hide location-specific content that only some users wish to block. Until recently, we allowed each extension to offer users a choice of 50 lists (or “static rulesets”), and for 10 of these to be enabled simultaneously. In discussions with the community, extension developers provided convincing evidence showing this was too low for certain use cases. After looking at the performance of the API in Chrome with these discussions in mind, we are now allowing up to 50 to be enabled simultaneously. (Notably, this is significantly higher than the limit of 20 requested in the WECG.) We also allow for 100 rulesets in total. This is shipping in Chrome 120 and increasing the limits is supported by both Firefox and Safari who both provided early input on this proposal.

More dynamic rules

Most rules are “static” and ship with each update to an extension. However, to support more frequent updates and user-defined rules, extensions can add rules dynamically too, without their developers having to upload a new version of the extension to the Chrome Web Store.

When an extension can dynamically modify requests in ways that were not checked during Chrome Web Store review, this exposes users to risks of phishing or data theft. For example a redirect rule could be misused to inject affiliate links without consent.

Consequently, we only allowed extensions to add up to 5,000 rules which encouraged using this functionality sparingly and made it easier for us to detect abuse.

However, developers from extensions including AdGuard and Adblock Plus performed their own analysis and shared data that a higher limit would allow for more up to date rules and for users with a higher number of custom lists to migrate to Manifest V3. In fact, AdGuard reported that more than 2600 changes are made to popular lists each week, and of the five percent of users using custom filter lists, one in four of those users have a combined total of more than 5,000 dynamic rules across them ( source ). AdGuard noted this as a significant challenge for migrating their extension to Manifest V3 and we heard similar feedback from other content blockers.

We determined that some filter rules, such as those with an action of block or allow , are much safer and are less likely to be abused. They also happen to make up the large majority of ad block filter rules. Based on this, I drafted and shared a proposal in the Web Extensions Community Group to define a set of rules that we consider lower risk and allow up to 30,000 of these. We still keep an upper limit to avoid performance regressions.

This proposal was supported in the Web Extensions Community Group so we implemented it. Starting with Chrome 121, the higher limit of 30,000 rules applies to safe DNR rules, which we are defining as rules with an action of block , allow , allowAllRequests or upgradeScheme .

Based on the data shared by AdGuard, between 98 and 99 percent of their rules should benefit from this higher limit. Any remaining rules are still supported and can be added within the existing limit.

This is available in Chrome as the MAX_NUMBER_OF_DYNAMIC_RULES constant. The rule limit for all other dynamic net request rules stays at 5,000.

Reduced ruleset size

In Chrome 118, we changed the default value for the isUrlFilterCaseSensitive field to false based on feedback from the community. This field controls if a rule that filters by URL is case sensitive, and we learned that most developers had a different default in their extension. Consequently, the value had to be set many times over. By making this change developers are able to achieve significant size reductions on their rulesets.

What’s next?

We are committed to continuing to invest in the declarativeNetRequest API so we can support as many use cases as possible, and look forward to continuing to work with the community. In particular, we’d like to thank members of the WECG for their engagement, including AdGuard for sharing a significant amount of the data that drove this work, and all browser vendors who have all been a major part of designing this API.

We will continue to review the limits we have in place to make adjustments where needed. To support this, we plan to share some of the data we collected as part of this work in the near future. Additionally, we are working on adding additional capabilities like the ability to match against response headers, which is a common request we’ve seen from PDF viewer extensions. In all cases, we’ll continue to communicate our work, and use the Web Extensions Community Group regularly as a place to discuss ideas and align on what we’d like to look at next.

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 2023-11-15 UTC.

View in English

iOS 16.7.8 (20H343)

May 13, 2024

View downloads