safari developer tools show cookies

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

Discover more from daily.dev

Personalized news feed, dev communities and search, much better than what’s out there. Maybe ;)

Safari Browser Tips for Developers

Tips and techniques for developers using Safari browser, including enabling developer tools, inspecting and modifying code, debugging, performance optimization, responsive design, and more.

If you're developing for Apple devices, mastering Safari's developer tools is essential. Here 's a quick guide to get you started:

• Enable Developer Tools in Safari by accessing Preferences > Advanced and checking 'Show Develop menu in menu bar'.
• Web Inspector helps you inspect and modify HTML, CSS, and JavaScript in real-time.
• Responsive Design Mode allows you to test your site on various device sizes.
• Debugging Tools like the Console and Network panels aid in identifying and solving coding issues.
• Performance Optimization techniques help you speed up your website.
• Accessibility and Security features ensure your site is usable and safe for all users.
• Safari-specific tips include detecting the browser, optimizing media encoding, and implementing responsive design .
• Advanced Debugging Techniques offer deeper insights into your code's behavior.

This guide aims to improve your efficiency and effectiveness when developing web applications or sites for Safari, ensuring a smooth and optimized user experience across all Apple devices.

Navigating the Developer Tools Interface

Safari's developer tools interface provides comprehensive inspection and debugging capabilities through several key panels:

Elements Panel

The Elements panel allows you to inspect and modify the DOM tree and CSS styles associated with the loaded webpage. You can:

• View and edit HTML elements and attributes
• Modify CSS styles directly in the panel
• Visualize box models, positioning, and other layout details
• Identify accessibility issues

The Elements panel is extremely useful for tweaking designs and layouts, fixing styling issues, and understanding DOM structure.

Network Panel

The Network panel logs all network requests made by the page and provides insights into loading performance. You can:

• View all assets loaded by the page like scripts, stylesheets, images
• Check request and response headers
• Identify slow network requests impacting page load speed
• See a breakdown of total download size and time

This is helpful to optimize page load times and identify network bottlenecks.

Sources Panel

This panel allows debugging and modification of JavaScript code. You can:

• Pause code execution to step through your script
• Set breakpoints and inspect variable values
• Edit JavaScript code on the fly
• Profile memory usage and CPU activity

The Sources panel is great for identifying and fixing JavaScript bugs and performance issues.

Timelines Panel

The Timelines panel visualizes various events tied to loading and running a webpage over time, including:

• Resource loading
• Style calculations
• Layout changes
• Script activity
• Rendering frames

Analyzing these timelines is crucial to pinpoint expensive operations that may cause jank or lag when interacting with your site.

Console Panel

The Console panel logs output from JavaScript code running on the page, any runtime errors, logging statements, network request statuses, and more. This can help identify and debug a wide variety of front-end issues.

Storage Panel

This panel allows inspection and modification of all browser storage mechanisms utilized by the page like cookies, local storage, session storage, and more. It is invaluable for understanding and debugging client-side data persistence.

Overall, Safari's developer tools provide unparalleled inspection and debugging capabilities for webpages. Mastering these tools is essential for any web developer looking to build high-quality experiences.

Inspecting and Modifying HTML and CSS

Selecting elements.

To pick an element to work on in the Elements panel:

• Just click on the part of the webpage you're interested in. This makes it pop up in the Elements panel.
• Or, click on the element's name in the DOM tree in the Elements panel.

Other ways to find elements include:

• Use the search box to look for elements by their ID, class name, or tag name.
• Right-click on an element and choose "Select Element in Console" to use it in Console commands.

When you choose an element, you'll see all its details like HTML, CSS, and layout info on the right side.

Editing HTML

To change the HTML of something you've selected:

• Double-click on its tag or text in the Elements panel.
• Or right-click and pick "Edit as HTML".

Now, you can edit the HTML. Press Enter when you're done to save your changes.

Some quick tips:

• Switch tag names to change the structure.
• Change attributes like id or class .
• Add, tweak, or remove child elements.

Your webpage will update right away with your changes.

Modifying CSS Styles

To change the CSS styles of something:

• Click on the element in the Elements panel or on the webpage.
• On the right, in the Styles section, find the style you want to change.
• Click in the value box, make your edit, and press Enter.

You can also:

• Hit the New Style Rule button ( + ) to add new styles.
• Toggle style properties on or off by checking/unchecking them.
• Right-click on a style to make it !important or to copy it.

Like before, your webpage shows the changes right away.

Adding and Removing Classes

You can change how an element looks and acts by adding or removing classes.

To add a class:

• Choose the element in the Elements panel.
• Look for the class attribute in the Attributes section.
• Type in the new class name. Use spaces to add more than one.

To get rid of a class, just delete its name from the class attribute.

This is a quick way to change an element's style without messing with CSS rules directly.

Utilizing the Web Inspector for Debugging

The Web Inspector is a super handy tool for checking out how your page looks, fixing JavaScript problems, and figuring out what slows things down. Here's how to make the most of it:

Inspecting Page Layouts

• The Elements panel lets you peek at the structure of your webpage and see how elements are laid out.
• You can turn CSS styles on and off to immediately see how they affect your page.
• Experiment with layout by changing styles like width , height , margin , and so on.
• The Layout pane helps you spot issues with how things are arranged on your page.

Debugging JavaScript

• Use the Sources panel to pause your code where you want and go through it step by step.
• Check out variables, events, and what the code is doing at each step on the side.
• Change code on the fly, run small tests, and look at values in the Console .
• Find out where your code is slow or using too much memory.

Analyzing Network Performance

• The Network panel shows you everything your page is loading.
• Find out which parts take the longest to load.
• Look at the details of what's being sent and received.
• Pretend you're on a slower connection to see how your page does.

Diagnosing Rendering Issues

• Use the Timelines panel to see everything that happens when your page loads and runs.
• Look for parts of your page that make it slow or choppy.
• Record what happens when people use your page to find spots you can make better.

Getting good at using Safari's Web Inspector means you can make your websites work better and faster. It's all about spotting problems and fixing them.

Responsive Design Mode

Responsive Design Mode is a feature in Safari that lets you see how your website looks on different devices like phones, tablets, and computers. It's great for making sure your site works well no matter what screen size someone is using. Here's a simple guide to using it:

Enabling Responsive Design Mode

To start using Responsive Design Mode in Safari:

• Go to the Develop menu at the top.
• Choose Responsive Design Mode from the list.

A toolbar will show up with different screen sizes you can test.

Selecting Screen Sizes

In Responsive Design Mode, you can pick from preset screen sizes for devices like:

• Or even specific sizes like 1440px wide

Just click on one to see how your site looks. You can also manually adjust the size by dragging the corner of the window, switch to landscape mode, or simulate using a touchscreen.

Testing Responsiveness

As you change the size of the Safari window:

• Move around your site to see if it adjusts smoothly.
• Check that things like text and images move or resize correctly.
• Make sure links and buttons work as expected.

This helps you spot any parts of your site that might not look right on different screens, like if text gets too squished or a picture disappears.

Integration with Web Inspector

You can use Responsive Design Mode together with Safari's Web Inspector. This means you can:

• Look closely at the code of your site and change it on the fly.
• Solve problems with your site's JavaScript.
• Check how fast your site loads and find ways to make it faster.

Using these tools together can help you make sure your site not only looks good on all devices but also works well and loads quickly.

By getting good at using Responsive Design Mode, you can make websites that everyone can enjoy, no matter what device they're using. It's a good idea to test your site often as you build it to catch any issues early.

Advanced Debugging Techniques

Debugging web apps can sometimes feel like a puzzle, but Safari's got some cool tools to help you out. Here are some tips to step up your debugging game with the Web Inspector:

Using the Debugger Statement

You can make your JavaScript take a break by adding debugger; in your code. When Safari sees this, it'll pause right there, letting you take a closer look.

How to do it:

• Jump into the Sources panel
• Drop debugger; into the line where you want things to pause
• Refresh the page
• Your code will stop at that line, ready for you to dive in

This is super handy for checking out what's happening at certain moments.

Viewing Console Logs

The Console panel is where you'll see messages from console.log() , along with any errors or warnings.

• Use console.log() to spit out what values variables are holding or to track where you are in your code.
• You can sift through messages by type, like error or warn , to zero in on problems.
• Logging objects? You can peek inside them with console.log(someObject);

Filtering Network Traffic

In the Network panel, you can narrow down requests by:

• Type (like XHR, JS, CSS)
• Where they're from (domain)
• How big they are
• How long they take

This is great for digging into specific stuff, like if you're only interested in checking out API calls.

Analyzing Detailed Timelines

The Timelines panel lays out everything that happens as your page loads and runs, all on a neat timeline.

What you can do:

• Zoom in to get a closer look at certain actions
• Filter by types of events
• Look up specific elements or actions
• Check out the details of what's causing delays

This helps you find and fix spots that slow your app down.

• Pause your code with debugger; to take a closer look at specific spots
• Use console.log() to keep tabs on what your code is doing
• Filter network stuff to focus on what matters to you
• Use the timelines to spot and smooth out any slow parts

Getting the hang of these tricks will help you make smoother, faster web apps.

Safari-specific Development Tips

Detecting safari browser.

You can find out if someone is using Safari and what version it is with this bit of code:

Then, you can make your website work differently depending on the Safari version:

This way, your website can work well for everyone, no matter what version of Safari they're using.

Supporting Multiple WebKit Versions

Since Safari uses the WebKit engine, you can check if certain WebKit features are available:

And use -webkit- in your CSS for things to look right in both old and new versions of WebKit:

Checking the WebKit Feature Status helps you know what's supported.

Optimizing Media Encoding

For videos, use MP4 format with H.264 encoding. For audio, MP3 works well across browsers. Use <video> and <audio> tags for media on your website. For drawings or animations, <canvas> works great in Safari. Using these formats makes sure your website loads fast and looks good in Safari.

Implementing Responsive Design

Use flexible layouts, images that resize, and media queries for a website that looks good on any device:

Always check how your site looks on different devices like iPhones, iPads, and desktops to make sure everything adjusts and fits well.

Adding Multi-Touch Support

Make your website interactive for touch devices by listening to touch events:

You can detect different gestures like taps, swipes, or pinches and use them to make things move or change on your site. This makes your website more fun and easier to use on phones and tablets.

sbb-itb-bfaad5b

Simulating devices and screen sizes.

Safari lets you check how your website looks on different devices and screen sizes right from your computer. This is super helpful for making sure your site looks good whether someone is viewing it on a phone, tablet, or computer.

To get started:

• Click on Develop > Responsive Design Mode in the Safari menu.
• You'll see a toolbar with different device and screen size options.

Selecting Emulation Options

In Responsive Design Mode, you can:

• Pick from devices like iPhone, iPad, Apple Watch
• Choose screen sizes like 1440x900 or 1280x720
• Try out portrait/landscape views
• Test how touch input works

Just click on a device or screen size to see how your page changes.

Customizing Sizing

You can also manually adjust the size of the page by dragging the window's edges, or you can type in specific sizes:

And you can switch between landscape and portrait modes:

As you change sizes, make sure that:

• Your page adjusts smoothly for different screen sizes
• Pictures and videos fit well and don't stick out
• Text is easy to read and everything is easy to use

Scrolling around helps you check that everything moves right.

Integration with Developer Tools

You can use Responsive Design Mode with other tools in Safari like the Web Inspector. This lets you do a lot at once, like:

• Look at and change your site's code
• Figure out JavaScript issues
• Check how fast your site is
• Find and fix display problems

This makes it easier to get your site looking and working great on all devices.

Achieving Consistency

Test your site on different screens as you build it to make sure it always works and looks right.

• Start emulation with Develop > Responsive Design
• Use the preset options for devices and screen sizes
• Adjust the page size yourself if needed
• Test your site with other Safari tools for a complete check-up
• Keep testing on different screens to make sure your site stays responsive

Following these steps will help make sure your site offers a good experience for everyone, no matter what device they're using.

Debugging Safari Web Apps on macOS

When you're working on a web app for Safari on a Mac, you'll need to know how to find and fix problems. Here's a simple guide to get you started with Safari's built-in tools for developers.

Enabling Web Inspector

First things first, you need to turn on a tool called Web Inspector:

• Go to Safari's preferences and click on the Advanced tab
• Make sure the box next to "Show Develop menu in menu bar" is checked
• You'll see a new "Develop" menu appear at the top of Safari
• From there, select "Show Web Inspector"

You can also press Option + Command + I on your keyboard to open it up quickly.

Inspecting the Web App

With Web Inspector open, you can:

Use the Elements panel to look at the website's building blocks (HTML) and how it's styled (CSS). This is great for checking the layout, seeing what styles are applied, and making sure it's accessible.

The Console panel shows you errors or any messages from your JavaScript. This helps you spot problems fast.

The Sources panel lets you dive into your JavaScript code. You can pause it, see what's happening step by step, and check out the values of different things while it runs.

The Network panel keeps track of all the files your app is loading. It's useful for finding out if anything is taking too long to load.

Check out the Timelines and Profiles panels to see if there are any slow parts in your app causing delays or making things choppy.

Testing on Different Devices

You can see how your app looks on different devices using a feature called Responsive Design Mode. Just go to the Develop menu and turn it on. This lets you check if your app looks good on phones, tablets, and computers without having to test it on each device.

Modifying Code

With Web Inspector, you can change your app's HTML, CSS, and JavaScript right there and then. This means you can try out new ideas quickly:

• Change the text or structure in the Elements panel
• Adjust how things look by tweaking the CSS
• Update your JavaScript in the Sources panel

Just refresh your app to see how the changes work out.

Achieving Performance

Use Web Inspector to look at how your app loads and runs. You can find out what's slowing it down and fix it by:

• Looking at network requests to see if files are too big or slow to load
• Checking JavaScript performance to find and fix slow code
• Watching for layout changes that might be causing delays

Testing your app in different situations helps make sure it runs smoothly for everyone.

Performance Optimization

Detecting unused code.

To spot CSS and JavaScript your web app doesn't really use, follow these steps in your browser's developer tools:

• Open the developer tools and find the Coverage panel.
• Refresh your page with the coverage tool running - this keeps track of which bits of code are active.
• Use your site to make sure you're checking all its features.
• Look at the Coverage panel to see how much of your code was actually needed.
• Click on files to see parts of the code that weren't used, shown in red.
• Get rid of code that you don't need to make your files smaller.

Some hints:

• Hit Start instrumenting coverage to begin.
• Try out every part of your site to catch all the code that might run.
• Pay special attention to big CSS or JavaScript files that aren't used much.

Cutting out unnecessary code helps your site run faster and smoother.

Analyzing Resource Sizes

To look into how big your site's files are using the Network panel:

• Open the developer tools and switch to the Network tab.
• Refresh the site to see all the files it loads.
• Look at the Size column for how big each file is.
• Organize by size to spot the biggest files.
• Click on a file for more details, like how much you could save by compressing it.
• Files larger than 2MB can slow down your site.

Ways to make files smaller:

• Shrink and tidy up JavaScript and CSS files.
• Use tools to make images smaller without losing quality.
• Only load big files when they're actually needed.

Making your files leaner can make your site load faster and work better.

Accessibility and Security

Making sure websites are easy to use and safe is really important, especially for people using iPhones and iPads. Here are some tips for making websites better for everyone in Safari:

Implementing Proper Accessibility

• Use special codes ( ARIA roles, states, and properties) to help browsers understand what each part of your website is supposed to do.
• Always provide descriptions for images and other non-text content.
• Make sure there's a strong contrast between text and its background so it's easy to read.
• Design your site so people can navigate through it using just a keyboard.
• Make your site work well with tools that help people with disabilities, like screen readers.

Tips for testing:

• Try using VoiceOver on iOS to check if people can listen to your website's content.
• Use the Accessibility Inspector in Safari to make sure everything's set up right.

Utilizing Safari's Security Features

• Use HTTPS to keep connections to your site secure.
• Make sure any external content on your site hasn't been messed with.
• Think about using Feature Policy for tighter control over your site's features.
• Use Credential Management API to help users log in securely.

Additional measures:

• Always clean and check any information users give you.
• Stick to the best ways of keeping user accounts safe.
• Be careful with scripts from other websites.

Checking for Common Issues

• Make sure your site meets the guidelines for accessibility.
• Look out for common security risks like XSS or CSRF.
• Test your site on both desktop and mobile versions of Safari.
• Check that your site still works when Safari's extra security settings are turned on.

Focusing on making your site easy to use and safe helps everyone have a better experience. Testing thoroughly is the best way to find and fix any problems.

Safari gives developers a lot of tools to make websites and apps work really well on Apple devices. If you know how to use these tools, you can make your site or app faster, look better, and be easier for everyone to use.

Here's a quick recap of what we talked about:

• Develop menu in Safari lets you use cool tools like Web Inspector for checking and fixing code, and Responsive Design Mode for seeing how your site looks on different devices.
• The Elements panel helps you look at and change the website's HTML and CSS, check how it's laid out, and make sure it's accessible to everyone.
• The Network panel helps you see how fast your site loads and find ways to make it load faster.
• Sources panel is for finding and fixing JavaScript bugs.
• Timelines panel shows you what happens when your page loads and helps you find parts that make it slow.
• Responsive Design Mode lets you see how your site looks on phones, tablets, and computers.
• Make sure your site can be used easily by everyone, including people with disabilities, by using ARIA roles and testing with tools like VoiceOver.
• Keep your site safe with HTTPS, clean inputs, and safe login methods.

We also shared tips on how to make sure your site works well in Safari, like checking for Safari browser, using WebKit features, making your site responsive, adding touch events, and making your site fast.

With Safari being so popular on mobile devices, it's really important to test your site on Apple's devices to make sure it works great. Use the tools we talked about to check your site and keep updating it with new features.

In short, making your site work well in Safari means happy users who'll want to keep coming back.

Related Questions

How do i use developer in safari.

To turn on developer tools in Safari, follow these steps:

• Open Safari , then go to Preferences
• Click on the Advanced tab
• Make sure to tick the box for Show Develop menu in menu bar
• Now, you'll see a new Develop menu at the top, which lets you access various developer tools

These tools include the Web Inspector for checking your website's code and layout, Responsive Design Mode for seeing how your site looks on different devices, and a console for solving JavaScript problems.

Is Safari good for Webdev?

Yes, Safari is great for web development. It has handy tools like Web Inspector, Responsive Design Mode, and Accessibility Inspector that make building, testing, and improving websites easier.

Since Safari uses WebKit, like some other browsers, testing for cross-browser compatibility is more straightforward. Plus, its popularity among Apple device users means it's crucial for reaching a broad audience. Safari offers a solid development environment for web professionals.

How do I use Safari efficiently?

Here are a few tips to get the most out of Safari:

• Look at all your open tabs with tab previews and close ones you don't need by swiping.
• Turn on Reader Mode for a cleaner reading experience on web pages.
• Bookmark your go-to sites and use the smart search feature for quick access.
• Use Keychain for saving and autofilling passwords securely.
• When privacy is a concern, switch to Private Browsing mode.
• Add useful shortcuts to your toolbar for quick access.

How do I make Safari work better?

To improve Safari's performance:

• Clean out your browsing history and site data now and then.
• Switch on the Develop menu for access to more tools that can help optimize your browsing.
• Stop videos from playing automatically to save on resources.
• Use Reader Mode on complex pages to cut down on data use.
• Make sure privacy settings are on.
• If content blockers are messing with a site, try turning them off temporarily.
• Keep Safari and your operating system up to date for the latest speed and security enhancements.

Related posts

• Navigating Chrome Generator for Beginner Developers
• Call from Browser: The Future of Developer Networking
• Edge Browser Extension Essentials for Developers
• Download HTML Page: Step-by-Step Guide

Why not level up your reading with daily.dev?

View in English

Web development tools

Apple has brought its expertise in development tools to the web. Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize websites for peak performance and compatibility on both platforms. And with Responsive Design Mode, you can preview your web pages in various screen sizes, orientations, and resolutions. Access these tools by enabling the Develop menu in Safari’s Advanced preferences.

Web Inspector

Web Inspector is your command center, giving you quick and easy access to the richest set of development tools ever included in a web browser. It helps you inspect all of the resources and activity on a web page, making development more efficient across Apple platforms. The clean, unified design puts each core function in a separate tab, which you can rearrange to fit your workflow. You can even debug memory using Timelines and tweak styles using widgets for over 150 of the most common CSS properties.

Elements. View and inspect the elements that make up the DOM of a web page. Clicking elements from the fully editable markup tree on the left reveals the node’s styles in the middle sidebar, with more details in the right sidebar.

Console. Type JavaScript commands in the console to interactively debug, modify, and get information about your webpage. View logs, errors, and warnings emitted from a webpage, so you can identify issues fast and resolve them right away.

Sources. Find every resource of a webpage, including documents, images, scripts, stylesheets, and more. Use the built-in debugger with data type and code highlights to troubleshoot and understand the script execution flow.

Network. See a detailed list of all network requests made to load every web page resource, so you can quickly evaluate the response, status, timing, and more.

Timelines. Understand all the activity that occurs on an open web page, such as network requests, layout and rendering, JavaScript events, memory, and CPU impact. Everything is neatly plotted on a timeline or recored by frame, helping you discover ways to optimize your site.

Storage. Find details about the data stored by a web page, such as application cache, cookies, databases, indexed databases, local storage, and session storage.

Graphics. Preview animation keyframes and their classes from HTML5 canvas, JavaScript animations, CSS animations, and CSS transitions. Dial in the motion and the visual design of web pages.

Layers. Visualize compositing layers in 3D to understand where layers are generated and in what order they'll render. Use layers to help find unexpected memory consumption or excessive repaints on a web page.

Audit. Preform audits against a web page to certify that common code and accessibility errors are addressed. Confirm that a web page follows design guidelines and specifications of modern web pages.

Responsive Design Mode

Safari has a powerful new interface for designing responsive web experiences. Responsive Design Mode provides a simple interface for quickly previewing your web page across various screen sizes, orientations, and resolutions, as well as custom viewports and user agents. You can drag the edges of any window to resize it. And you can click on a device to toggle its orientation, taking it from portrait to landscape — and even into Split View on iPad.

• Irresistible Tech Gifts for That Special Dad
• Killer Smartphone Deals We Love

How to Activate the iPhone Debug Console or Web Inspector

Use Safari's web developer tools to study problematic websites

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

What to Know

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

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

Activate Web Inspector on Your iPhone or Other iOS Device

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

Open the iPhone  Settings  menu.

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

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

Scroll to the bottom of the page and select Advanced .

Move the Web Inspector toggle switch to the On position.

Connect Your iOS Device to Safari on a Mac

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

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

Select the  Advanced  tab.

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

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

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

What Is Web Inspector?

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

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

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

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

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

Get the Latest Tech News Delivered Every Day

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

How to find out what cookies are set by your website

Does your website use cookies?

Most likely! In this blog post, we're going to explore how you can quickly determine if your website is using cookies. We'll also introduce you to the fundamental types of cookies and their purposes, providing you with a foundational understanding of whether you require a Consent Management Platform (CMP). This is particularly crucial if you're located in, or receive visitors from, regions where cookie compliance is mandatory and visitors have the right to control their cookie preferences on your website.

It’s possible like many other websites, your website is also using various types of cookies. Identifying the cookies used by any website, including your own, can be checked within the browser. For optimal results, we advise clearing cookies from your browser before checking the cookies will give you the most accurate results and not based on previous action taken on the website beforehand. Additionally, make sure that your browser's settings do not block cookies.

Clym offers a robust Consent Management Platform (CMP) to help identify/categorize and display your cookies based on various Data Privacy Regulation requirements so your visitors can change their preferences as they wish.

To see what cookies your website (and other sites) are collecting, follow the steps below based on the browser you’re using. If you’re collecting cookies, chances are you’ll need to be compliant with GDPR and/or CCPA ! For more information about cookies and their collection, keep reading!

Note:  We recommend that you browse the site in private mode for this as it will avoid the loading of cookies from other websites. Also, make sure you have turned off the blocking of cookies from the browser. 

How to check what cookies are running on your website by using google chrome.

Start browsing using a new  Private window  and navigate to the URL of your website.

Open the Developer Tools.

Depending on your browser this can be done in different ways.

For Google Chrome go to  View > Developer > Developer Tools  or CMD + ALT + I on  Mac  or F12 on Windows.

‍Next, open the Application  tab and check the cookies for each domain. Usually the cookies have names that resemble the name of the service they are being used by. You can also Google search the cookie names to find specific information about them.

‍Click below to see our tutorial on how to check what cookies are running on your website in Google Chrome: 

How to check what cookies are running on your website by using Firefox

In Firefox, go to  Tools > Web Developer > Storage Inspector  or CMD + ALT + I on  Mac  or F12 on Windows. Next, open the Application  tab and check the cookies for each domain. Usually the cookies have names that resemble the name of the service they are being used by. You can also Google search the cookie names to find specific information about them.

‍Click below to see our tutorial on how to check what cookies are running on your website in Mozilla Firefox: 

How to check what cookies are running on your website by using Safari

In Safari, go to  Develop > Show Web Inspector  or CMD + ALT + I on  Mac  or F12 on Windows. Next, open the Application  tab and check the cookies for each domain. Usually the cookies have names that resemble the name of the service they are being used by. You can also Google search the cookie names to find specific information about them.

Use an extension to identify services‍

You can use a browser extension like  Ghostery  to find out what trackers are loaded by your website. This is a good starting point to match your cookies to services.

Note: Make sure you have disabled any ad-blocking plugins, so the results are complete.

What are cookies.

Cookies are files which are stored on your computer, smartphone, tablet or other device when you browse the Internet. They are designed to hold data specific to a particular user and website, and can be accessed either by a web server or the user’s computer or device. This allows a website to deliver a page specifically tailored to a particular user or the page itself can contain some script which is aware of the data in the cookie and so is able to carry information from one visit to the website to the next. Cookies have become HUGE business as data collection and sharing drive significant revenues to companies.

Types of Cookies

• Session Cookies: These are temporary cookies that remain in the cookie file of your browser until you leave the site. They enable a website to track each step you make on a site and therefore, are essential for transactions or site navigation that requires the user to be remembered from page to page during a browsing session.
• Persistent Cookies: Persistent (or permanent) cookies are stored on the user’s device in between browser sessions, allowing the preferences or actions of the user across a site (or, in some cases, across different sites) to be remembered. These cookies can be used for targeted advertising, remembering site preferences, and for analytics purposes.
• Third-Party Cookies: These are set by a domain other than the one the user is visiting. This typically occurs when a website incorporates elements from other sites, such as ads, images, or social media plugins. These cookies track the user's web use for targeted advertising, analytics, and for improving site experiences.

Legislation such as GDPR and CCPA aim to regulate what organizations can and can’t do with cookies and by extension, your data.

We have provided a guide to understanding cookies in a two part series which covers details such as what cookies are and how web cookies work. In addition to this, as mentioned earlier, there are data privacy laws, such as the CCPA - CPRA in California, which have certain requirements related to a business’ use of cookies and what a compliant cookie policy should look like. To help you understand the impact of CCPA and CPRA on your website’s cookie policy, you can read our informative blog post on the topic.

What information should a compliant cookie policy contain?

In addition to the guides on cookies, as mentioned earlier, there are data privacy laws, such as the CCPA - CPRA in California, which have certain requirements related to a business’ use of cookies and what a compliant cookie policy should look like. To help you understand the impact of CCPA and CPRA on your website’s cookie policy, you can read our informative blog post on the topic.

In short, here's what you should know. 

To be compliant with privacy and cookies laws, your Cookies Policy or cookies clause should:

• state that you use cookies on your website and explain briefly what cookies are,
• disclose what types of cookies you (or any third parties) are using,
• inform users why you use cookies 
• let users know how they can opt out of having cookies placed on their devices.

How can Clym help?

Clym believes in striking a balance between legal compliance and business needs, which is why we offer businesses the following:

• a revolutionary all-in-one platform, with one interface, and one price, combining Privacy and Accessibility compliance with global regulations;
• seamless integration into your website;
• adaptability to your users’ location and applicable regulation;
• custom branding; 
• one user-friendly interface for all your users’ compliance needs; 
• ready made compliance with 30+ data privacy regulations;
• 6 pre-configured accessibility profiles, as well as 25+ display adjustments that allow visitors to customize their individual experience. 

You can convince yourself and see Clym in action by booking a demo or reaching out to us to discuss your specific needs today. 

Key takeaway

In this article, we explored how to find out what cookies are set by your website and explained the types of cookies and their purposes.. We talked about why it's important for websites in certain areas, or those visited by people from these places, to manage cookies properly using something called a Consent Management Platform (CMP).

Cookies collect a lot of personal or essential information in order to maximize user experience. They can be good for making your online experience better but also raise some privacy concerns. That's why rules like the General Data Privacy Regulation (GDPR) or California Consumer Privacy Act (CCPA) are in place to make sure the websites operate based on your rights.

We also introduced Clym's CMP, a tool that helps website owners show and manage their cookies correctly, keeping in line with privacy laws and making sure visitors can choose their cookie settings.

Overall, understanding and managing cookies is key to making your website safe and respectful of visitor privacy.

Related articles

What’s the difference between first party and third party cookies, italian data protection authority updates cookie and tracker compliance guidelines, a guide to understanding cookies - part 2, subscribe to our newsletter.

Stay up to date with product updates, events, privacy and industry news.

How To Get Developer Tools In Safari

• Software & Applications
• Browsers & Extensions

Introduction

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

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

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

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

Enabling Developer Tools in Safari

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

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

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

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

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

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

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

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

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

Using Developer Tools for Web Development

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

Inspecting and Modifying Web Page Elements

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

Debugging JavaScript and Analyzing Console Output

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

Network Analysis and Performance Testing

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

Modifying and Testing CSS in Real Time

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

Leveraging Additional Tools and Resources

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

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

Inspecting and Debugging Web Pages

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

Inspecting Web Page Elements

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

Modifying Web Page Elements in Real Time

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

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

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

Modifying and Testing CSS and JavaScript

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

Real-time CSS Modifications

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

Testing JavaScript Code

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

Performance Optimization

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

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

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

Monitoring Network Activity

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

Resource Size and Loading Times

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

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

Network Throttling

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

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

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

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

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

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

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

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

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

• Crowdfunding
• Cryptocurrency
• Digital Banking
• Digital Payments
• Investments
• Console Gaming
• Mobile Gaming
• VR/AR Gaming
• Gadget Usage
• Gaming Tips
• Online Safety
• Software Tutorials
• Tech Setup & Troubleshooting
• Buyer’s Guides
• Comparative Analysis
• Gadget Reviews
• Service Reviews
• Software Reviews
• Mobile Devices
• PCs & Laptops
• Smart Home Gadgets
• Content Creation Tools
• Digital Photography
• Video & Music Streaming
• Online Security
• Online Services
• Web Hosting
• WiFi & Ethernet
• Browsers & Extensions
• Communication Platforms
• Operating Systems
• Productivity Tools
• AI & Machine Learning
• Cybersecurity
• Emerging Tech
• IoT & Smart Devices
• Virtual & Augmented Reality
• Latest News
• AI Developments
• Fintech Updates
• Gaming News
• New Product Launches

5 Ways to Improve IT Automation

• What is Building Information Modelling

Related Post

Sla network: benefits, advantages, satisfaction of both parties to the contract, what is minecraft coded in, how much hp does a diablo tuner add, what is halo-fi, what is halo lock iphone, related posts.

How To Inspect On IPhone Safari

How To Install Safari On Apple TV 4

How To Test Website On Safari On Windows

How To Enable Inspect In Safari

How To Open Developer Tools On Safari

How To Download Video On Safari

How To Inspect On Safari IPhone

How To Inspect Page On Safari

Recent stories.

What is Building Information Modelling?

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

Learn To Convert Scanned Documents Into Editable Text With OCR

Top Mini Split Air Conditioner For Summer

Comfortable and Luxurious Family Life | Zero Gravity Massage Chair

Fintechs and Traditional Banks: Navigating the Future of Financial Services

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

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

Dive into the Summer ’24 Release

As an admin, you can help your organization succeed by staying up to date with the latest Salesforce releases and getting familiar with product enhancements.

Check out the Summer ’24 release notes for a list of new features and available updates.

Did you find this helpful?

Help us enhance your experience.

Product Area

Feature impact.

• How It Works
• Requirements for Mobile Publisher for Experience Cloud
• LWR Platform (Beta) Limitations
• Prepare Your App’s Information for Android
• Prepare Your App’s Information for iOS
• Create a Mobile Publisher Project
• Get Started with the Playground App
• Enable Cross-Website Tracking for the Publisher Playground App (iOS)
• Show or Hide Login Bar
• Playground App for Android
• Preview Your Experience Site on iOS (Simulator)
• Preview Your Experience Site on Android (Emulator)

Enable Safari Developer Tools

• Debug a Mobile Component (Safari)
• Enable Developer Mode on Your Emulated Device
• Debug a Mobile Component (Chrome)
• Test How URLs Open in the Playground Publisher App
• How to Check Your Experience Cloud Site URL
• Advantages of Binary Upload Distribution Method
• App Distribution Type Considerations
• Choose Distribution Type
• Create a Placeholder App
• Mobile Publisher Best Practices for App Content Declarations
• Update Test User Credentials
• Create Service Account User and Find Your Google Play Developer ID
• Grant Permission to Distribute Your Branded App
• Register Your Firebase App to Enable Mobile Publisher Android Push...
• Enter Your Information into Your Mobile Publisher Project for Android
• Register Salesforce Bundle ID
• Invite Salesforce to Your App Store Connect Account
• Record Your Apple Developer Team Account Info
• Enter Your Apple Developer Information into Your Mobile Publisher...
• Find Your Managed Google Play Organization Info
• Find Your Apple Deployment Programs Account Info
• Unlisted Option for iOS App Distribution
• Change Distribution Type for iOS
• Change Distribution Types for Android
• Change Distribution Account for iOS
• Change Distribution Account for Android
• Urge or Require Users to Update to the Latest Mobile Publisher App...
• Allow Experience Cloud App Users to Initiate Deletion of Their Data
• Configure App Navigation
• Set Up the Navigation Tab Bar
• Manage How URLs Open from Your App
• Creating a Custom Login Flow
• Set Up Your Android App for Google’s Privacy Policy Requirements
• Create a Privacy Policy Page in Experience Builder
• Create a Custom User Profile Menu Item for Your App’s Privacy Policy
• Add a Privacy Policy for Binary Uploads
• iPad Support Opt In
• Create a Certificate Signing Request
• Create Developer ID Certificate
• Find Your Certificate ID
• Configure Your Branded App with Apple
• Create an Apple Auth. Provider in Salesforce
• Update the Apple Configuration with the Callback URL
• Test the SSO Connection
• Create a Registration Handler
• Enable Advanced Authentication for a Mobile Publisher App
• Create a Support Case to Use Advanced Authentication for a Mobile...
• Test Your Mobile Publisher App’s Single Sign-On with Apple ID
• User Opt-In Biometric Login (Beta)
• Enable User Opt-In Biometric Login (Beta)
• Enable Mandatory Biometric ID App Unlock for iOS and Android
• Set Time Value for Biometric Login
• Pre-Authorize User App Access Through Connected App Policies
• Create Custom Notifications for Your App
• Test Marketing Cloud Push Notifications
• Enable Marketing Cloud Push Notifications for Mobile Publisher Apps
• Mobile Publisher Fields for Enabling Marketing Cloud Push...
• Create a Permission Set and Grant API Enabled Access (Optional)
• Enable Full Content Push Notifications for Experience Cloud App
• Enable App Permissions for Device Capabilities
• App Permissions on Android Devices
• Scan Barcodes with a Mobile Device Camera
• Implement and Use Location-Based Features
• Implement a Contact Import Feature
• Access the Mobile Device Calendar
• Best Practices and Guidelines for App Rating and Feedback Requests
• Identify a User with a Mobile Device’s Biometrics Capabilities
• Set Up URL Schemes
• Use App Links with Mobile Publisher for Experience Cloud (Android)
• Use Universal Links with Mobile Publisher for Experience Cloud (iOS)
• Override Android App Links to Your Mobile Publisher App
• Override iOS Universal Links to Your Mobile Publisher App
• Enable Cross-Website Tracking (iOS)
• App Tracking Transparency (iOS)
• Add a Smart App Banner
• Add a Pass to Apple Wallet (iOS Only)
• Supported Objects for Download
• About Managed Packages
• Request a Managed Package
• Install a Managed Package
• Request a Beta Version of Your App
• Test with the UI Test Automation Model (UTAM) for Your App
• Switch Between Testing Modes in the Experience Cloud App
• Submit the App for Approval
• Types of Maintenance
• Create a New Version of Your Mobile Publisher for Experience Cloud App
• Managed Package Maintenance
• Considerations Before Changing Your Experience Cloud Site URL
• Authentication
• Temporarily Remove Mobile Publisher Apps from Sale
• Decommission a Mobile Publisher App
• Suggestions to Prevent App Store and Play Store Rejections
• Identify the Version of Your Experience Cloud App
• Mobile Publisher for Experience Cloud FAQ
• Known Issues and Limitations for Mobile Publisher

Start the debugging process for your iOS app.

Required Editions

• On your desktop development machine, open Safari.
• Select Safari | Preferences .
• Select Advanced .
• Check the Show Develop menu in menu bar box. The Safari developer tools are now available from the Develop menu in the menu bar.

Cookie Consent Manager

General information, required cookies, functional cookies, advertising cookies.

We use three kinds of cookies on our websites: required, functional, and advertising. You can choose whether functional and advertising cookies apply. Click on the different cookie categories to find out more about each category and to change the default settings. Privacy Statement

Required cookies are necessary for basic website functionality. Some examples include: session cookies needed to transmit the website, authentication cookies, and security cookies.

Functional cookies enhance functions, performance, and services on the website. Some examples include: cookies used to analyze site traffic, cookies used for market research, and cookies used to display advertising that is not directed to a particular individual.

Advertising cookies track activity across websites in order to understand a viewer’s interests, and direct them specific marketing. Some examples include: cookies used for remarketing, or interest-based advertising.

Cookie List

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

View, add, edit, and delete cookies

HTTP Cookies are mainly used to manage user sessions, store user personalization preferences, and track user behavior. They are also the cause of all of those annoying "this page uses cookies" consent forms that you see across the web. This guide teaches you how to view, add, edit, and delete a page's cookies with Chrome DevTools.

Open the Cookies pane

• Open Chrome DevTools .
• Open Application > Storage > Cookies and select an origin.

The Cookies table contains the following fields:

• Name . The cookie's name.
• Value . The cookie's value.
• Domain . The hosts that are allowed to receive the cookie.
• Path . The URL that must exist in the requested URL in order to send the Cookie header.
• Expires / Max-Age . The cookie's expiration date or maximum age. For session cookies this value is always Session .
• Size . The cookie's size, in bytes.
• HttpOnly . If true, this field indicates that the cookie should only be used over HTTP, and JavaScript modification is not allowed.
• Secure . If true, this field indicates that the cookie can only be sent to the server over a secure, HTTPS connection.
• SameSite . Contains Strict or Lax if the cookie is using the experimental SameSite attribute.
• Partition Key . For cookies with independent partition state , the partition key is the site of the top-level URL the browser was visiting at the start of the request to the endpoint that set the cookie.
• Priority . Contains Low , Medium (default), or High if using deprecated cookie Priority attribute.

To view a cookie's value, select it in the table. To see the value without percent-encoding, check check_box Show URL-decoded .

Filter cookies

Use the Filter box to filter cookies by Name or Value .

Filtering by other fields is not supported. Filter is case-insensitive.

Add a cookie

To add an arbitrary cookie:

• Double-click an empty row in the table.
• Enter a Name and Value and press Enter .

DevTools populates other required fields automatically. You can edit them as described next.

Edit a cookie

All the fields are editable except Size that updates automatically.

Double-click a field to edit it.

DevTools highlights cookies with invalid field values in red.

To filter out valid cookies, check check_box Only show cookies with an issue in the top action bar.

Delete cookies

To delete a cookie, select it and click delete Delete selected in the top action bar.

Click block Clear all to delete all cookies.

Identify and inspect third-party cookies

Third-party cookies are those set by a site that's different from the current top-level page. Third-party cookies have the SameSite=None attribute.

DevTools lists such cookies in Application > Storage > Cookies and shows a warning warning icon next to them. Hover over the icon to see a tooltip and click it to go to the Issues panel for more information.

You can also find third-party cookies in Network > click request > Cookies .

The Network panel highlights cookies with issues and shows a warning warning icon next to cookies affected by the third-party cookie phaseout .

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

Last updated 2023-12-05 UTC.

Safari User Guide

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