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.
- Navigate to the Advanced tab.
- Select the “Display the Develop menu in the menu bar” check box.
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.”
2. Alternatively, you can use the Develop menu. Select Develop and then “Show Web Inspector” 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.
Use Inspect Element
Safari’s Inspect Element window will launch in a bottom-right pane.
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.
