Skip to content

How to Inspect Element on Safari Mac Computer?

If you also want to inspect elements in your Safari browser to investigate the UI and change the HTML codes, then enable the Develop option in Safari Mac. Once the option is enabled, you can inspect the elements simply by right-clicking on the page and selecting Inspect Element. You can also use the shortcut key Cmd+Option+I.

People use websites to look for information and even research their work or school activities. Simple websites are designed using web programming languages that untrained people may find difficult to understand the backend.

If you want to learn more about the parts of a website and its backend, you need to inspect elements on Safari Mac.

Inspect element is a feature required by every front end or UI developer to debug UI errors or make quick edits in CSS and HTML scripts.

The feature is pre-enabled in Chrome and Firefox and can be viewed with just the right-click. Nevertheless, Safari Mac users need to enable it before inspecting web elements.

It was difficult for me to make quick edits to web codes without inspecting elements as a Mac user while working on a web development project. I recently learned about inspecting element features, and it instantly made my job easy.

Enable Develop Menu

Most average users do not need the developer menu that houses the Inspect Element feature. Hence, the Safari browser keeps this option disabled.

Inspecting the Elements of a website is only possible after enabling the Develop menu on your Safari browser. Activating the Develop menu is crucial since it will allow you to use Apple’s web inspector for debugging; hence, you should enable developer tools for Safari.

Here are the steps to enable the Develop menu in Safari for Mac:

  1. Launch the Safari Browser on Mac.
  2. Select the Preferences option.
    It will open the Preferences window.
  3. Switch to the Advanced tab within the Preferences window.
  4. Enable the checkbox for the Show Develop menu in menu bar option.
    Enable checkbox for Show Develop menu in Safari Menu bar

It will add a separate Develop menu in the Safari menu bar and activate the Inspect Element feature.

Inspecting Elements in Safari Mac

Once you have enabled the developer tools, you can move forward to inspect the elements in Safari on a Mac device.

There are multiple ways that you can invoke the inspecting option. You can opt for the one you find more accessible or preferable.

Right-Click for Context Menu

You can instantly open the inspecting element and make the required changes in the HTML codes. Just right-click on the web page you want to inspect elements and select Inspect Element.

Right click for Inspect Element context menu in Safari Mac

You will never face any kinds of difficulties in this method but do not forget to open the page first which you want to inspect.

Web Inspector from Develop menu

You have the option to open the inspect elements window from the Develop menu.

  1. Launch the Apple Safari on Mac.
  2. Click on the Develop menu present on the menu bar.
  3. Select the option Show Web Inspector from the list.
    Show Web Inspector option in Develop Menu of Safari Mac

It will pop up the Inspect Element window but make sure to open the page you would like to inspect.

Safari Shortcut keys

Shortcut keys are always the time savior, just a few keys are pressed at once, and the job is done. You can inspect the elements on your Safari browser with a set of shortcut keys.

In order to invoke the Inspect Element or Web Inspector, you can keypress Cmd + Options + I on the keyboard.

Web Inspector Elements tab in Developer Tools of Safari Mac

It is possibly the shortest method you can use once you have opened the page you would like to inspect.

Bottom Line: Inspect Element in Safari

The Inspect Element is helpful for anyone who investigates the UI and changes HTML and CSS codes.

The Inspect Element is enabled by default in Chrome and Firefox browsers, and you can access it using the correct mouse buttons. Nevertheless, Safari users on Mac should enable Develop menu for the same feature before checking the web code.

You can view a particular element’s source code and change the text, removing parts, hiding details, and modifying them as HTML to view the source code. You can also review the formatting of items, especially text elements, on the Styles tab.

By enabling this feature, you’ll be able to Inspect Elements of a web page with a single click or shortcut keypress.

F.A.Qs: Safari Inspect Element Menu

We have listed some of the most frequently asked questions related to Safari’s Develop menu and inspect element options in Mac OS:

Can I inspect elements in Safari without enabling Developer tools or Develop menu?

No, you cannot inspect elements without Develop menu enabled. You must enable developer tools first to use the web inspector.

How can I see the inspect element option when I right-click on the respective page?

In Safari’s preference, enable “show develop menu on menubar” to see the Inspect Element when you right-click on the web page.

Can I follow the same steps to enable the developer tool in all the Apple devices?

Yes, you need to follow the same steps to enable the developer tool to inspect elements on any Mac computer. However, the development menu or developer tools is restricted to MacOS only, and you cannot activate or see options on iPadOS or iOS.


Chrome WindowsChrome MacChrome iOSChrome AndroidFirefox Linux
Firefox WindowsSafari MacSafari iOSEdge AndroidChrome Linux
Edge WindowsFirefox MacEdge iOSSamsung InternetEdge Linux

If you've any thoughts on How to Inspect Element on Safari Mac Computer?, then feel free to drop in below comment box. If you find this article helpful, please consider sharing it with your network.



Leave a Reply

Your email address will not be published.