safari web developer

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

Safari User Guide

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

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

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

If you don’t see the Develop menu in the menu bar, choose Safari > Preferences, click Advanced, then select “Show Develop menu in menu bar.”

Open Safari for me

View in English

Safari & Web

Get started with Apple Pay on the Web

Adding Apple Pay to your website elevates your customer experience. Learn how to present Apple Pay as a payment option, validate your merchant session, and authenticate and process payments. You'll also find out how to configure your environment, set up transactions using the Apple Pay demo site,...

Build and deploy Safari Extensions for iOS

Safari web extensions for iOS use standard web technologies to provide powerful browser customizations. Learn how you can build an extension that works for iPhone and iPad, and discover how you can publish your extension on the App Store.

Introducing Extensible Enterprise SSO

Single Sign-on ensures your enterprise can implement modern authentication methods without sacrificing ease of use. Learn how to use the Authentication Services framework to expose your redirect and credential SSO services in Safari and native apps on macOS Catalina, iPadOS 13, and iOS 13...

Web Inspector Walkthrough

• iOS, macOS, tvOS

Web Inspector is packed with features designed to make inspection, debugging and delivery of your web content a breeze. Get an overview of the latest features including major layouts, tabs, buttons, and other capabilities that make Web Inspector a powerful web development tool.

Using Web Inspector with tvOS Apps

• macOS, tvOS

With Web Inspector, you can debug web content on several Apple platforms, including tvOS. This video introduces you to Web Inspector's powerful debugging capabilities, and takes you through the features designed to accelerate debugging of TVML content in your tvOS app.

Ensuring Beautiful Rich Links

Website links received in Messages can be made vastly more inviting than a simple text URL. By providing small amounts of metadata in your web pages, links to your website can include rich content such as icons, images and even video. Learn how visitors to your website can share links that look...

Meet Safari for spatial computing

Discover the web for visionOS and learn how people can experience your web content in a whole new way. Explore the unique input model powering this platform and learn how you can optimize your website for spatial computing. We'll also share how emerging standards are helping shape 3D experiences...

What’s new in web apps

Discover web apps for Mac — a powerful way to experience your website from the Dock. Learn how you can customize your web app to give people the best experience when they add your site. We'll also share how to take advantage of push notifications and badging for web apps for Mac and Home Screen...

Rediscover Safari developer features

Get ready to explore Safari's rich set of tools for web developers and designers. Learn how you can inspect web content, find out about Responsive Design Mode and WebDriver, and get started with simulators and devices. We'll also show you how to pair with Vision Pro, make content inspectable in...

What’s new in CSS

Explore the latest advancements in CSS. Learn techniques and best practices for working with wide-gamut color, creating gorgeous typography, and writing simple and robust code. We'll also peer into the future and preview upcoming layout and typography features.

Explore media formats for the web

Learn about the latest image formats and video technologies supported in Safari 17. Discover how you can use JPEG XL, AVIF, and HEIC in your websites and experiences and learn how they differ from previous formats. We'll also show you how the Managed Media Source API draws less power than Media...

What’s new in Web Inspector

Web Inspector provides a powerful set of tools to debug and inspect web pages, web extensions, and WKWebViews on macOS, iOS and iPadOS. We'll share the latest updates, including improved typography inspection, editing tools for variable fonts, controls to emulate people's preferences, element...

What’s new in Safari extensions

Learn about the latest improvements to Safari extensions. We'll take you through new APIs, explore per-site permissions for Safari app extensions, and share how you can make sure your extensions work great in both Private Browsing and Profiles.

Meet WeatherKit

• iOS, macOS, tvOS, watchOS

WeatherKit offers valuable weather data for your apps and services to help people stay up to date on the latest conditions. Learn how to use Swift and REST APIs to access information about the current weather, 10-day hourly forecasts for temperature, expected precipitation, wind reports, the UV...

Meet Web Push for Safari

Bring better notifications to your websites and web apps in Safari on macOS with Web Push. We'll show you how you can remotely send notifications to people through the web standards-based combination of Push API, Notifications API, and Service Workers.

Meet Apple Maps Server APIs

Simplify your app's mapping architecture by implementing the Apple Maps stack across MapKit, MapKit JS, and Apple Maps Server APIs. Learn how these APIs can reduce network calls and increase power efficiency, which can help improve the overall performance of your app. We'll show you how to use...

What's new in Safari and WebKit

Explore the latest features in Safari and WebKit and learn how you can make better and more powerful websites. We'll take you on a tour through the latest updates to HTML, CSS enhancements, Web Inspector tooling, Web APIs, and more.

Meet passkeys

It's time for a security upgrade: Learn how to add support for passkeys to create a quick and easy sign in experience for people, all while offering a radical increase to account security. Passkeys are simple and strong credentials built to eliminate phishing attacks. We'll share how passkeys are...

Meet CKTool JS

Discover how you can manage and automate your iCloud containers using CKTool JS. We'll show you how to configure CKTool JS to manage your containers' schemas, modify records with ease, and manipulate data on the fly. We'll also explore how you can integrate CKTool JS into your automation and...

Replace CAPTCHAs with Private Access Tokens

Don't be captured by CAPTCHAs! Private Access Tokens are a powerful alternative that help you identify HTTP requests from legitimate devices and people without compromising their identity or personal information. We'll show you how your app and server can take advantage of this tool to add...

What’s new in Safari Web Extensions

Learn how you can use the latest improvements to Safari Web Extensions to create even better experiences for people browsing the web. We'll show you how to upgrade to manifest version 3, adopt the latest APIs for Web Extensions, and sync extensions across devices.

What's new in web accessibility

Discover techniques for building rich, accessible web apps with custom controls, SSML, and the dialog element. We'll discuss different assistive technologies and help you learn how to use them when testing the accessibility of your web apps.

Create Safari Web Inspector Extensions

Learn how to add your own tools directly into Web Inspector using the latest Web Extensions APIs. We'll show you how to create your own tab in Web Inspector, evaluate JavaScript in the inspected page, and use the result to help you troubleshoot and identify potential problems.

Enhance your Sign in with Apple experience

Learn how you can provide safe and fast authentication in your app using Sign in with Apple. We'll show you how you can upgrade password-based accounts into secure, single-tap login credentials, and explore how you can seamlessly handle changes to user sessions in your app. We'll also help you...

What's new in WKWebView

Explore the latest updates to WKWebView, our framework for incorporating web content into your app's interface. We'll show you how to use the JavaScript fullscreen API, explore CSS viewport units, and learn more about find interactions. We'll also take you through refinements to content blocking...

Explore Safari Web Extension improvements

Learn how you can extend Safari's functionality with Safari Web Extensions. We'll introduce you to the latest WebExtension APIs, explore non-persistent background page support — a particularly relevant topic if you're developing for iOS — and discover how you can use the Declarative Net Request...

Meet Safari Web Extensions on iOS

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

Explore WKWebView additions

Explore the latest updates to WKWebView. We'll show you how to use APIs to manipulate web content without JavaScript, explore delegates that can help with WebRTC and Downloads, and share how you can easily create a richer web experience within your app.

Adopt Quick Note

Learn how you can link your app to Quick Note and help people quickly connect your content to their notes — and their notes to your content. Discover how Quick Note recognizes and links to app content through NSUserActivity, and find out how you can adopt this API in your app. We'll take you...

Secure login with iCloud Keychain verification codes

Learn how you can support on-device verification codes in your app or website for a more secure sign-in experience. We'll explore the latest updates to the iCloud Keychain password manager and discover how verification codes, AutoFill, iCloud Keychain sync, and two-tap setup simplify the...

Move beyond passwords

Despite their prevalence, passwords inherently come with challenges that make them poorly suited to securing someone's online accounts. Learn more about the challenges passwords pose to modern security and how to move beyond them. Explore the next frontier in account security with...

Meet privacy-preserving ad attribution

Discover how you can measure your ad campaigns in apps and on the web without compromising privacy. We'll introduce you to Private Click Measurement and explore SKAdNetwork, which provides you with a more secure, private, and useful way to measure your app installs.

Discover Web Inspector improvements

Web Inspector provides the tools for you to understand and debug your web pages on macOS, iOS, and iPadOS. We'll take you through the latest features and improvements to Web Inspector, including a new overlay for inspecting CSS Grid containers on your pages, even more configurable breakpoints to...

Develop advanced web content

Develop in JavaScript, WebGL, or WebAssembly? Learn how the latest updates to Safari and WebKit — including language changes to class syntax — can help simplify your development process, enhance performance, and improve security. We'll explore several web APIs that can help provide better...

Build Mail app extensions

Meet MailKit: the best way to build amazing experiences on top of Mail. MailKit enables apps to easily and securely interact with the Mail app for macOS. We'll deep dive into the MailKit API, and show you how to create extensions for composing messages, message actions, secure email, and content...

Coordinate media playback in Safari with Group Activities

Create SharePlay experiences that people can enjoy on the web and in your companion app. Learn how you can use the Group Activities framework in combination with a companion website to bring SharePlay to Safari, letting people connect with each other for enjoyable group interactions — even if...

Design for Safari 15

Meet Safari 15: redesigned and ready to help people explore the web. Discover how you can approach designing websites and apps for Safari, and learn how to incorporate the tab bar in your designs. We'll also take you through features like Live Text and accessibility best practices, explore the...

Accelerate networking with HTTP/3 and QUIC

The web is changing, and the next major version of HTTP is here. Learn how HTTP/3 reduces latency and improves reliability for your app and discover how its underlying transport, QUIC, unlocks new innovations in your own custom protocols using new transport functionality and multi-streaming...

One-tap account security upgrades

When you adopt the Account Authentication Modification Extension, you can provide people with fast, easy account security upgrades to use Sign in with Apple and strong passwords in the iCloud Keychain Password Manager. We'll show you how to add these upgrade flows to your app with the Account...

Meet Safari Web Extensions

When you create a Safari Web Extension, you can help people get common online tasks done more quickly and efficiently. We'll show you how to build a new Safari Web Extension and host it on the App Store, as well as how to use the safari-web-extension-converter tool to migrate existing extensions...

Configure and link your App Clips

App Clips are small parts of an app that offer a streamlined, direct experience and help people get what they need at the right time. Learn how you can invoke an App Clip through real-world experiences like App Clip Codes, NFC, and QR codes, or have them appear digitally through apps like Maps or...

Broaden your reach with Siri Event Suggestions

• iOS, macOS, watchOS

Whether you're hosting event information in your app, on the web, or in an email, Siri Event Suggestions can help people keep track of their commitments — without compromising their privacy. We'll show you how to set up your reservations so that they automatically show up in the Calendar app and...

What's new for web developers

Explore the latest features and improvements for Safari and WebKit. We'll walk you through updated web APIs, CSS and media features, JavaScript syntax, and more to help you build great experiences for people when they use your website, home screen web apps, or embedded WebKit views.

Discover WKWebView enhancements

WKWebView is the best way to present rich, interactive web content right within your app. Explore new APIs that help you convert apps using WebViews or UIWebViews while adding entirely new capabilities. Learn about better ways to handle JavaScript, fine tune the rendering process, export web...

Meet Face ID and Touch ID for the web

Face ID and Touch ID provide a frictionless experience when logging in — and now you can use them on your websites in Safari with the Web Authentication API. Discover how to add this convenient and secure login alternative to your website.

Get the most out of Sign in with Apple

Sign in with Apple makes it easy for people to sign in to your apps and websites with the Apple ID they already have. Fully integrate Sign in with Apple into your app using secure requests, and by handling state changes and server notifications. We'll also introduce new APIs that allow you to let...

Shop online with AR Quick Look

AR Quick Look adds a new dimension to online shopping: We'll show you how to easily showcase your products in augmented reality for a "try before you buy" experience. Discover how to display a product banner in AR Quick Look, integrate Apple Pay, or display custom actions like "add to cart". To...

What's new in Universal Links

Universal Links help people access your content, whether or not they have your app installed. Get the details on the latest updates for the Universal Links API, including support for Apple Watch and SwiftUI. Learn how you can reduce the size and complexity of your app-site-association file with...

Meet Watch Face Sharing

Show off your watchOS app's complications and create a watch face worth sharing. Learn how to share watch faces inside your watchOS and iOS apps or host them on the web for anyone to find and download. We'll also explore best practices for using watch face preview images, and show you how to...

What's new in Web Inspector

The Web Inspector makes introspection and debugging simpler than ever. Discover how you can use debugger stepping, editing cookies, and overriding network loaded resources to provide you with powerful development capabilities and help you create faster, more efficient websites.

Understanding CPU Usage with Web Inspector

As a developer of web content, you play an important role in fulfilling customer expectations for a high performance web experience while minimizing power use across all their devices. Discover new insights on how you can improve the power efficiency of your webpages in Safari, or embedded web...

Introducing Desktop-class Browsing on iPad

iOS 13 brings desktop-class browsing to iPad. With blazing-fast performance, industry-leading security, and modern desktop features, Safari on iPad supports the latest web standards designed and automatically adapts desktop sites and web apps to touch in order to deliver a rich browsing...

Auditing Web Content with Web Inspector

Discover a new way to ensure your web content meets team coding standards and that you can deliver better code even without reliance on automated test systems. Find out how to use the Audit tool in Web Inspector to quickly and easily audit your web content during development so important...

What's New in Universal Links

Universal Links allow your users to intelligently follow links to content inside your app or to your website. Learn how the latest enhancements in Universal Links give your users the most integrated mobile and desktop experience, even when your app isn't installed on their device.

Supporting Dark Mode in Your Web Content

With system-wide Dark Mode support in iOS and macOS, you'll want to make sure your web content is appropriately styled to reflect your users' preference. Learn techniques to ensure your content looks its best when presented in Safari, embedded in other apps such as Mail, or when used in your...

Embedding and Sharing Visually Rich Links

The new Link Presentation framework enables app developers to easily present URLs in a rich, beautiful, and consistent way. Learn how to use Link Presentation to retrieve metadata from a URL, present the rich link content inside your app, and provide link metadata to the new share sheet...

What's New in Safari Extensions

Safari Extensions surface your app's unique capabilities within Safari. Discover how the latest features such as content blocking notifications and user interface management and control innovations for pages, tabs, and popovers make your Safari App Extensions and Content Blockers even more...

What's New in Safari

The latest version of Safari on macOS and iOS is packed with new capabilities that both web developers and their customers will love. Discover how to take advantage of new features including powerful new Safari Extensions APIs for window, tab, and popover management, content blocking...

What's New in Authentication

Secure sign-in and authentication is a key feature of a secure account-based app design. Learn how you can improve your app's login experiences through an overview of the available authentications services and details on specific technologies such as Sign In with Apple ID, Password AutoFill for...

What's New for Web Developers

WebKit provides a rich set of classes designed to load, display, and manage web content in your app. Discover how to integrate your web content into powerful platform features including Dark Mode, new presentation features in Share Sheet, JavaScript payment APIs for Apple Pay, and more.

Adding Indoor Maps to your App and Website

The Indoor Maps Program enables organizations with large public or private spaces to deliver user experiences that provide precise indoor location information and present stunning indoor maps. Discover the overall process in the indoor map enablement workflow then take deep dive into the...

Introducing Safari View Controller

The new SFSafariViewController class enables you to deliver interactive web content in your app just like Safari, including the key Safari UI elements already familiar to your users. See how to easily bring Safari features like Reader and AutoFill into your app, and provide a great web viewing...

Adopting Handoff on iOS and OS X

Handoff allows people to seamlessly move activities between devices and pick up right where they left off. Learn how to save, transfer, and restore user activities in apps of all architectures. See how easy it is to add Handoff support to your iOS and OS X apps to make your user experience even...

No video found.

• How to Use Copilot In Word
• Traveling? Get These Gadgets!

Add More Features by Turning on Safari's Develop Menu

Some of Safari's best features are hidden away

Tom Nelson is an engineer, programmer, network manager, and computer network and systems designer who has written for Other World Computing,and others. Tom is also president of Coyote Moon, Inc., a Macintosh and Windows consulting firm.

In This Article

Jump to a Section

Display the Develop Menu in Safari

Using the develop menu, additional develop menu items, what to know.

• Select Safari > Preferences > Advanced > Show Develop menu in menu bar .
• To use Develop, go to the Safari menu and select Develop , between Bookmarks and Window.
• Most useful Develop options: Open Page With, User Agent, and Empty Caches.

This article explains how to display and use the Develop menu in your Safari (versions 8 through 12) web browser.

Before you can use the Develop menu, you must first make the hidden menu visible. This is an easy task, much easier than revealing the Debug menu that—prior to Safari 4—contained all the commands that are now in the Develop menu. However, don't think that the older Debug menu is no longer relevant; it still exists and contains many useful tools.

Launch Safari from the Dock or the Mac Application folder.

Open Safari's preferences by clicking Safari in the menu bar and selecting Preferences in the drop-down menu.

Click the Advanced tab in the preferences screen.

Select Show Develop menu in menu bar .

Should you ever want to disable the Developer menu, remove the check mark in the Safari > Preferences > Advanced screen.

The Develop menu appears on the Safari menu bar between the Bookmarks and Window menu items. The Develop menu is particularly handy for web developers, but casual users may also find it useful.

Some of the Develop menu items that you're likely to find the most useful include:

• Open Page With : Lets you open the current web page in any browser you have installed on your Mac. If you ever visit a website that doesn't work correctly with Safari, use this command to quickly pop over to the same web page in another browser.
• User Agent : The user agent is a string of text the browser sends to the webserver hosting the web page. If you've ever visited a web page that proclaimed that Safari wasn't supported, this is how the site knew what browser you were using. In most cases, not supported is nonsense, and using this menu item, you can change the user agent to mimic one from a different browser. You may be amazed at how many times a web page that doesn't work suddenly does, just by changing the user agent.
• Empty Caches : Safari keeps a cache of recently accessed sites. The data stored away in this cache includes all the elements of a page, which can be used to quickly render a website when you return to the page. Sometimes the cache can be old or corrupt, causing a web page to display incorrectly. Emptying the cache can fix these issues and can even help speed up Safari .

Most of the remaining menu items are probably more useful to web developers, but if you're interested in how websites are constructed, then the following items may be of interest:

• Show Web Inspector : This opens the Web Inspector at the bottom of the current page. With the Web Inspector, you can examine the elements that went into creating the page.
• Show Page Source : This displays the HTML code of the current page.
• Show Page Resources : This opens the Resource Inspector sidebar in the Web Inspector. It provides an easy way to see which images, scripts, style sheets, and other elements are used on the current page.
• Start Timeline Recording : If you want to see how a web page loads and runs, try the Start Timeline Recording option. This creates a graph showing network activity and how each site element is loaded and used. It makes for an interesting display, but don't forget to turn off the feature by selecting Stop Timeline Recording . Otherwise, you are using your Mac's resources on nonproductive tasks—unless you're a web developer.
• Enter Responsive Design Mode : Another tool for web developers is the built-in simulator that allows you to preview how your web page will look at different screen resolutions or with different devices, such as the iPad or iPhone. Simply load the page you are interested in and select Enter Responsive Design Mode to preview the page. You can try the page rendering using various devices or select a screen resolution to use. When you're done, return to the Develop menu and select Exit Responsive Design Mode .
• Experimental Features : If you're feeling brave, you can try a few of the features that may find their way into future versions of the Safari browser.

With the Develop menu visible, take some time to try out the various menu items. You'll probably end up with a few favorites that you'll use often.

Get the Latest Tech News Delivered Every Day

• How to Activate and Use Responsive Design Mode in Safari
• How to Reset Safari to Default Settings
• How to Activate the iPhone Debug Console or Web Inspector
• How to Enable Safari's Debug Menu to Gain Added Capabilities
• How to Use Web Browser Developer Tools
• How to View HTML Source in Safari
• How to View Internet Explorer Sites on a Mac
• How to Clear Internet Cache in Every Major Browser
• Speed Up Safari With These Tuneup Tips
• 8 Best Free HTML Editors for Windows for 2024
• How to Manage Cookies in the Safari Browser
• How to Manage the Top Sites Feature in Safari
• How to Inspect an Element on a Mac
• Keyboard Shortcuts for Safari on macOS
• What Is Safari?
• The Top 10 Internet Browsers for 2024

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

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

Related Post

How to find the best midjourney alternative in 2024: a guide to ai anime generators, unleashing young geniuses: how lingokids makes learning a blast, 10 best ai math solvers for instant homework solutions, 10 best ai homework helper tools to get instant homework help, 10 best ai humanizers to humanize ai text with ease, sla network: benefits, advantages, satisfaction of both parties to the contract, related posts.

How To Enable Inspect In Safari

How To Post On Instagram From Mac Safari

How To Open Developer Tools On Safari

How To Reset Safari 9.0

How To Inspect Page On Safari

How To Inspect On IPhone Safari

How To Change Location In Safari

How To Enable Webgl On Safari

Recent stories.

Fintechs and Traditional Banks: Navigating the Future of Financial Services

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

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

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

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

• Privacy Overview
• Strictly Necessary Cookies

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

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

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

• Web Browser
• Google Chrome Browser
• Mozilla Firefox Browser
• Microsoft Edge Browser
• Apple Safari Browser
• Tor Browser
• Opera Browser
• DuckDuckGo Browser
• Brave Browser
• Basic and advance shortcut keys in Apple Safari Browser
• Hidden tricks inside Apple Safari Browser
• Bookmark in Apple Safari Browser
• Architecture of Apple Safari Browser
• Apple to Launch Search Engine to Rival Google

Safari for Developement

• DevTools in Apple Safari Browser

Developer Mode in Safari Browser

• Debugger In Apple Safari Browser

Safari Tabs

• Console Tab in Safari Browser
• Sources Tab in Apple Safari Browser
• Storage Tab in Apple Safari Browser
• Elements Tab in Apple Safari Browser
• Network Tab in Apple Safari Browser
• Web Capture Tabs in Apple Safari Browser

How to .. in Safari

• How to enable or disable split view in Apple Safari Browser ?
• How to disable or enable auto-play videos in Apple Safari Browser ?
• How to Allow Pop-Ups in Safari?
• How to use Safari for web development
• How to use inspect element in Chrome, Firefox and Safari ?
• How to Browse in Apple Safari Browser ?

The Safari developer mode consists of a suite of tools meant to help web developers design, troubleshoot, and speed up their websites and Web apps. These functions contribute towards refining web development by incorporating measures that can be used to examine, revise, or evaluate web content.

The bulk of Safari Developer Mode is composed of Safari Web Inspector. This toolset functions as an entrance to numerous capabilities including accessing and modifying the heart of web page attributes such as the HTML structure for websites, CSS stylesheets, javascript functionalities, webpage performance, and debugging possibilities.

Table of Content

Benefits of Safari Developer Mode

• How to open safari developer mode
• Various options available in Developer mode

Example Showing Usage

The usage of Safari Developer Mode offers an array of benefits to developers and web development teams:

• Efficient Debugging: You can pinpoint, fix, and understand issues from the heart of a page’s components.
• Performance Optimization: Optimization of loading times by analyzing and restructuring network requests.
• Real-time Testing and Modification: Enabled real-time changes and testing that support faster development steps.
• Device Emulation: Help in producing responsive designs by simulating and imagining how the site looks on different devices.
• Responsive Design Mode: This is an app that mimics what a page looks like on different screen sizes of mobile devices across multiple orientations. It helps in creating responsive design and checking a website’s performance on various gadgets.

How to open safari developer mode:

Activating Safari Developer Mode requires a few simple steps:

openning safari settings

open advanced

Develop menu

• Open the Web Inspector: Go to Develop, click on “ Show Web Inspector. ”

Various options available in Developer mode:

Here are some of the key tools available in the developer mode of Safari browser:

The Inspector tool allows developers to examine and modify the Document Object Model (DOM) of a webpage. This helps in understanding the structure of the HTML and CSS, as well as making real-time changes to see their effects.

Inpecting Web page

The Console provides a JavaScript console for developers to log information, execute JavaScript code, and catch errors. It is a valuable tool for debugging scripts and testing code snippets.

Console mode

This panel is an extension of the Inspector tool, providing a detailed view of the HTML and CSS elements on the page. Developers can modify styles, attributes, and content directly within this panel.

Elements tab

The Sources panel allows developers to debug JavaScript code. It includes features like breakpoints, stepping through code, and watching variables, helping developers identify and fix issues in their scripts.

Sources tab

The Network panel provides insights into the network activity of a webpage, showing details of all resources loaded, their sizes, and loading times. This is crucial for optimizing page performance.

Network tab

The Timeline tool records and visualizes various events on a webpage, such as script execution, rendering, and painting. This helps developers identify performance bottlenecks and optimize their code.

Timelines tab

The Storage panel allows developers to inspect and modify data stored by the website, including cookies, local storage, and session storage. This is useful for debugging and testing how a website handles data storage.

Storage tab

Now, let us look at a particular scenario where we will fix a problem with a web page using Safari Developer Mode. Imagine a case where the layout of a website gets altered because it has a problem relating to CSS style. The web inspector allows a person to pick out the bad part, inspect and fix the CSS properties in real time. Here’s a image showcasing this process:

Web developers rely on Safari Developer Mode; it is a great tool with multiple features and functions vital for effective web development. For web developers, the Safari Developer Mode equipped with the Web Inspector forms an amazing partner that possesses a toolbox for creating, debugging, and optimizing websites. It goes through HTML, CSS, JavaScript, network performance, as well as responsive design. The suite facilitates convenient debugging, live testing, and diverse instrumentation. This touches on project development starting right at its conception, incorporating quality and responsiveness aspects in design. In brief, it is a point of reference for making beautiful and fast websites even at this digital world.

Please Login to comment...

Similar reads.

• Apple Safari
• 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