How to Inspect an Element In Safari on a Mac


The Inspect Element functionality enables you to inspect and change the front-end of a website. Web developers, designers, and marketers frequently need to inspect web elements in order to debug them, execute layout tests, or alter CSS properties such as fonts and colors.

This article describes how to inspect web elements on your Mac’s Safari browser. Want to inspect an element in Safari? Mac users will find it in the Develop menu under ‘Inspect Element. Here’s how!

The Inspect Element function is a useful tool that allows you to view the inner workings of a website, allowing you to understand what is actually happening in the background.

How to inspect an element In Safari on a Mac

To begin, activate Inspect Element. This is how:

  • Click Safari and Preferences in Safari.

inspect an element In Safari

  • Navigate to the Advanced tab.
  • Select the “Display the Develop menu in the menu bar” check box.

inspect an element In Safari

Open Inspect Element

There are several ways to gain access to Inspect Element and begin editing, adding, and removing page elements:

1. Right-click (control-click) anywhere on the webpage using your mouse or trackpad and select “Inspect Element.”

inspect an element In Safari

2. Alternatively, you can use the Develop menu. Select Develop and then “Show Web Inspector” in Safari.

inspect an element In Safari
3. Additionally, you can use keyboard shortcuts. Simply tap these keys simultaneously: Option-Command-i.

4. Finally, you may change the Safari toolbar to include an icon for the Web Inspector. This is how:

  • Select View > Customize Toolbar in Safari.
  • Drag the Web Inspector icon into the toolbar using your mouse or trackpad.
See also  How to fix the problem, iPhone cellular update failed in 2020?

inspect an element In Safari

Use Inspect Element

Safari’s Inspect Element window will launch in a bottom-right pane.

inspect an element In Safari

There are several alternatives available to you:

  • To dock the pane to the right side of the window, click the “Dock to the side of the window” icon.
  • To open the pane in a new window, click the “Detach into separate window” icon.
  • Click the close (X) symbol to exit the Inspect Element page.

Tabs are located along the top of the panel:

  • This is the primary screen. This displays the entire page’s code (HTML, CSS, Javascript, and so on) as well as other features such as the page’s grid system.
  • This displays error warnings. It is a log of warnings.
  • This section contains the HTML code for the page.
  • This displays a full list of all requests sent to and received from the server.
  • Timelines: This displays a visual analyzer of all activities, including network requests,
  • Javascript, and RAM.
  • Storage.
  • Graphics.
  • Layers.
  • Audit.

You may adjust the pane by clicking the gear settings icon. For instance, you can choose between dark and light themes.

Kuldeep Sathwara
Kuldeep Sathwara
Kuldeep is an iOS lover loves to write about the iphones ,iPad, Mac Updates, issues , Fixes and More.

Related articles

Recent articles