Skip to content

How to Inspect Elements in Safari Mac Computer

Learn how to inspect elements on Safari Mac. It is a good way to learn more about the parts of a website and how to make quick edits using developer tools.

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.

Inspect Web Page Elements on Safari browser

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 every front-end or UI developer requires to debug UI errors or quickly edit CSS and HTML scripts for preview.

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

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

Enable Develop Menu

Most average users do not need the Inspect Element feature’s developer menu. 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:

  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. 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 difficulties with this method but do not forget to open the page you want to inspect first.

Web Inspector from Develop menu

You can 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 want to inspect.

Safari Shortcut keys

Shortcut keys are always the time savior; a few keys are pressed simultaneously, and the job is done. You can inspect the elements on your Safari browser with shortcut keys.

To invoke the Inspect Element or Web Inspector, you can use keypress Cmd + Options + I on the keyboard.

Web Inspector Elements tab in Developer Tools of Safari Mac

It is possibly the shortest method once you have opened the page you want to inspect.

Bottom Line

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 can inspect elements of a web page with a single click or shortcut keypress.

FAQs

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 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 on all Apple devices?

You must follow the same steps to enable the developer tool to inspect elements on any Mac computer. However, the Develop menu or developer tools are restricted to MacOS only, and you cannot activate or see options on iPadOS or iOS.

How to Inspect Element in Safari Mac?

To inspect elements in Safari on a Mac computer, you need to enable Develop menu from the Preferences option. After enabling Develop menu, right-click on the context menu on the webpage and select Inspect Element menu to start the web inspector.

Lastly, if you've any thoughts or feedback on How to Inspect Elements in Safari Mac Computer, then feel free to drop in below comment box. You can also report the outdated information.

Please share the article if you find it helpful:

Disclosure: This page may contain affiliate links, which means we may receive compensation for your purchases using our links; of course at no extra cost to you (indeed, you may get special discounts).
nv-author-image

Shubham Kumar

Shubham is a graduate of Information Technology who likes to write about Windows troubleshooting and browser tips. He's always engaged with new tech and gadgets exploring new technologies. He also worked with TheWindowsClub and WindowsReport. Connect with him on LinkedIn.

Share us your thoughts and feedback

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