How do I open Safari debugger on Mac?

Safari User Guide

• Welcome
• 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
  • Take notes
  • 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
  • Get extensions
  • 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
• Copyright

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

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

Open Safari for me

Please don’t include any personal information in your comment.

Maximum character limit is 250.

Thanks for your feedback.

Inspect Element is a go-to feature for almost every frontend or UI developer for debugging UI errors or making temporary edits in HTML or CSS scripts. For Chrome and Firefox browsers, this feature is pre-enabled and can be viewed with a right-click. However, the same feature needs to be enabled first for Safari users operating on a Mac before they can start inspecting web elements.

This article will demonstrate steps to enable the Inspect Element feature on Mac for Safari. It will also guide users on how they can remotely test their website on the Safari browser installed on a real macOS. Method 2 is being widely used by developers and testers across the world, due to limited access to devices and browser versions.

Read two easy methods for inspecting elements on a Mac –

Method #1 – Inspecting Elements on Mac-Safari

Follow the steps below to Inspect Element on Mac:

1. The primary step is to enable the Developer menu. To do so, open the Safari browser, click on Safari -> Preferences.
2. Click on Advanced. Check the Show Develop menu in menu bar checkbox. Doing this also allows you to Inspect Elements on iPhones by connecting them also.
   
3. The Inspect Element feature is now enabled. To cross-check, one can simply open any URL in Safari and right-click the mouse button to check if the option is enabled.

Did you know: How to remotely debug Safari on macOS and iOS Devices

Method #2 – Using Cloud-based platforms like BrowserStack for Live testing on real devices

Every web developer needs to ensure that their websites are optimized for different browsers installed on devices running on multiple platforms (Windows, macOS). In order to ensure a high-level of cross-browser and cross-platform compatibility, teams must test their websites in real user conditions across various device-browser combinations.

In such cases, teams can choose to leverage cloud-based platforms like BrowserStack that provides them with a real device cloud consisting of 2000+ real devices and browsers for testing.

Try Inspect Element on Real Mac for Free

The real device cloud enables teams to test their website or apps manually and automatically on:

1. Devices running on actual Windows and macOS environments
2. Real iOS and Android mobile devices
3. Leading browsers like Chrome, Safari, Firefox, Edge, and others

Besides, adopting the cloud-based testing approach also helps teams to eliminate the cost and effort involved in maintaining on-premise device labs. It is certainly more economically feasible for small organizations to access such a comprehensive test infrastructure on the cloud.

Pro Tip: Want to dive deeper into Selenium implementation on BrowserStack with free interactive courses and lab exercises? Visit Test University

QAs just need to select their desired operating system (Windows or macOS) and the desired browser to test the website on. The images below represent a test session on BrowserStack, running Safari 13 on Mac Catalina.

Also read: How to inspect element on Android device

Now follow the steps mentioned earlier to enable the Develop menu so as to inspect or debug web-elements. Once the Develop menu is enabled simply Right-click the mouse button and click on Inspect element.  One can now hover over the web elements in the developer console and interact with the DOM elements and observe the real-time interaction in Safari.

Thus, QAs can effortlessly execute remote cross browser testing on desired environments in real-world conditions. Teams also get access to vital features like:

1. Integrations with popular bug reporting tools like Jira, Trello, and Slack
2. Geolocation testing to test the geographical performance of a website
3. Testing websites on local environments using the local testing feature

Using the methods explained above, debugging critical errors occurring for a specific device or a browser becomes much easier. Additionally, platforms like BrowserStack help with speeding up test cycles resulting in the faster market release of websites and apps.

Start Testing on Real Device Cloud for Free

How do I debug Safari on Mac?

How do I open debugger in Safari?

How do I find developer tools in Safari on Mac?

How do you debug a website on a Mac?