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.

Click Safari in the menu bar

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

Click Preferences

Go to the "Advanced" tab.

Click Advanced

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

Enable Show Develop menu in menu bar

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

The Develop menu in the menu bar

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.

Click Show Page Source

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.

Click the Images folder to view all images from any webpage

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.

Open the details sidebar

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

Click the Resources tab

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.

Click the rectangle icon to change the position of the page source console

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.

Click the two rectangles icon to open the page source in a new 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.

Click Inspect Element

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

Related: How to View the HTML Source in Google Chrome

How to Open Safari Developer Tools & Enable Mobile View Mode

dev tools en safari

John on May 12, 2021

dev tools en safari

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

How to Enable Safari Developer Tools

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

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

Open the Safari Developer Console

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

Responsive Mode

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

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

Dev Console

Related Tutorials

 thumbnail

How to Stop DDOS Attacks & Prevent Future Downtime

 thumbnail

How to Enable Night Light Mode on Windows 10

 thumbnail

How to View Desktop Site on iPhone with Safari

 thumbnail

How to Use Grep Command to Search Files in Linux

 thumbnail

How to Find Words on a Page using Safari on iPhone

 thumbnail

How to Clear & Save Disk Storage Space on a Mac

  • iPhone 15 Plus vs. Pro Max
  • 3 Key Tech Trends to Watch in 2024

How to Activate the iPhone Debug Console or Web Inspector

Use Safari's web developer tools to study problematic websites

dev tools en safari

  • 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
  • How to Inspect an Element on a Mac
  • How to Activate and Use Responsive Design Mode in Safari
  • 10 Hidden Features in macOS Sonoma
  • How to Clear Search History on iPhone
  • How to Disable JavaScript in Safari for iPhone
  • How to Use Web Browser Developer Tools
  • How to View HTML Source in Safari
  • 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
  • How to Manage History and Browsing Data on iPhone
  • How to Clear Internet Cache in Every Major Browser
  • How to Manage Cookies in the Safari Browser
  • How to Use Reading Mode on an iPhone or iPad

How To Open Developer Tools In Safari

Copy to Clipboard

  • Software & Applications
  • Browsers & Extensions

how-to-open-developer-tools-in-safari

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

Close Icon

What Is The Build Limit In Minecraft

How to make an elevator in minecraft, related post, how tall is a minecraft block, how to make a barrel in minecraft, why cant i join my friends minecraft world, minecraft how to add friends, how to play with friends on minecraft, related posts.

How To Download Video On Safari

How To Download Video On Safari

How To Turn On Incognito Mode Safari

How To Turn On Incognito Mode Safari

How To Download Videos On Browser

How To Download Videos On Browser

How To Remove Browser Extensions

How To Remove Browser Extensions

How Do I Enable Javascript On My Browser

How Do I Enable Javascript On My Browser

How To Download Apps From Safari

How To Download Apps From Safari

What Is The Best Internet Browser

What Is The Best Internet Browser

How To Download Instagram++

How To Download Instagram++

Recent stories.

What Is The Build Limit In Minecraft

How To Play Split Screen On Minecraft

Robots.net

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

  • Patrick Brosset
  • Sep 7, 2021

What’s New With DevTools: Cross-Browser Edition

  • 18 min read
  • Tools , Browsers , Debugging , Testing , DevTools
  • Share on Twitter ,  LinkedIn

About The Author

Patrick Brosset is a product manager on the Edge Developer Experience team at Microsoft, and previously worked at Mozilla. He has about 20 years of experience … More about Patrick ↬

Email Newsletter

Weekly tips on front-end & UX . Trusted by 200,000+ folks.

Browser developer tools keep evolving, with new and improved features added all the time. It’s hard to keep track, especially when using more than one browser. With that much on offer, it is not surprising that we feel overwhelmed and use the features we already know instead of keeping up with what’s new.

It’s a shame though, as some of them can make us much more productive.

So, my goal with this article is to raise awareness on some of the newest features in Chrome, Microsoft Edge, Firefox and Safari. Hopefully, it will make you want to try them out, and maybe will help you get more comfortable next time you need to debug a browser-specific issue.

With that said, let’s jump right in.

Chrome DevTools

The Chrome DevTools team has been hard at work modernizing their (now 13 years old) codebase. They have been busy improving the build system, migrating to TypeScript, introducing new WebComponents, re-building their theme infrastructure, and way more. As a result, the tools are now easier to extend and change.

But on top of this less user-facing work, the team did ship a lot of features too. Let me go over a few of them here, related to CSS debugging.

Scroll-snapping

CSS scroll-snapping offers web developers a way to control the position at which a scrollable container stops scrolling. It’s a useful feature for, e.g., long lists of photos where you want the browser to position each photo neatly within its scrollable container automatically for you.

If you want to learn more about scroll-snapping, you can read this MDN documentation , and take a look at Adam Argyle’s demos here .

The key properties of scroll-snapping are:

  • scroll-snap-type , which tells the browser the direction in which snapping happens, and how it happens;
  • scroll-snap-align , which tells the browser where to snap.

Chrome DevTools introduced new features that help debug these key properties:

  • if an element defines scroll-snapping by using scroll-snap-type , the Elements panel shows a badge next to it.
  • the scroll container,
  • the items that scroll within the container,
  • the position where items are aligned (marked by a blue dot).

This overlay makes it easy to understand if and how things snap into place after scrolling around. This can be very useful when, e.g., your items don’t have a background and boundaries between them are hard to see.

While scroll snapping isn’t a new CSS feature, adoption is rather low ( less than 4% according to chromestatus.com ), and since the specification changed, not every browser supports it the same way.

I hope that this DevTools feature will make people want to play more with it and ultimately adopt it for their sites.

Container queries

If you have done any kind of web development in recent years, you have probably heard of container queries . It’s been one of the most requested CSS features for the longest time and has been a very complex problem for browser makers and spec writers to solve.

If you don’t know what container queries are, I would suggest going through Stephanie Eckles’ Primer On CSS Container Queries article first.

In a few words, they’re a way for developers to define the layout and style of elements depending on their container’s size. This ability is a huge advantage when creating reusable components since we can make them adapt to the place they are used in (rather than only adapt to the viewport size which media queries are good for).

Fortunately, things are moving in this space and Chromium now supports container queries and the Chrome DevTools team has started adding tooling that makes it easier to get started with them.

Container queries are not enabled by default in Chromium yet (to enable them, go to chrome://flags and search for “container queries”), and it may still take a little while for them to be. Furthermore, the DevTools work to debug them is still in its early days. But some early features have already landed.

  • When selecting an element in DevTools that has styles coming from a @container at-rule, then this rule appears in the Styles sidebar of the Elements panel. This is similar to how media queries styles are presented in DevTools and will make it straightforward to know where a certain style is coming from.

As the above screenshot shows, the Styles sidebar displays 2 rules that apply to the current element. The bottom one applies to the .media element at all times and provides its default style. And the top one is nested in a @container (max-width:300px) container query that only takes effect when the container is narrower than 300px.

  • On top of this, just above the @container at-rule, the Styles pane displays a link to the element that the rule resolves to, and hovering over it displays extra information about its size. This way you know exactly why the container query matched.

The Chrome DevTools team is actively working on this feature and you can expect much more in the future.

Chromium Collaboration

Before going into features that other browsers have, let’s talk about Chromium for a little bit. Chromium is an open-source project that Chrome, Edge, Brave, and other browsers are built upon. It means all these browsers have access to the features of Chromium.

Two of the most active contributors to this project are Google and Microsoft and, when it comes to DevTools, they collaborated on a few interesting features that I’d like to go over now.

CSS Layout Debugging Tools

A few years ago, Firefox innovated in this space and shipped the first-ever grid and flexbox inspectors. Chromium-based browsers now also make it possible for web developers to debug grid and flexbox easily.

This collaborative project involved engineers, product managers and designers from Microsoft and Google, working towards a shared goal (learn more about the project itself in my BlinkOn talk ).

Among other things, DevTools now has the following layout debugging features:

  • Highlight multiple grid and flex layouts on the page, and customize if you want to see grid line names or numbers, grid areas, and so on.
  • Flex and grid editors to visually play around with the various properties.
  • Alignment icons in the CSS autocomplete make it easier to choose properties and values.
  • Highlight on property hover to understand what parts of the page a property applies to.

You can read more information about this on Microsoft’s and Google’s documentation sites.

Localization

This was another collaborative project involving Microsoft and Google which, now, makes it possible for all Chromium-based DevTools to be translated in languages other than English.

Originally, there was never a plan to localize DevTools, which means that this was a huge effort. It involved going over the entire codebase and making UI strings localizable.

The result was worth it though. If English isn’t your first language and you’d feel more comfortable using DevTools in a different one, head over to the Settings ( F1 ) and find the language drop-down.

Here is a screenshot of what it looks like in Chrome DevTools:

And here is how Edge looks in Japanese:

Edge DevTools

Microsoft switched to Chromium to develop Edge more than 2 years ago now. While, at the time, it caused a lot of discussions in the web community, not much has been written or said about it since then. The people working on Edge (including its DevTools) have been busy though, and the browser has a lot of unique features now.

Being based on the Chromium open source project does mean that Edge benefits from all of its features and bug fixes. Practically speaking, the Edge team ingests the changes made in the Chromium repository in their own repository.

But over the past year or so, the team started to create Edge-specific functionality based on the needs of Edge users and feedback. Edge DevTools now has a series of unique features that I will go over.

Opening, Closing, and Moving Tools

With almost 30 different panels, DevTools is a really complicated piece of software in any browser. But, you never really need access to all the tools at the same time. In fact, when starting DevTools for the first time, only a few panels are visible and you can add more later.

On the other hand though, it’s hard to discover the panels that aren’t shown by default, even if they could be really useful to you.

Edge added 3 small, yet powerful, features to address this:

  • a close button on tabs to close the tools you don’t need anymore,
  • a + (plus) button at the end of the tab bar to open any tool,
  • a context menu option to move tools around.

The following GIF shows how closing and opening tools in both the main and drawer areas can be done in Edge.

You can also move tools between the main area and drawer area:

  • right-clicking on a tab at the top shows a “Move to bottom” item, and
  • right-clicking on a tab in the drawer shows a “Move to top” item.

Getting Contextual Help with the DevTools Tooltips

It is hard for beginners and seasoned developers alike to know all about DevTools. As I mentioned before, there are so many panels that it’s unlikely you know them all.

To address this, Edge added a way to go directly from the tools to their documentation on Microsoft’s website .

This new Tooltips feature works as a toggleable overlay that covers the tools. When enabled, panels are highlighted and contextual help is provided for each of them, with links to documentation.

You can start the Tooltips in 3 different ways:

  • by using the Ctrl + Shift + H keyboard shortcut on Windows/Linux ( Cmd + Shift + H on Mac);
  • by going into the main ( ... ) menu, then going into Help, and selecting “Toggle the DevTools Tooltips”;
  • by using the command menu and typing “Tooltips”.

Customizing Colors

In code editing environments, developers love customizing their color themes to make the code easier to read and more pleasant to look at. Because web developers spend considerable amounts of time in DevTools too, it makes sense for it to also have customizable colors.

Edge just added a number of new themes to DevTools , on top of the already available dark and light themes. A total of 9 new themes were added. These come from VS Code and will therefore be familiar to people using this editor.

You can select the theme you want to use by going into the settings (using F1 or the gear icon in the top-right corner), or by using the command menu and typing theme .

Firefox DevTools

Similar to the Chrome DevTools team, the folks working on Firefox DevTools have been busy with a big architecture refresh aimed at modernizing their codebase. Additionally, their team is quite a bit smaller these days as Mozilla had to refocus over recent times. But, even though this means they had less time for adding new features, they still managed to release a few really interesting ones that I’ll go over now.

Debugging Unwanted Scrollbars

Have you ever asked yourself: “where is this scrollbar coming from?” I know I have, and now Firefox has a tool to debug this very problem.

In the Inspector panel, all elements that scroll have a scroll badge next to them, which is already useful when dealing with deeply nested DOM trees. On top of this, you can click this badge to reveal the element (or elements) that caused the scrollbar to appear.

You can find more documentation about it here .

Visualizing Tabbing Order

Navigating a web page with the keyboard requires using the tab key to move through focusable elements one by one. The order in which focusable elements get focused while using tab is an important aspect of the accessibility of your site and an incorrect order may be confusing to users. It’s especially important to pay attention to this as modern layout CSS techniques allow web developers to rearrange elements on a page very easily.

Firefox has a useful Accessibility Inspector panel that provides information about the accessibility tree, finds and reports various accessibility problems automatically, and lets you simulate different color vision deficiencies.

On top of these features, the panel now provides a new page overlay that displays the tabbing order for focusable elements.

To enable it, use the “Show Tabbing Order” checkbox in the toolbar.

A Brand New Performance Tool

Not many web development areas depend on tooling as much as performance optimization does. In this domain, Chrome DevTools’ Performance panel is best in class.

Over the past few years, Firefox engineers have been focusing on improving the performance of the browser itself, and to help them do this, they built a performance profiler tool. The tool was originally built to optimize the engine native code but supported analyzing JavaScript performance right from the start, too.

Today, this new performance tool replaces the old Firefox DevTools performance panel in pre-release versions (Nightly and Developer Edition). Take it for a spin when you get the chance.

Among other things, the new Firefox profiler supports sharing profiles with others so they can help you improve the performance of your recorded use case.

You can read documentation about it here , and learn more about the project on their GitHub repository .

Safari Web Inspector

Last but not least, let’s go over a few of the recent Safari features.

The small team at Apple has been keeping itself very busy with a wide range of improvements and fixes around the tools. Learning more about the Safari Web Inspector can help you be more productive when debugging your sites on iOS or tvOS devices. Furthermore, it has a bunch of features that other DevTools don’t, and that not a lot of people know about.

CSS Grid Debugging

With Firefox, Chrome, and Edge (and all Chromium-based browsers) having dedicated tools for visualizing and debugging CSS grids, Safari was the last major browser not to have this. Well, now it does!

Fundamentally, Safari now has the same features just like other browsers’ DevTools in this area. This is great as it means it’s easy to go from one browser to the next and still be productive.

  • Grid badges are displayed in the Elements panel to quickly find grids.
  • Clicking on the badge toggles the visualization overlay on the page.
  • A new Layout panel is now displayed in the sidebar. It allows you to configure the grid overlay, see the list of all grids on the page and toggle the overlay for them.

What’s interesting about Safari’s implementation though is that they’ve really nailed the performance aspect of the tool. You can enable many different overlays at once, and scroll around the page without it causing any performance problems at all.

The other interesting thing is Safari introduced a 3-pane Elements panel, just like Firefox, which allows you to see the DOM, the CSS rules for the selected element, and the Layout panel all at once.

Find out more about the CSS Grid Inspector on this WebKit blog post .

A Slew of Debugger Improvements

Safari used to have a separate Resources and Debugger panel. They have merged them into a single Sources panel that makes it easier to find everything you need when debugging your code. Additionally, this makes the tool more consistent with Chromium which a lot of people are used to.

Consistency for common tasks is important in a cross-browser world. Web developers already need to test across multiple browsers, so if they need to learn a whole new paradigm when using another browser’s DevTools, it can make things more difficult than they need to be.

But Safari also recently focused on adding innovative features to its debugger that other DevTools don’t have.

Bootstrap script : Safari lets you write JavaScript code that is guaranteed to run first before any of the scripts on the page. This is very useful to instrument built-in functions for adding debugger statements or logging for example.

New breakpoint configurations : All browsers support multiple types of breakpoints like conditional breakpoints, DOM breakpoints, event breakpoints, and more.

Safari recently improved their entire suite of breakpoint types by giving them all a way to configure them extensively. With this new breakpoint feature, you can decide:

  • if you want a breakpoint to only hit when a certain condition is true,
  • if you want the breakpoint to pause execution at all, or just execute some code,
  • or even play an audio beep so you know some line of code was executed.

queryInstances and queryHolders console functions : These two functions are really useful when your site starts using a lot of JavaScript objects. In some situations, it may become difficult to keep track of the dependencies between these objects, and memory leaks may start to appear, too.

Safari does have a Memory tool that can help resolve these issues by letting you explore memory heap snapshots. But sometimes you already know which class or object is causing the problem and you want to find what instances exist or what refers to it.

If Animal is a JavaScript class in your application, then queryInstances(Animal) will return an array of all of its instances.

If foo is an object in your application, then queryHolders(foo) will return an array of all the other objects that have references to foo .

Closing Thoughts

I hope these features will be useful to you. I can only recommend using multiple browsers and getting familiar with their DevTools. Being more familiar with other DevTools can prove useful when you have to debug an issue in a browser you don’t use on a regular basis.

Know that the companies which make browsers all have teams working on DevTools actively. They’re invested in making them better, less buggy, and more powerful. These teams depend on your feedback to build the right things. Without hearing about what problems you are facing, or what features you lack, it’s harder for them to make the right decisions about what to build.

Reporting bugs to a DevTools team won’t just help you when the fix comes, but may also be helping many others who have been facing the same issue.

It’s worth knowing that the DevTools teams at Microsoft, Mozilla, Apple and Google are usually fairly small and receive a lot of feedback, so reporting an issue does not mean it will be fixed quickly, but it does help, and those teams are listening .

Here are a few ways you can report bugs, ask questions or request features:

  • Firefox uses Bugzilla as their public bug tracker and anyone is welcome to report bugs or ask for new features by creating a new entry there. All you need is a GitHub account to log in.
  • Getting in touch with the team can either be done on Twitter by using the @FirefoxDevTools account or logging in to the Mozilla chat (find documentation about the chat here ).
  • Safari also uses public bug tracking for their WebKit bugs . Here is documentation about how to search for bugs and report new ones .
  • You can also get in touch with the team on Twitter with @webkit .
  • Finally, you can also signal bugs about Safari and the Safari Web Inspector using the feedback assistant .
  • The easiest way to report a problem or ask for a feature is by using the feedback button in DevTools (the little stick figure in the top-right corner of the tools).
  • Asking questions to the team works best over Twitter by mentioning the @EdgeDevTools account.
  • The team listens for feedback on the devtools-dev mailing list as well as on twitter at @ChromeDevTools .
  • Since Chromium is the open-source project that powers Google Chrome and Microsoft Edge (and others), you can also report issues on the Chromium’s bug tracker .

With that, thank you for reading!

Smashing Newsletter

Tips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use.

Front-End & UX Workshops, Online

With practical takeaways, live sessions, video recordings and a friendly Q&A.

TypeScript in 50 Lessons

Everything TypeScript, with code walkthroughs and examples. And other printed books.

Lead image for How to Use React DevTools in Safari

How to Use React DevTools in Safari

Published on Jun 09, 2023 in platforms by Lucien Chemaly 11 minute read

React is commonly used for the frontend in static site generators like Gatsby and now WordPress . React DevTools is a set of developer tools with a multitude of features that can make your workflow more efficient and help you debug and optimize your code.

However, if you use Safari, you may be disappointed to learn that there is no browser extension for React DevTools like there is in Chrome and Firefox.

Fortunately, there is a solution. You can still use standalone React DevTools to connect to your site in Safari. This practical tool is also useful for debugging non-browser-based React applications, like React Native apps. It can help simplify the process of optimizing and debugging your code, making your workflow more efficient.

In this article, you’ll learn how to install and use the standalone version of React DevTools to debug a React application running in Safari. In addition, the article also highlights the differences between the standalone version and the Chrome extension, as well as some limitations of the tools.

Use Cases for Debugging React Apps

The standalone version of React DevTools is a separate application that provides a powerful set of debugging and inspection tools for React applications. It’s independent of any specific browser and can be used across various platforms and environments. This makes it a versatile option for developers who need to debug their React apps in different contexts.

Some of the use cases for the standalone version of React DevTools include:

  • Debugging non-browser-based React apps: The standalone version of React DevTools is particularly useful when debugging React Native applications because it is platform-independent and can connect to apps running on iOS or Android devices. For example, you can use it to determine why a specific component of your React Native app isn’t rendering correctly on an iOS device. You can use React DevTools to inspect the component tree, check component props and state, and identify issues with styling or logic that may be causing the rendering problem.
  • Debugging React apps in Safari: Safari is a widely used browser, especially among macOS users. Although Safari has its own set of developer tools, it doesn’t have extensions or support for React applications like Chrome or Firefox. The standalone version of React DevTools can be used to debug React applications running in Safari, as it provides developers with a powerful set of tools to inspect components and diagnose issues. For instance, if a specific UI component in your React app doesn’t behave as expected when viewed in Safari, you can use React DevTools to inspect the component in question. You can check its state and props and identify any issues.
  • Debugging server-rendered React apps: In most static site generators, React apps are server-rendered, which means components are rendered on the server side and sent as HTML to the client. In these scenarios, the standalone version of React DevTools can help you debug issues related to server-rendered components. For example, if you’re using a solution like Next.js or React Server Components to perform server-side rendering, you can use the standalone version of React DevTools to inspect the rendered components and identify issues related to data fetching, state management, or rendering logic.

How to Debug a React App in Safari

The following tutorial explains how to use the standalone version of React DevTools to debug a React application running in Safari. By the end, you’ll be equipped with the knowledge and tools you need to confidently debug your React application.

Prerequisites

To complete this tutorial, you’ll need:

  • A Mac running Safari
  • A code editor, such as Visual Studio Code
  • Git installed on your machine
  • Node.js and npm (the Node package manager) installed on your system

To verify the installation of Node.js and npm, execute these commands in your shell or terminal:

If they aren’t installed, download and install Node.js , which also automatically installs npm. This tutorial uses Node version 18.12.1 and npm version 8.19.2.

Creating a React Demo Application

You’ll first need to set up a basic React demo application, which you’ll run and debug in your Safari browser using the standalone version of React DevTools.

Create a new React project using Create React App by executing this command:

This command will generate a new folder with the specified name and populate it with boilerplate code for a React application.

Change the current directory to your newly created project folder by running the following command:

Execute the following command to start the development server:

Your React application should now be live at http://localhost:3000/ . Use your Safari browser to open the application:

React demo application in Safari

Any modifications made to the source code will trigger an automatic page refresh.

Connecting Standalone React DevTools to Your App in Safari

To connect React DevTools to your app in Safari, you first need to install the standalone React DevTools package using npm from your terminal or shell:

Run React DevTools with this command:

After you run the command, you’ll get the following screen telling you to add an additional script to your React DOM :

React DevTools prompt

This tutorial uses the script with the localhost link ( <script src="http://localhost:8097"></script> ) to connect the React application, but the LAN IP address also works. Since you’re not working with a mobile application, the localhost link will work just fine.

Go to your source project and open the index.html file in the public folder. Add the localhost link just after the <head> tag, then open React DevTools. You should see the following in the Components section:

Debugging with standalone React DevTools

Creating a User Listing

Once you have connected React DevTools to your application, you can use the various features it provides. These features include the ability to inspect the component tree, examine component state and props, and profile component performance.

As the sample application doesn’t have many components, you’ll only see the App component in the tree. To explore more features of React DevTools, you’ll need to add more components.

To add a User component, create a file named User.js in the src folder and add the following code to it:

This component displays user information, such as first name, last name, age, and date of birth (DOB).

You’ll now create a UsersList component that utilizes the User component to display the list of users. Create a file named UsersList.js in the src folder and add the following code to it:

To populate the list of users, you need to create some dummy data and wrap the UsersList component in the App component. To do this, replace the code in App.js with the following:

Note: The App component renders the UsersList component, which in turn renders each User component for every user in the list.

The application in your Safari browser should look like the following:

React users list in Safari browser

Debugging and Inspecting Your App

Now that your application is ready, you can start debugging it with React DevTools.

If you open React DevTools, you should see your application tree. It begins with the App component at the top, followed by the UsersList component, and ends with the User component:

Application tree

If you click the UsersList component in the tree, the props that are passed to the component will be displayed in the right pane. In this case, the props include the array of users from your dummy data:

UsersList component

Clicking a User component displays the props that it passes (the user object in this case). You can click any of three User components and check their relative props:

User component

When you use React DevTools to debug your application, it’s important to understand the application tree and how it represents the component hierarchy. The application tree can help you quickly identify rendering issues and data flow by providing a visual representation of the components. You can inspect the props and state of each component to pinpoint bugs and troubleshoot issues that may arise.

Additionally, you can pin the location of a selected component in your browser by clicking the eye icon in React DevTools:

Pinning a component in React DevTools

Once this has been activated, it will highlight the component in light blue in your browser:

Selected component in the browser

You can also log the selected component in the console by clicking the bug icon in React DevTools:

Logging a component in React DevTools

The following image shows the results in the browser when you click the bug icon:

Logging a component in the browser

Using React DevTools, you can gain a better understanding of the structure and behavior of your applications. You can also more easily identify and fix bugs and performance issues. The standalone version is particularly useful because it can be used with any React application, whether it’s running locally or on a remote server, and it provides a separate, dedicated window for debugging purposes. Overall, the standalone version of React DevTools is a practical tool for developing and debugging React applications.

Differences between Standalone React DevTools and the Chrome Extension

If you use the standalone version of React DevTools, you’ll be able to use it with any browser, not just Safari. It also offers more customization options and flexibility compared to the Chrome extension. The following are some other differences between the two versions:

  • Cross-platform compatibility: The standalone version of React DevTools is designed to work across various platforms, including browsers and devices, enabling a broader range of debugging and development possibilities. Chrome extensions, on the other hand, are limited to working within the Chrome browser environment.
  • Ease of setup and connection: Chrome extensions are designed to integrate seamlessly with the browser, so using the extension version makes it easy to detect and connect to React apps running in the browser. The standalone version of React DevTools often requires manual configuration to connect to the target app, which can be more time-consuming and error-prone.
  • Updates and maintenance: These two versions of React DevTools may have different release schedules and update processes. Chrome extensions typically update automatically with the browser, while the standalone version may require manual updates.

Limitations of Standalone React DevTools

It’s also important to be aware that the standalone version of React DevTools has some limitations. For instance, the tool may not work as effectively with certain types of components, such as those built with third-party libraries. You may need to use additional tools or methods to gather the necessary information if the tool provides limited data.

The following are some of the most notable limitations:

  • Browser-specific features: The standalone version of React DevTools may lack some browser-specific features, such as network request inspection, JavaScript debugging, or browser performance profiling. For these features, developers need to use the browser’s built-in developer tools or rely on other debugging solutions tailored for the specific browser.
  • Integration with browser environment: The standalone version doesn’t have the same level of integration with the browser environment as the extensions. Certain tasks, like interacting with browser APIs or manipulating the DOM, may be more challenging or impossible to accomplish using the standalone version.
  • Learning curve: Due to differences in features, interface, and setup process, developers may need to invest additional time in learning how to use the standalone version of React DevTools. This may slow down their development process, especially if they are already familiar with the Chrome extension.
  • Performance and resource usage: The standalone version of React DevTools may have different performance characteristics and resource usage compared to the Chrome extension version. Depending on the specific tools and configurations used, developers may experience varying levels of performance and resource consumption, which can impact their development experience.

By keeping these limitations in mind, you can adjust your approach and optimize your code more effectively. For instance, you can use alternative tools or workarounds to gather the information you need.

The standalone version of React DevTools offers a versatile solution for developers who need a powerful and flexible set of debugging tools, whether they’re working on browser-based React apps or non-browser-based applications like React Native apps.

This article introduced the standalone version of React DevTools and demonstrated how to use it to debug a React app running in Safari. You should now be comfortable with setting up, connecting, and using React DevTools to inspect and debug your React applications. With the knowledge from this article, you’ll be able to debug your React applications, regardless of the environment or browser they are running in.

You can find the code that was used in this article in this GitHub repository .

Lucien Chemaly

By Lucien Chemaly

Lucien has a Master's and Engineering Degree in IT and Telecommunications from the University of Rennes, France. He teaches seasonal courses for engineering students at the Saint Joseph University of Beirut and has been involved in programming training for private companies. He also writes for Draft.dev.

The Technical Content Manager's Playbook

Build a Blog that Software Developers Will Read

The Technical Content Manager’s Playbook is a collection of resources you can use to manage a high-quality, technical blog:

  • A template for creating content briefs
  • An Airtable publishing calendar
  • A technical blogging style guide
  • 90% Refund @Courses
  • Web Browser
  • Google Chrome Browser
  • Mozilla Firefox Browser
  • Microsoft Edge Browser
  • Apple Safari Browser
  • Tor Browser

Related Articles

  • Coding for Everyone
  • Basic and advance shortcut keys in Apple Safari Browser
  • Hidden tricks inside Apple Safari Browser
  • Bookmark in Apple Safari Browser
  • Architecture of Apple Safari Browser
  • Apple to Launch Search Engine to Rival Google

Safari for Developement

Devtools in apple safari browser.

  • Developer Mode in Safari Browser
  • Debugger In Apple Safari Browser

Safari Tabs

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

How to .. in Safari

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

Apple’s net browser Safari, isn’t only for browsing the internet. It’s additionally absolutely top for growing web sites. Safari has specialised equipment that assist humans developing web sites to maintain, troubleshoot, and enhance overall performance. In this complete guide, we’ll take a more in-depth look at those Safari tools, discussing what they could do, why they’re beneficial, and the way you may use them to make your website perform even better.

Table of Content

Types of safari development tools, features of safari development tools, benefits of safari development tools, when to use safari development tools, steps to use safari development tools.

There are primary varieties of equipment for Safari net development:

1. Web Inspector:

This is the principle device for internet improvement in Safari. It enables you appearance intently at net pages and find and fasten issues. You can test elements, styles, performance, and community pastime.

2. Safari Technology Preview:

This is like a special web browser from Apple for builders. It has the most recent web stuff and matters which might be still being examined. It’s now not precisely a tool for constructing web sites, however it we could builders strive out the cutting-edge web ideas.

Let’s explore the basics of the Safari development tool:

1. Features of the web monitor:

  • Element Inspection: You can inspect HTML elements, view their properties, and see what CSS styles have been applied to them.
  • JavaScript Debugger: Find and fix problems in your JavaScript code using tools like breakpoints, watch lists, and call stack information.
  • Console: File messages, errors, and warnings from JavaScript or other web technologies.
  • Network tab: View network requests, analyze their details, and study response data.
  • Resources: Look for attachments such as images, text, and style sheets.
  • Storage: Manage cookies, local storage, and session storage for testing and troubleshooting purposes.
  • Performance Profiler : Analyze how well your web application is performing and look for areas that can be improved.
  • Timeline: Record and study timeline data to improve the efficiency of the translation and scripting process.
  • Audits: Conduct tests to find common network performance and access problems.

2. Safari Technology Preview Highlights:

  • Discover web updates: Get a sneak peek at the latest web technologies and cool features that haven’t been available in regular Safari yet.
  • Try new ideas: Try the test kits and tell Apple what you think. Your feedback can influence how web development proceeds.

Now that we know what Safari’s development tools are capable of, let’s take a look at why they’re so helpful:

  • Works on Apple devices: The Safari development tool works best on Apple computers and iPhones/iPads. This means that your web applications will run smoothly on Apple gadgets.
  • Helps diagnose and troubleshoot problems : Safari has powerful tools for diagnosing and troubleshooting problems with JavaScript and the performance of your web application. This makes troubleshooting easier.
  • Real-time testing: You can instantly see what’s happening on your network. You can track network requests, track things, and see how your app is doing in real time.
  • Find ways to improve: Safari’s auditing tool and performance profiler can help you find ways to make your website perform even better. This improves the user experience of your app.

Knowing when to use Safari development tools is crucial for effective web development:

  • Debugging: You can use Safari JavaScript debugging and console to troubleshoot your web application. It helps you identify problems in your code by letting you pause at specific points, look at variables, and go through your code step by step.
  • Speed ​​improvements: Safari’s performance profiler and timeline features help make your web application faster and more efficient. They identify slow areas of your app so that you can improve its performance.
  • Testing in different browsers: Although Safari tools are designed for Safari, they can be helpful for testing your web applications in different browsers. This way you can ensure that your website works well for users of different web browsers.
  • Mobile Development: Safari has excellent tools for creating web pages that work well on mobile devices. You can use responsive design mode and mobile emulation tools to ensure that your web app looks and works well on smartphones and tablets.

In a nutshell, here are the steps to make the most of Safari’s development tools:

Step 1: Open the web monitor, Right-click your web browser and select “Inspect Element”, or press Option + Command + I .

Safari_development_tools1

Step 1: Open the web monitor

Step 2: Explore the various tabs in the Web Inspector, such as Elements, Console, Sources, Network, and so on.

Safari_development_tools2

Step 2: Find the Web Inspector Tabs

Step 3: Review the HTML Items: Click the Elements tab to view the HTML elements and view their styles.

Safari_development_tools3

Step 3: Review the HTML Items

Step 4: Go to the Sources tab to set breakpoints, debug JavaScript code, and understand how to call functions.

Step 5: Check network activity,On the Network tab, you can see what’s happening with network requests, view request headers, and manage response data.

Safari_development_tools5

Step 5: Check network activity

Step 6: Improve Performance, Use the Performance and Timeline tabs to analyze and speed up your web application.

Safari_development_tools6

Step 6: Improve Performance

Scenario: You are creating a functional website and want to make sure it looks good and works well on desktop and mobile devices.

Steps to follow:

  • Step 1: Open Safari and go to your web browser.
  • Step 2: Right-click the page and select “Inspect Element” or press Option + Command + I .
  • Step 3: Click the “Toggle device toolbar” icon (smartphone and tablet icon) to enable responsive design mode in Web Inspector.
  • Step 4: Select a device from the dropdown menu or enter custom dimensions to simulate different screen sizes.
  • Step 5: As you adjust the viewport size, observe how your website behaves in real time.

The Safari development tool is really important for web developers building websites and apps for Apple devices. These tools have many useful features such as viewing elements, editing JavaScript, monitoring network activity, checking the proper functioning of your website or app, and more. If you learn how to use these tools use and add to your productivity, your web services are more efficient , trouble-free, different -Helps to ensure that they look good on different devices So, whether you are creating a simple blog or a beautiful app is, Safari development tools are essential to succeed in the ever-changing world of web development.

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now !

Please Login to comment...

  • Apple Safari
  • Geeks Premier League 2023
  • Geeks Premier League
  • Web Browsers
  • Sabya_Samadder

Improve your Coding Skills with Practice

 alt=

What kind of Experience do you want to share?

Apple Vision Pro User Guide

  • Apple Vision Pro and visionOS overview
  • Get started with Apple Vision Pro
  • Stay connected and share memories
  • Use Apple Vision Pro at work
  • New entertainment experiences
  • Adjust the fit
  • Adjust display alignment
  • Use ZEISS Optical Inserts
  • Attach or remove the Light Seal or head band
  • Clean your Apple Vision Pro
  • Handle and store your Apple Vision Pro
  • Connect the battery
  • Charge the battery
  • Prepare your space
  • Safely use your Apple Vision Pro
  • Important safety information
  • Important handling information
  • Turn on and set up
  • Wake and unlock
  • Redo eye and hand setup
  • Basic gestures and controls
  • Adjust volume
  • Type with the virtual keyboard
  • Take a capture or recording of your view
  • Find settings
  • Connect Apple Vision Pro to the internet
  • Sign in with your Apple ID on Apple Vision Pro
  • Use iCloud on Apple Vision Pro
  • Set a passcode and use Optic ID
  • Capture your Persona (beta)
  • About EyeSight
  • Connect Bluetooth accessories
  • Use AirDrop
  • Set up Apple Pay
  • Use Apple Pay in apps and Safari
  • Set up and use Apple Cash
  • Manage Apple Pay cards and activity
  • Use Family Sharing
  • Open Home View
  • Open Control Center
  • See your notifications
  • Learn the meaning of status icons
  • Recenter your view
  • Move, resize, and close app windows
  • Use Environments
  • Adjust immersion
  • See your Mac screen
  • Share your view with others
  • Change notification settings
  • Set the date and time
  • Change your device name
  • Turn sound effects on or off
  • See people around you while immersed
  • Use Apple Vision Pro on an airplane
  • Set up a Focus
  • Turn a Focus on or off
  • Refresh apps in the background
  • Set content restrictions in Screen Time
  • Remove apps
  • Let others use your Apple Vision Pro
  • Subscribe to Apple Arcade
  • Play with friends in Game Center
  • Manage purchases, subscriptions, settings, and restrictions
  • Install and manage fonts
  • Read books and listen to audiobooks
  • Set reading goals
  • Organize books
  • Set up calendars
  • Create and edit events in Calendar
  • Reply to invitations
  • Share iCloud calendars
  • Change calendar settings
  • Encounter Dinosaurs
  • Make or receive a FaceTime call
  • Leave or end a FaceTime call
  • During a call
  • Use SharePlay in FaceTime calls
  • Hand off a FaceTime call to another device
  • Block unwanted callers
  • View and modify files and folders
  • Connect external servers
  • Organize files and folders
  • Set up iCloud Drive
  • Share files and folders in iCloud Drive
  • Create and manage Freeform boards
  • Shapes and text boxes
  • Photos, videos, files, and links
  • Accessible descriptions
  • Position items on a board
  • Share and collaborate
  • Intro to Home
  • Set up your home and accessories
  • Control and manage accessories
  • Control your home remotely
  • Create and use scenes
  • Create an automation
  • Configure cameras
  • Face Recognition
  • Configure a router
  • Get started with Keynote
  • Create a presentation
  • Save, name, and copy a presentation
  • Tips for working in Keynote
  • Add, skip, or delete slides
  • Change a slide background
  • Show slide numbers
  • Apply and edit slide layouts
  • Change the theme or slide size
  • Use 3D objects
  • Add an image or image gallery
  • Edit an image
  • Add and edit a shape
  • Add lines and arrows
  • Add and edit drawings
  • Set video to loop
  • Add live video
  • Set the movie format
  • Align objects
  • Place objects inside a text box or shape
  • Layer, group, and lock objects
  • Resize, rotate, and flip objects
  • Change how an object looks
  • Add a caption or title
  • Add linked objects to make your presentation interactive
  • Change the look of text
  • Use text styles
  • Format characters and punctuation
  • Align and space text
  • Format lists
  • Add an equation
  • Add or delete a table
  • Add or remove rows and columns
  • Merge or unmerge cells
  • Change the look of a table
  • Use table styles
  • Add and edit cell content
  • Format dates, currency, and more
  • Highlight cells conditionally
  • Add or delete a chart
  • Modify chart data
  • Move, resize, and rotate a chart
  • Change the look of data series
  • Add a legend, gridlines, and other markings
  • Change the look of chart text and labels
  • Add a chart border and background
  • Animate objects onto and off a slide
  • Change build order and timing
  • Add transitions
  • Rehearse on your Apple Vision Pro
  • Present on your Apple Vision Pro
  • Play a slideshow with multiple presenters
  • Add and view presenter notes
  • Play a recorded presentation
  • Check spelling and look up words
  • Find and replace text
  • Add highlights and comments
  • Send or share a presentation
  • Export to PowerPoint, GIF, or another file format
  • Move, restore, or delete a presentation
  • Password-protect a presentation
  • Create and manage custom themes
  • Add and remove email accounts
  • Set up a custom email domain
  • Check your email
  • Unsend email with Undo Send
  • Reply to and forward emails
  • Save an email draft
  • Add email attachments
  • Download email attachments
  • Annotate email attachments
  • Set email notifications
  • Search for email
  • Organize email in mailboxes
  • Flag or block emails
  • Filter emails
  • Use Hide My Email
  • Use Mail Privacy Protection
  • Change email settings
  • Delete and recover emails
  • Print emails
  • View maps and find locations
  • Look around places and take tours in Maps
  • Explore new places with Guides
  • Get directions
  • Adjust Maps settings
  • Set up Messages
  • Send and receive messages
  • Add photos, stickers, and more
  • Unsend, edit, and delete messages
  • Keep track of messages and conversations
  • Collaborate in Messages
  • Send and request money with Apple Cash
  • Change notifications
  • Block, filter, and report messages
  • Mindfulness
  • View albums, playlists, and more
  • Queue up your music
  • Listen to broadcast radio
  • Subscribe to Apple Music
  • Listen to lossless music
  • Listen to Dolby Atmos music
  • Find new music
  • Add music and listen offline
  • Get personalized recommendations
  • Listen to radio
  • Search for music
  • Use Siri to play music
  • Change the way music sounds
  • Get started with News
  • See news stories chosen just for you
  • Read stories
  • Follow your favorite teams with My Sports
  • Subscribe to Apple News+
  • Browse and read Apple News+ stories and issues
  • Download Apple News+ issues
  • Solve crossword puzzles
  • Search for stories
  • Save stories in News for later
  • Subscribe to news channels
  • Get started with Notes
  • Add or remove accounts
  • Create and format notes
  • Work with PDFs
  • Pin, organize, and search notes
  • Change Notes settings
  • View photos and videos
  • View photo albums
  • Watch memories
  • Filter photos and videos in albums
  • Duplicate or copy photos and videos
  • Delete or hide photos and videos
  • Search in Photos
  • Share photos and videos
  • Use iCloud Photos
  • Get started with podcasts
  • Follow, download, and share podcasts
  • Listen to subscriber-only content
  • Organize your podcast library
  • Get started with Reminders
  • Search and organize lists
  • Use tags and Smart Lists
  • Manage Reminders accounts and settings
  • Browse the web
  • Customize your Safari settings
  • Open and close tabs
  • Bookmark favorite webpages
  • Find links shared with you
  • Annotate and save a webpage as a PDF
  • Automatically fill in forms
  • Get extensions
  • Browse the web privately
  • Use passkeys in Safari
  • Check Stocks
  • Read business news
  • Get shows, movies, and more
  • Watch Apple Immersive Video and 3D movies
  • Watch movies and TV in an Environment
  • Subscribe to Apple TV+, MLS Season Pass, and Apple TV channels
  • Watch sports
  • Control playback
  • Watch together using SharePlay
  • Manage your library
  • Change settings
  • Make a recording
  • Play it back
  • Edit or delete a recording
  • Organize and share recordings
  • Set up and activate Siri
  • Find out what Siri can do
  • Tell Siri about yourself
  • About Siri Suggestions
  • Change Siri settings
  • Get started with accessibility features
  • Turn on and practice VoiceOver
  • Change your VoiceOver settings
  • Learn VoiceOver gestures
  • Control VoiceOver using the rotor
  • Use the virtual keyboard
  • Use VoiceOver with a Magic Keyboard
  • Use a braille display
  • Use VoiceOver for images and videos
  • Display & Text Size
  • Spoken Content
  • Audio Descriptions
  • AssistiveTouch
  • Sound Actions
  • Dwell Control
  • Set up Switch Control
  • Use Switch Control
  • Voice Control
  • Digital Crown
  • Pointer Control
  • Hearing devices
  • Sound recognition
  • Background sounds
  • Mono audio and balance
  • Subtitles and captions
  • Guided Access
  • Accessibility shortcuts
  • Per-app settings
  • Use built-in privacy and security protections
  • Keep your Apple ID secure
  • Sign in with passkeys
  • Sign in with Apple
  • Automatically fill in strong passwords
  • Change weak or compromised passwords
  • View your passwords and related information
  • Use shared password groups
  • Share passkeys and passwords securely with AirDrop
  • Make your passkeys and passwords available on all your devices
  • Automatically fill in verification codes
  • Sign in with fewer CAPTCHA challenges on Apple Vision Pro
  • Manage two-factor authentication for your Apple ID
  • Control app tracking permissions
  • Control the location information you share
  • Control access to information in apps
  • Control how Apple delivers advertising to you
  • Control access to hardware features
  • Create and manage Hide My Email addresses
  • Protect your web browsing with iCloud Private Relay
  • Use a private network address
  • Turn Apple Vision Pro on or off
  • Force restart
  • Update visionOS
  • Back up and restore
  • Return settings to their defaults
  • Restore purchased and deleted items
  • Sell, give away, or trade in
  • Erase Apple Vision Pro
  • Get information about your Apple Vision Pro
  • Find more resources for software and service
  • FCC compliance statement
  • Class 1 Laser information
  • Apple and the environment
  • Disposal and recycling information
  • Unauthorized modification of visionOS

Let others use your Apple Vision Pro

With Guest User, other people can use your Apple Vision Pro, and you can choose what they can open. Guests complete eye and hand setup when they put on Apple Vision Pro, but eye and hand settings will revert to yours when the Guest User session ends.

Guest users can’t access your Optic ID, Apple Pay, EyeSight, and Persona.

Important: Apple Vision Pro is designed to fit and be used by individuals 13 years of age or older.

Start a Guest User session

the Control Center button

Adjust any of the following:

Allowed Apps: Choose whether a guest user can access only open apps or all apps.

Important: If you give a guest access to all apps, they have access to your information in apps like deleted Messages and Safari browsing history, Calendar, and Mail. Your Optic ID, Apple Pay, EyeSight, and Persona stay private.

Some options may require that you set a passcode. See Set or change the passcode .

View Mirroring: If you want to see what a guest user is doing while using your Apple Vision Pro, tap View Mirroring, then choose a compatible device from the list of available devices.

Only devices that are connected to the same Wi-Fi network as your Apple Vision Pro appear in the list.

Guest User settings on Apple Vision Pro, with options to change what apps the guest can access, and whether or not to mirror your view.

To start the Guest User session, tap Start, then remove Apple Vision Pro and let the guest user put it on. To cancel the session instead, open Control Center, then tap End.

If Apple Vision Pro is not put on within 5 minutes, the session automatically ends. If you have a passcode, the device also automatically locks.

End a Guest User session

When your guest user is finished using your Apple Vision Pro, they can take off it off to end the session.

To use your Apple Vision Pro, guest users may need to adjust the fit, or they may need a different size Light Seal or head band. See Adjust the fit of your Apple Vision Pro and Attach or remove the Apple Vision Pro Light Seal or head band .

View in English

Developer activities you’ll love

February 14, 2024

A smiling developer wearing a blue denim shirt sits in front of an open laptop at a table in a bright room.

Apple developer activities are in full swing. Here’s a look at what’s happening:

  • Join an online session to learn to minimize churn and win back subscribers hosted by App Store experts.
  • Celebrate International Women’s Day with special in-person activities in Bengaluru, Cupertino, Shanghai, Singapore, Sydney, and Tokyo.
  • Visit an Apple Vision Pro developer lab in Cupertino, London, Munich, Singapore, Sydney, or Tokyo to test and refine your apps for the infinite canvas.
  • Meet with an Apple team member to discuss changes to iOS, Safari, and the App Store impacting apps in the European Union to comply with the Digital Markets Act.

And we’ll have lots more activities in store — online, in person, and in multiple languages — all year long.

Browse the schedule

IMAGES

  1. Guide to Safari Developer Tools

    dev tools en safari

  2. Show Safari Web Developer Tools and how to dock them in Safari

    dev tools en safari

  3. How to use Devtools for Safari Mobile View ?

    dev tools en safari

  4. How to Use the Safari Developers Tool

    dev tools en safari

  5. How to use Devtools for Safari Mobile View ?

    dev tools en safari

  6. Show Safari Web Developer Tools and how to dock them in Safari

    dev tools en safari

VIDEO

  1. African lion safari # canada

  2. DESSERT SAFARI

  3. Ski Safari 2 Evana snowbord monster Run Game play Dev M

COMMENTS

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

  2. How to Turn on the Develop Menu in Safari on Mac

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

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

    Select version: Table of Contents 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.

  4. Complete Guide to Safari Developer Tools

    What are Safari Developer Tools? Types of Developer Tools for Safari Benefits of Safari Developer Tools How to Enable Developer Tools in Safari? Methods to Debug Websites Using Safari Developer Tools Debugging Websites Using Safari Developer Tools on LambdaTest Frequently Asked Questions (FAQs)

  5. Guide to Safari Developer Tools

    Guide to Safari Developer Tools Learn how to use Apple Safari's built-in developer tools to inspect and debug your web applications. Published October 7, 2022 Photo by 'Michał Kubalczyk' on Unsplash Despite the fact that Safari is so popular amongst users, web developers often forgo testing in Safari and instead test solely in Google Chrome.

  6. How To Open Developer Tools On Safari

    Method 1: Using the Menu Bar Opening developer tools in Safari using the menu bar is a straightforward and reliable method. This approach is particularly useful for users who prefer navigating through familiar menu options to access essential browser features. Here's how you can effortlessly open developer tools using the menu bar:

  7. How to Use Developer Tools in Safari on iOS

    Touch the On button to activate the Debug Console. After the Debug Console is enabled, Safari reports any errors it encounters when accessing a website. At the top of every web page, just under the address bar, the Debug Console reports any HTML, JavaScript, or CSS errors.

  8. How to Open Safari Developer Tools & Enable Mobile View Mode

    How to Enable Safari Developer Tools If you don't have developer tools enabled in Safari, you will need to do this before the console can be opened by using the following steps: From the main menu go to Safari > Preferences (or use the CMD + , keyboard shortcut.) Go to the Advanced tab. Check "Show Developer menu in menu bar"

  9. Add More Features by Turning on Safari's Develop Menu

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

  10. Debug Websites Using the Safari Developer Tools

    To debug your website using the Responsive Design mode on Safari, follow the steps mentioned below: Enable the Developer Menu. To do that, launch the Safari Browser on your Mac computer. Go to Preferences > Advanced and check the Show Develop menu in the menu bar. Navigate to the website you want to debug.

  11. How to Activate the Web Inspector or Safari Console for iPhone

    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?

  12. How to use Devtools for Safari Mobile View?

    Follow the steps below to enable the Develop menu: Launch Safari browser

  13. How To Open Developer Tools In Safari

    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.

  14. What's New With DevTools: Cross-Browser Edition

    scroll-snap-align, which tells the browser where to snap. Chrome DevTools introduced new features that help debug these key properties: if an element defines scroll-snapping by using scroll-snap-type, the Elements panel shows a badge next to it. The scroll-snap badge is useful to quickly find elements that define scroll snapping.

  15. How to Use React DevTools in Safari

    How to Use React DevTools in Safari. Published on Jun 09, 2023 in platforms by Lucien Chemaly 11 minute read React is commonly used for the frontend in static site generators like Gatsby and now WordPress. React DevTools is a set of developer tools with a multitude of features that can make your workflow more efficient and help you debug and optimize your code.

  16. javascript

    6 Answers Sorted by: 54 On the ipad go to Settings > Safari > Advanced and activate the Web Inspector. Connect your ipad with your computer. On your computer open Safari, enable the developer tools in the settings. check the above menu for the tab Developer and find your iPad there.

  17. Show Safari Web Developer Tools and how to dock them in Safari

    Then from the Safari " Develop " menu select " Show Web Inspector " or use the keyboard shortcut Option+Command+i. When opened the Safari developer tools pops open in a new window, to get it docked to the bottom of the current Safari window click on the middle icon to snap in at the base of the current open Safari window. And voila ...

  18. Changing Developer settings in Safari on macOS

    Changing Developer settings in Safari on macOS Change developer-centric settings that change the behavior of Safari. Overview Once features for web developers are shown, Safari adds a Developer pane to its settings, from which several behaviors can be controlled. Automation Allow remote automation

  19. DevTools in Apple Safari Browser

    1. Web Inspector: This is the principle device for internet improvement in Safari. It enables you appearance intently at net pages and find and fasten issues. You can test elements, styles, performance, and community pastime. 2. Safari Technology Preview: This is like a special web browser from Apple for builders.

  20. Turn Apple Vision Pro on or off

    Before you turn off Apple Vision Pro, always make sure any files you're working on are saved. Do any of the following: Press and hold the top button and the Digital Crown, then drag the slider.. Go to Settings > General > Shut Down, then drag the slider.. Say, "Siri, turn off my Apple Vision Pro." Take off Apple Vision Pro, place it on a secure surface (like a table or desk), then ...

  21. Let others use your Apple Vision Pro

    Some options may require that you set a passcode. See Set or change the passcode.. View Mirroring: If you want to see what a guest user is doing while using your Apple Vision Pro, tap View Mirroring, then choose a compatible device from the list of available devices. Only devices that are connected to the same Wi-Fi network as your Apple Vision Pro appear in the list.

  22. Developer activities you'll love

    Apple developer activities are in full swing. Here's a look at what's happening: Join an online session to learn to minimize churn and win back subscribers hosted by App Store experts. Celebrate International Women's Day with special in-person activities in Bengaluru, Cupertino, Shanghai, Singapore, Sydney, and Tokyo. Visit an Apple Vision Pro developer lab in Cupertino, London, Munich ...