web developer tools safari

How-To Geek

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

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

Quick Links

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

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

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

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

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

Go to the "Advanced" tab.

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

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

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

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

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

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

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

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

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

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

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

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

Related: How to View the HTML Source in Google Chrome

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

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 Open Developer Tools On Safari

How To Post On Instagram From Mac Safari

How To Inspect Page On Safari

How To Inspect On IPhone Safari

How To Reset Safari 9.0

How To Inspect On Safari IPhone

How To Change Location In 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.

• Get One: Tornado Alert Apps
• The Best Tech Gifts Under $100

How to Activate the iPhone Debug Console or Web Inspector

Use Safari's web developer tools to study problematic websites

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

What to Know

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

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

Activate Web Inspector on Your iPhone or Other iOS Device

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

Open the iPhone  Settings  menu.

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

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

Scroll to the bottom of the page and select Advanced .

Move the Web Inspector toggle switch to the On position.

Connect Your iOS Device to Safari on a Mac

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

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

Select the  Advanced  tab.

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

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

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

What Is Web Inspector?

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

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

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

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

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

Get the Latest Tech News Delivered Every Day

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

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

What are browser developer tools?

Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. This article explains how to use the basic functions of your browser's devtools.

Note: Before you run through the examples below, open the Beginner's example site that we built during the Getting started with the Web article series. You should have this open as you follow the steps below.

How to open the devtools in your browser

The devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using:

How do you pull it up? Three ways:

• Windows: Ctrl + Shift + I or F12
• macOS: ⌘ + ⌥ + I

• Chrome: More tools ➤ Developer tools
• Safari: Develop ➤ Show Web Inspector. If you can't see the Develop menu, go to Safari ➤ Preferences ➤ Advanced , and check the Show Develop menu in menu bar checkbox.
• Opera : Developer ➤ Developer tools
• Context menu: Press-and-hold/right-click an item on a webpage (Ctrl-click on the Mac), and choose Inspect Element from the context menu that appears. ( An added bonus: this method straight-away highlights the code of the element you right-clicked.)

The Inspector: DOM explorer and CSS editor

The developer tools usually open by default to the inspector, which looks something like the following screenshot. This tool shows what the HTML on your page looks like at runtime, as well as what CSS is applied to each element on the page. It also allows you to instantly modify the HTML and CSS and see the results of your changes reflected live in the browser viewport.

If you don't see the inspector,

• Tap/click the Inspector tab.
• In Chrome, Microsoft Edge, or Opera, tap/click Elements.
• In Safari, the controls are not so clearly presented, but you should see the HTML if you haven't selected something else to appear in the window. Press the Style button to see the CSS.

Exploring the DOM inspector

For a start, right-click (Ctrl-click) an HTML element in the DOM inspector and look at the context menu. The available menu options vary among browsers, but the important ones are mostly the same:

• Delete Node (sometimes Delete Element ). Deletes the current element.
• Edit as HTML (sometimes Add attribute / Edit text ). Lets you change the HTML and see the results on the fly. Very useful for debugging and testing.
• :hover/:active/:focus . Forces element states to be toggled on, so you can see what their styling would look like.
• Copy/Copy as HTML . Copy the currently selected HTML.
• Some browsers also have Copy CSS Path and Copy XPath available, to allow you to copy the CSS selector or XPath expression that would select the current HTML element.

Try editing some of your DOM now. Double-click an element, or right-click it and choose Edit as HTML from the context menu. You can make any changes you'd like, but you cannot save your changes.

Exploring the CSS editor

By default, the CSS editor displays the CSS rules applied to the currently selected element:

These features are especially handy:

• The rules applied to the current element are shown in order of most-to-least-specific.
• Click the checkboxes next to each declaration to see what would happen if you removed the declaration.
• Click the little arrow next to each shorthand property to show the property's longhand equivalents.
• Click a property name or value to bring up a text box, where you can key in a new value to get a live preview of a style change.
• Next to each rule is the file name and line number the rule is defined in. Clicking that rule causes the dev tools to jump to show it in its own view, where it can generally be edited and saved.
• You can also click the closing curly brace of any rule to bring up a text box on a new line, where you can write a completely new declaration for your page.

You'll notice a number of clickable tabs at the top of the CSS Viewer:

• Computed : This shows the computed styles for the currently selected element (the final, normalized values that the browser applies).
• Box Model : represents visually the current element's box model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is.
• Grid : If the page you are inspecting uses CSS Grid, this section allows you to view the grid details.
• Fonts : In Firefox, the Fonts tab shows the fonts applied to the current element.

Find out more

Find out more about the Inspector in different browsers:

• Firefox Page inspector
• Chrome DOM inspector (Opera's inspector works the same as this)
• Safari DOM inspector and style explorer

The JavaScript debugger

The JavaScript debugger allows you to watch the value of variables and set breakpoints, places in your code that you want to pause execution and identify the problems that prevent your code from executing properly.

To get to the debugger:

Chrome : Open the Developer tools and then select the Sources tab. (Opera works the same way.)

Safari : Open the Developer Tools and then select the Debugger tab.

Exploring the debugger

There are three panes in the JavaScript Debugger on Firefox.

The first pane on the left contains the list of files associated with the page you are debugging. Select the file you want to work with from this list. Click on a file to select it and view its contents in the center pane of the Debugger.

Source code

Set breakpoints where you want to pause execution. In the following image, the highlight on the number 18 shows that the line has a breakpoint set.

Watch expressions and breakpoints

The right-hand pane shows a list of the watch expressions you have added and breakpoints you have set.

In the image, the first section, Watch expressions , shows that the listItems variable has been added. You can expand the list to view the values in the array.

The next section, Breakpoints , lists the breakpoints set on the page. In example.js, a breakpoint has been set on the statement listItems.push(inputNewItem.value);

The final two sections only appear when the code is running.

The Call stack section shows you what code was executed to get to the current line. You can see that the code is in the function that handles a mouse click, and that the code is currently paused on the breakpoint.

The final section, Scopes , shows what values are visible from various points within your code. For example, in the image below, you can see the objects available to the code in the addItemClick function.

Find out more about the JavaScript debugger in different browsers:

• Firefox JavaScript Debugger )
• Microsoft Edge Debugger
• Chrome Debugger
• Safari Debugger

The JavaScript console

The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console in any browser:

If the developer tools are already open, click or press the Console tab.

This will give you a window like the following:

To see what happens, try entering the following snippets of code into the console one by one (and then pressing Enter):

Now try entering the following incorrect versions of the code and see what you get.

You'll start to see the kind of errors that the browser returns. Often these errors are fairly cryptic, but it should be pretty simple to figure these problems out!

Find out more about the JavaScript console in different browsers:

• Firefox Web Console
• Chrome JavaScript Console (Opera's inspector works the same as this)
• Safari Console
• Debugging HTML
• Debugging CSS

Safari Dev Tools: The Complete 2023 Guide

Introduction to safari developer tools.

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

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

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

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

A Brief History of Safari

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

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

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

Why Learn Safari Developer Tools?

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

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

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

Core Safari Developer Tools

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

The Web Inspector

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

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

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

The Debugger

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

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

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

The Resources Panel

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

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

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

Storage Inspector

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

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

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

The Audits Panel

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

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

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

Advanced Safari Developer Tools

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

Device Mode

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

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

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

Advanced Debugging

Safari provides next-level JavaScript debugging capabilities:

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

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

Network Throttling

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

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

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

Experimental Features

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

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

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

Debugging JavaScript Issues

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

Breakpoint Usage

Effective breakpoint usage is key for isolating issues:

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

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

Scope Inspection

Understanding scope is vital for tracking down variable issues:

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

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

Async Debugging

Safari provides multiple approaches for debugging asynchronous code:

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

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

Error Handling

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

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

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

Optimizing Page Speed

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

Image Optimization

Safari provides multiple ways to optimize images:

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

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

Script Loading

Optimizing script loading is key for performance:

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

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

Caching Assets

Effective caching can boost repeat visit performance:

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

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

Layout Thrashing

Diagnosing layout thrashing is key for smooth UX:

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

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

Wrap Up and Key Takeaways

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

Key highlights include:

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

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

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

Related posts

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

Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Safari Web Developer Tools?

Where do you enable web developer tools in Safari on windows? I can't find it anywhere. A quick web search found some really complicated instructions that felt more like a hack then turning on a setting. Does Apple really make it that hard to develop in their browser?

3 Answers 3

For quick access using a mouse, be sure to go into Preferences , Advanced , and check the 'Show Develop menu in menu bar' . Then, select 'show menu bar' from the gear menu (if you haven't already).

The 'Develop' menu now appears and has lots of options for you!

• This is the real answer. I'd forgotten that you had to enable it. –  thirtydot Jun 25, 2011 at 0:05
• 2 Yep. They can be tricky, those Apple devs. ;-) –  Dan Esparza Jun 25, 2011 at 0:06

Press Ctrl + Alt + I , or right-click anywhere on a page and click "Inspect Element".

• 2 Note that "Inspect element" only shows up if the "Develop" menu is enabled. –  Chris Sep 16, 2014 at 11:02
• The keyboard shortcut only works under that condition also (but upvoted because I didn't know it) –  Hashbrown Oct 20, 2015 at 5:59

Press Cmd + Alt + I on Mac, or you can right-click anywhere on a page and click "Inspect Element" after having set preferences given in correct answer.

You must log in to answer this question.

Not the answer you're looking for browse other questions tagged javascript css debug safari ..

• The Overflow Blog
• Supporting the world’s most-used database engine through 2050
• What language should beginning programmers choose?

Hot Network Questions

• Taking a scene from a video I made
• How to place images below the title?
• What features should a ceiling fan have so I can switch light and fan separately?
• Can an undergraduate student be penalized for exceeding what is expected of a work?
• Does more lift cause a plane to stall at a lower airspeed?
• Is quantum gravity research implying that gravity is actually a force and not spacetime curvature according to GR?
• How to animate a solid block cracking
• Laser finger guns
• TeX variables become local within list environments?
• Color for this sky
• Shell extension manager errors on Ubuntu 24.04
• Can I say "keep your head tipping backwards for 2 minutes" to mean to keep the head still and in a state that it is fixed at a tipping position?
• Parents' house repairs and siblings future inheritance
• Why does the frequency sampling method for FIR filter design operate in this manner?
• White dwarf supernova luminosity
• My Inductive function over a pair of lists gives "Cannot guess decreasing argument of fix."
• How are Gimli's athletic abilities in the books?
• Is it a cartesian product?
• If Alice measures a qubit and doesn't tell Bob the result, what's Alice's state from Bob's perspective?
• Why did I lose a point of rating in stalemate?
• "Robert had suggested he invite her to his graduation . . ."
• Why are venomous mammals and birds so rare in comparison to reptiles and fish?
• Canada visitor visa denied
• Does a WIPO patent supersede a US patent?

Optimizing WebKit & Safari for Speedometer 3.0

Apr 10, 2024

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

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

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

Improving Tools

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

Improving JavaScriptCore

Revising megamorphic inline cache (ic).

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

Revising Call IC

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

Optimizing JSON

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

Adjusting Inlining Heuristics

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

Make JIT Code Destruction Lazy

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

Opportunistic Sweeping and Garbage Collection

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

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

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

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

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

* macOS 14.4, MacBook Air (M2, 2022)

Various Miscellaneous Optimizations for Real World Use Cases

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

Improving DOM code

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

Improving Layout and Rendering

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

Improving Style Engine

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

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

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

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

Improving Inline Layout

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

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

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

Improving SVG Layout

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

Improving IOSurface Cache Hit Rate

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

Reducing Wait Time for GPU Process

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

Improving Compositing

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

Improving Safari

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

Optimizing AutoFill Code

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

Profile Guided Optimizations

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

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