developer tools in safari shortcut

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

• Web Browser
• Google Chrome Browser
• Mozilla Firefox Browser
• Microsoft Edge Browser
• Apple Safari Browser
• Tor Browser
• Opera Browser
• DuckDuckGo Browser
• Brave Browser

Shortcuts for Safari Developer Tools

• How to use Safari for web development
• Top 10 Tools That Every Java Developer Should Know
• Keyboard Shortcuts for all Web Browser
• New Features of Microsoft Edge Developer Tools
• Keyboard Shortcuts for Firefox
• Sources Tab in Apple Safari Browser
• Developer Resources Tool in Microsoft Edge Browser
• IOS Developer Jobs in USA
• Uses of Chrome Developer Tools
• How to disable JavaScript in Chrome Developer Tools?
• React Developer Tools
• 15 Must Have JavaScript Tools For Developers
• 8 Tips and Tricks For JavaScript Developers
• Best No-Code Tools for Developers in 2024
• Debug Keyboard Shortcuts For Visual Studio Code
• 10 Best Tools For Front-End Web Development
• Visual Studio Code Shortcuts For Windows and Mac
• General Keyboard Shortcuts For Visual Studio Code
• How to Use Chrome Developer Tools for API Testing?
• How To Configure Amazon Route 53 In AWS
• Bash Scripting - If Statement
• How to Set Upstream Branch on Git?
• MVC Framework Introduction
• Comparable Interface in Java with Examples
• How to Embed PDF file using HTML ?
• Spring Boot - Sending Email via SMTP
• Best Way to Master Spring Boot – A Complete Roadmap
• How to upload image and Preview it using ReactJS ?
• Java Developer Learning Path – A Complete Roadmap

Safari Developer Tools are a big help for people who make websites. They provide features to check, fix, and improve web pages. Shortcuts are one of the best tools. They help you quickly and easily move through web development, making things faster.

Types of Shortcuts:

Table of Content

Navigation Shortcuts

Console shortcuts, debugger shortcuts, miscellaneous shortcuts, features of shortcuts.

• Inspect Element Shortcuts: Use quick keys to go fast through the DOM (Document Object Model) and check out how web parts are put together. Then, look closely at their structure for extra understanding of what’s going on in websites.
• Console Shortcuts: Use shortcuts to run JavaScript commands quickly, letting developers fix problems and test stuff using the console.
• Network Panel Shortcuts: Make checking network activities easier by using shortcuts to go through requests, answers and speed details.
• Source Code Shortcuts: Make fixing computer program errors easier by using quick ways to move through coding, put breakpoints and check what works.

Benefits of Shortcuts

• Time Efficiency: Shortcuts save time on boss tasks. They let builders do things fast and concentrate more important parts of building stuff.
• Enhanced Productivity: Developers can do more in less time. This makes them work faster and the development process smoother.
• Effortless Navigation: Shortcuts help you move easily between different parts of Developer Tools. This makes it feel smooth and easy to use.

How/When to use these Shortcuts?

• During Development: Add shortcuts to your daily tasks. This will assist you in tasks such as checking parts, solving coding issues and observing network actions quicker.
• Debugging Sessions: Shortcuts are really useful for fixing problems in code. They help programmers fast look at the code, slow it down in some spots and see things on a window called output for console.
• Performance Optimization: Shortcuts are your friends when trying to make a website work well. Use their power in the Network Panel to show performance dragons and make sure your users have a smooth experience.

Steps to Use/Implement

• Accessing Developer Tools: Enter the work area for making websites by right-clicking on your webpage, choosing “Inspect Element,” and going into the “Develop” list. You can also open the dev tools in safari by simply pressing option+command+c.
• Navigating Panels: Shortcuts are your special spells to move between different panels like Elements, Console, Network and Sources. Move smoothly through these areas like a skilled keyboard player.
• Inspecting Elements: Go to the core of your internet page using quick keys. Shine light on darkness with some easy button presses, looking carefully at different parts of the HTML like digital sleuth.
• Executing JavaScript: Use the Console Panel, your secret door to the world of JavaScript. Shortcuts let you cast spells (do commands) easily. They turn your computer screen into a magic potion of great code wonders.
• Monitoring Network Activity: In the Network Panel, shortcuts help you move through digital traffic. Follow requests, look at answers and make your computer run better with just a press of the keyboard.

Real Life Application

Picture a developer trying to solve the puzzle of an annoying layout problem on a website. Our programmer turns into a digital Sherlock with the help of shortcuts. Shortcuts help check parts of the webpage, move through it and change looks quickly. This helps solve problems. Pictures or small moving pictures show how shortcuts are used step-by-step. This is very helpful in figuring things out practically.

Please Login to comment...

Similar reads.

• Geeks Premier League 2023
• Geeks Premier League
• Web Browsers

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

• React Native

How to show Safari’s Develop menu and Web Inspector

( 7 Articles )

April 25, 2022

If you’re a web developer, then there might be cases where you want to debug and improve your website (or web app) on Safari (which takes approximately 19% of browser market share worldwide).

The steps below show you how to show Safari’s Develop menu and its web inspector tool.

1. Click on Safari on the top menu bar, then select Preferences…

2. Select the Advanced tab then check the checkbox labeled with “Show Develop menu in menu bar”:

3. Now the Develop menu appears. Open a website, click on Develop , and select Show Web Inspector (or Connect Web Inspector ) from the drop-down menu:

You can also use shortcuts: Command + Option + I .

Here’re Safari Dev Tools for web developers:

That’s it. Further reading:

• How to Easily Upgrade Node.js in macOS
• How to install Redis on macOS, Windows, and Ubuntu

Xcode: Change Derived Data and Archives directories

• VS Code: Opening Multiple Windows/Projects Simultaneously
• VS Code: Prevent Single-Child Folders from Being Merged

Happy coding and have a nice day!

Related Articles

How to Flush DNS Cache in macOS Monterey, Big Sur, and Catalina

May 7, 2022

How to check your macOS version from Terminal

How to Download and Install an iOS Simulator in Xcode

How to check if Homebrew is installed on your Mac

April 20, 2022

How to completely uninstall Logitech Options on Mac

Download Free

How to Use Developer Tools on Safari

It's free and super easy to set up

If you're a web developer or designer working on Mac, Safari is a browser that you cannot ignore. It's the most used browser on Mac, and it is fully featured with all the necessary tools to help developers design and debug their web pages. Most importantly, Safari has a built-in set of developer tools that are available from the moment you install it, making it convenient and efficient for developers to find, inspect, and modify elements of their webpage. In this article, we'll look at how to use developer tools on Safari, step by step.

Enabling Developer Tools in Safari

Developing websites and applications requires the use of developer tools, which allow you to inspect and modify code, debug errors, and optimize performance. If you're using Safari as your browser, you'll need to enable developer tools before you can start using them. Here's how:

Accessing Safari Preferences

To access Safari Preferences, you have two options. You can either click on Safari from the top menu bar and then click Preferences, or you can use the keyboard shortcut Command + , (comma). Either way, you'll end up in the same place.

Once you're in Safari Preferences, you'll see a variety of tabs at the top of the window. Click on the one that says "Advanced".

Activating the Develop Menu

In the Advanced tab, you'll see a checkbox that says "Show Develop menu in the menu bar". Check this box to enable the Develop menu.

Now that you've enabled the Develop menu, you'll see it in the top menu bar, between Bookmarks and Window. Click on it to see the various options available to you.

Some of the most commonly used options in the Develop menu include:

Inspect Element: This allows you to view and modify the HTML and CSS of a page.

Console: This displays any error messages or other output from the JavaScript console.

Network: This shows you the resources that are being loaded by the page, including images, scripts, and stylesheets.

Debugger: This lets you step through JavaScript code and set breakpoints to help you find and fix errors.

By using these developer tools, you'll be able to create more efficient and effective websites and applications. Happy developing!

Navigating the Developer Tools Interface

Once you have enabled developer tools, you can access them by clicking on the Develop menu and selecting Show Web Inspector. This will open the developer tool interface with several panels:

Elements Panel

The Elements panel is a powerful tool for web developers. It allows you to see the HTML and CSS for the currently selected element on the page. You can use this panel to select and inspect individual elements, modify page elements, and edit styles. You can even add new HTML elements and see how they affect the page layout. The Elements panel is an essential tool for anyone who wants to understand how a web page is constructed.

Network Panel

The Network panel is another important tool for web developers. It shows information about any requests made by the page, including the URL, status, size, and timing. This is useful for debugging performance issues and checking how a page loads. You can use the Network panel to identify slow-loading resources, optimize page speed, and troubleshoot network issues.

Sources Panel

The Sources panel shows you the JavaScript files associated with the page and allows you to debug them. You can set breakpoints, step through code, and inspect variables. This is useful for troubleshooting JavaScript errors and optimizing code performance. You can also use the Sources panel to edit JavaScript code and see how it affects the page behavior.

Timeline Panel

The Timeline panel shows you a timeline of how the page loads performance-wise. It can be used to identify slow-loading resources or laggy scripts. You can see exactly when each resource is loaded and how long it takes. The Timeline panel is a great tool for optimizing page speed and improving user experience.

Console Panel

The Console panel is where you can access the browser's JavaScript console. You can execute JavaScript code in the context of the page and view debug messages and errors. This is useful for troubleshooting JavaScript issues, testing code snippets, and experimenting with new features. You can also use the Console panel to log messages and interact with the page in real-time.

Storage Panel

The Storage panel shows you the various types of storage present on a page, such as cookies, local storage, and session storage. It can be used to debug issues related to handling client-side storage. You can view, edit, and delete storage data, as well as monitor storage usage. The Storage panel is a great tool for understanding how client-side storage works and how to optimize it.

Overall, the developer tools interface is a powerful set of tools that can help you understand and optimize your web pages. Whether you're a beginner or an experienced developer, these tools are essential for building high-quality web applications.

Inspecting and Modifying HTML and CSS

Selecting elements.

Using the Elements panel, you can select an HTML element by clicking on it in the panel or directly on the page. When you select an element, you'll see its HTML and CSS properties on the right-hand side of the panel.

Editing HTML

You can easily edit the HTML of an element, either by double-clicking on the HTML code you want to change or by right-clicking on the HTML code and choosing "Edit as HTML". Then, you can make the necessary changes and save them.

Modifying CSS Styles

Similarly, you can modify CSS styles of an element in the Styles section of the panel. To add a new style, click the "+ New Style Rule" button. To modify an existing style, simply click on it and make the necessary changes.

Adding and Removing Classes

You can also add or remove classes from an element in the Elements panel. To add a class, select the element and add the class name in the "class" field. To remove a class, simply delete its name from the "class" field.

In conclusion, Safari's developer tools are an essential toolset for designers and web developers. They offer a wide range of features that make debugging and designing a webpage accessible and efficient. With this article, you should have a basic understanding of how to use developer tools on Safari. Experiment with the tools and explore their full potential to make your web development experience more productive and enjoyable.

Let's set you up !

Working on the web!

Student Tips

Startup Tools

Browser Glossary

Browser Tips

Safari User Guide

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

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

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

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

Open Safari for me

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

Learn To Convert Scanned Documents Into Editable Text With OCR

Top mini split air conditioner for summer, related post, comfortable and luxurious family life | zero gravity massage chair, when are the halo awards 2024, what is the best halo hair extension, 5 best elegoo mars 3d printer for 2024, 11 amazing flashforge 3d printer creator pro for 2024, 5 amazing formlabs form 2 3d printer for 2024, related posts.

How To Inspect On IPhone Safari

How To Enable Inspect In Safari

How To Inspect Page On Safari

How To Open Developer Tools On Safari

How To Change Location In Safari

How To Inspect In Safari On IPad

How To See Source Code In Safari

How To Inspect On Safari IPhone

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

Unleashing Young Geniuses: How Lingokids Makes Learning a Blast!

• 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 Open Safari Developer Tools & Enable Mobile View Mode

John on May 12, 2021

In this tutorial, we will learn how to open the Safari developer console and enable mobile view for responsive web development.

How to Enable Safari Developer Tools

If you don't have developer tools enabled in Safari, you will need to do this before the console can be opened by using the following steps:

• From the main menu go to Safari > Preferences (or use the CMD + , keyboard shortcut.)
• Go to the Advanced tab.
• Check "Show Developer menu in menu bar"

Open the Safari Developer Console

Now open the developer console in responsive mode by going to the menu and selecting Develop > Enter Responsive Design Mode :

Alternatively, use the keyboard shortcut CTRL + CMD + R to enter responsive developer mode.

Now you can work on your website in a variety of different mobile device screen sizes by selecting them at the top of the page:

Related Tutorials

How to Stop DDOS Attacks & Prevent Future Downtime

How to Enable Night Light Mode on Windows 10

How to View Desktop Site on iPhone with Safari

How to Use Grep Command to Search Files in Linux

How to Find Words on a Page using Safari on iPhone

How to Clear & Save Disk Storage Space on a Mac

Safari developer tools developer console, Inspect options

• Mar 6, 2024

# Why Are Safari Dev Tools Required?

In web application development, web developers need to test and debug functionality across different browsers. Chrome, Firefox, and Safari are among the most commonly used browsers.

Safari, developed by Apple, is a popular web browser.

Sometimes, functionality works in Chrome but not in other browsers like Safari. Developers need to debug the code to identify the root issue. All browsers provide developer tools for code debugging.

# Configuring Web Developer Tools in Safari Browser

To enable developer tools:

• Go to Safari -> Preferences -> Advanced Tab.
• Check the Show Developer menu in the menu bar option.

Once enabled, the Develop menu appears in the browser’s menu bar.

Develop menu is enabled in the menu of a browser as follows

# Inspecting Elements in the Safari Browser

The Web Inspector is a crucial developer tool that offers various tabs to inspect frontend resources such as HTML, CSS, JavaScript, and the performance of network requests, including load times and console log messages. You can also inspect DOM elements.

To access the Web Inspector:

• Go to the Develop menu.
• Select the Show Web Inspector option.
• Alternatively, use the shortcut Ctrl+Alt+I to open the inspector window within Safari.

You can also open this inspect tool in a new window using a docking feature as below.

# Displaying Error Console Feature in Safari Browser

You can enable the error console feature using either the Develop menu or the shortcut Ctrl+Alt+C . This feature highlights broken elements and error messages in red on web pages, aiding in code debugging. Error messages are displayed with line numbers and helpful hints for issue resolution.

# How to Preserve Log in Safari Developer Tools?

By default, Safari’s log is reset during page navigation. However, you can preserve the log:

In older versions: Select Keep Log on Navigation. In the latest versions: Use the preserve log option. In Safari 14 and newer versions, you can find the preserve log option in the Network tab of the Developer console.

For older Safari versions, right-click on the console area and select Keep Log on Navigation.

You are using an outdated browser. Please upgrade your browser to improve your experience.

Apple to unveil AI-enabled Safari browser alongside new operating systems

Safari getting new AI tools in iOS 18

The software — expected to debut as Safari 18 later in 2024 — is currently undergoing evaluation alongside internal builds of Apple's next-generation operating system updates, namely iOS 18 and macOS 15, according to people familiar with the matter. Should all of the new features make it to the release candidate stage, users will be treated to a new user interface (UI) for customizing popular page controls, a "Web eraser" feature, and AI-driven content summarization tools.

Intelligent Search - AI-enhanced browsing and text summarization

Engineers evaluating the latest builds of Safari 18 can find a toggle for the new page controls menu within the browser's address bar. The menu consolidates — and provides quick access to — old and new page control tools, among them being the browsers new "Intelligent Search" feature.

This feature is not automatically enabled in test builds of Safari 18 and instead requires manual activation from the page controls menu. Once enabled, it's believed the tool leverages Apple's on-device AI technology — specifically the Ajax language-learning model — to identify topics and key phrases within a webpage for which to base the summarization.

In selecting key phrases, the Apple's LLM software identifies sentences that provide explanations or describe the structure of objects, depending on the text in question. Words repeated within a text and key sentences are recognized as text topics.

These early indications suggest Apple is striving to deliver text summarization alongside Safari 18 later this year, though the exact implementation of this feature remains fuzzy.

Apple's text summarization features could be a response to rival generative AI tools, such as OpenAI's ChatGPT. But Apple's on-device models and technologies like Private Relay could make the experience much more secure for users. Intelligent Search is also likely to be the same AI browser assistant that one X user hinted at a couple of weeks back.

Web Eraser for better content-blocking

Also accessible from the new page controls menu is a feature Apple is testing called "Web Eraser." As its name would imply, it's designed to allow users to remove, or erase, specific portions of web pages, according to people familiar with the feature.

The feature is expected to build upon existing privacy features within Safari and will allow users to erase unwanted content from any webpage of their choosing. Users will have the option to erase banner ads, images, text or even entire page sections, all with relative ease.

The erasure is said to be persistent, rather than limited to a browsing session. This means that Safari will remember the changes even after the original tab or window has been closed.

When visiting a web page with previously erased content, Safari will inform the user that the page has been modified to reflect their desired changes. The browser will also give the user the option to revert changes and restore the webpage to its initial, unaltered state.

As for where Apple got the inspiration for Web Eraser, the company could have Sherlocked the feature from the third-party app 1Blocker. The application features a similar way of erasing ads, where users would tap ads to make them disappear.

Updated UI will move key tools into one easy location

The new page controls menu referenced throughout this article will attempt to offer Safari 18 users quick and easy access to several options previously located across different menus and the Share Sheet. Running on pre-release versions of macOS 15, for instance, the menu also "pulls in the Aa" menu common on existing iPadOS versions of the browser. These include zoom options, webpage settings for privacy controls, content blocking options, extension shortcuts, and access to the new AI and erasure tools.

These various options existed previously on macOS, but were found by navigating through the Safari settings menu. Having all of these controls in one central location in the Address Bar will make these options more discoverable for end users. Other options like on-page text search and reader mode are also in this menu.

This all suggests Apple intends to unite the iPadOS and macOS Safari UI paradigms when it unveils its new OS releases during its Worldwide Developers Conference in June.

AI-enhanced Visual Lookup feature could be available in 2025

Simultaneously, Apple is also working on a much more powerful visual search feature scheduled for integration sometime in 2025 that will allow users obtain information on consumer products when browsing through images. People familiar with the tool say it's similar to the Visual Lookup feature, through which Siri can identify plants, pets and landmarks from photos.

Visual Search could be implemented as a system-wide feature. So, instead of surfacing search results in the Photos app, the user may be able to use Visual Search directly in Safari by selecting an image.

Given development of this tool is in the earlier stages, it remains unclear how Apple will ultimately go about implementing it. It also remains to be seen whether or not the feature will make it through internal testing.

The iPhone maker has expressed significant interest in artificial intelligence and more recently published research related to on-device language learning models. This goes hand in hand with widespread rumors about several other AI-powered software features, many of which are expected to make their debut later this year with iOS 18.

Another big year for Safari

From its inception, Safari was always meant to rival existing web browsers.

Safari was originally added to macOS as a means of replacing Microsoft's Internet Explorer for Mac, which was the default browser. Over the years, the app made its way to the iPhone , and has since received various upgrades over the years.

More recent versions of Safari provide users with personalized web suggestions, and allow for greater privacy protection with features such as iCloud Private Relay.

This latest set of enhancements only serves to better position Safari against the competition, in an ever-increasing landscape of generative AI tools and third-party ad-blockers.

While Apple tests many such features during different development stages, it is important to remember that not all of them make it to release. Apple has been known to delay features or cancel them entirely, so there's always a chance we may not see these new Safari features after all.

Along with Safari 18 and its associated improvements, we should also see a revamped Calculator with Math Notes make its way to iPadOS 18. Freeform Scenes and Adaptive Voice Shortcuts are new OS features, which are also expected to debut later this year.

Apple is expected to introduce various AI-related enhancements as part of iOS 18 and macOS 15, both of which should be announced at the company's annual WWDC on June 10.

"As for where Apple got the inspiration for Web Eraser, the company could have Sherlocked the feature from the third-party app 1Blocker. The application features a similar way of erasing ads, where users would tap ads to make them disappear." They may also have been inspired by Simplified Page....

As long as I can turn it off/hide it they can knock themselves out. 

Will the web eraser feature remove pop up videos, such as the ones that appear on this site?

I use the 'Reader' function in Safari quite a bit, but sometimes it doesn't work very well. Seems like something that AI could help make better. 

Web ads suck but how else do you think your favorite websites will stay in business? Are you prepared to pay a subscription to every site? I doubt it…

Top Stories

Save up to $350 on every Apple M3 MacBook Pro, plus get up to $80 off AppleCare

iPhone 16 Pro: what to expect from Apple's fall 2024 flagship phone

Beats Solo 4 headphones review: Great audio quality and features

An inside look at Apple's various internal iOS variants that aid development

New iPad Air & iPad Pro models are coming soon - what to expect

Featured deals.

Final day: Sam's Club membership drops to $14, the best price ever

Latest exclusives.

Apple's iOS 18 AI will be on-device preserving privacy, and not server-side

Apple's macOS 15 to get rare cognitive boost via Project GreyParrot

Apple Notes in iOS 18 looks to up the ante with Microsoft OneNote

Latest comparisons.

M3 15-inch MacBook Air vs M3 14-inch MacBook Pro — Ultimate buyer's guide

M3 MacBook Air vs M1 MacBook Air — Compared

M3 MacBook Air vs M2 MacBook Air — Compared

Latest news.

'Assassin's Creed Mirage' sneaks onto iPhone, iPad on June 10

Apple gamers can get ready to hit the streets of Baghdad in "Assassin's Creed Mirage," as the Ubisoft title will be available on select iPhone and iPad models this June.

Apple issues its fourth round of developer betas

The fourth round of developer betas for Apple's current operating systems has arrived, with new builds of iOS 17.5 and others now available for testing.

Apple distributes fourth visionOS 1.2 developer beta

Owners of the Apple Vision Pro who are also in the developer beta can now download and install the fourth test build of visionOS 1.2.

Amazon crushes it with $179 AirPods Pro 2, $299 Apple Watch Series 9 deals

Amazon has issued fresh price cuts on Apple AirPods Pro 2 with USB-C and Apple Watch styles, delivering the cheapest prices of the year.

iPhone users try telling their bosses the alarm didn't go off

An unknown number of iPhone users have been reporting that their alarms may go off on time, but without making a sound, so it's not their fault they're late at all.

iPhone 16 may come in new color-infused green

A leaker claims to have seen what Apple's rumored green color-infused coating for the iPhone 16 and maybe the iPhone 16 Pro looks like.

The new Beats Solo 4 announced on Tuesday is probably the best choice for people wanting near-premium headphones in the Apple ecosystem without dealing with nosebleed prices.

New Beats Solo Buds offers budget-friendly audio in a tiny case

Apple subsidiary Beats by Dre has added to its wireless earbuds lineup with the Beats Solo Buds, offering a budget option to consumers.

Apple has poached dozens of Google AI experts for its Zurich lab

Apple's Zurich Vision Lab has moved on from the Apple Car and has been poaching Google staff to work on the future of Apple's AI products.

What to expect in iOS 18: AI, new look, redesigned stock apps, and more

The releases of iOS 18 and iPadOS 18 is shaping up to be Apple's biggest OS refresh in a decade. On top of expected machine learning and AI advancements, the stock apps and overall look will be getting a makeover.

Latest Videos

Latest reviews.

Unistellar Odyssey Pro review: Unlock pro-level astronomy with your iPhone from your backyard

Ugreen DXP8800 Plus network attached storage review: Good hardware, beta software

Espresso 17 Pro review: Magnetic & modular portable Mac monitor

{{ title }}

{{ summary }}

Safari Web Inspector Guide

• Table of Contents
• Jump To…
• Download Sample Code

Retired Document

Important: This document no longer represents the most current version of Safari developer tools. Links to downloads and other resources may no longer be valid. For new documentation on Safari Web Inspector, please visit Safari Developer Help .

Keyboard Shortcuts

There are several keyboard commands that boost productivity when working in Web Inspector.

Navigation Shortcuts

Dom tree shortcuts, console shortcuts, debugger shortcuts, miscellaneous shortcuts.

Copyright © 2018 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2018-02-07