How to Utilize Inspect Element on Mac with Safari Browser

If you’re new to front-end development or need to troubleshoot errors while testing web applications, you’ll likely include Safari in your list of compatible browsers. With Safari comes a powerful tool called Inspect Element, which goes beyond simply checking the source code of a webpage. Inspect Element allows you to examine everything that’s happening behind the scenes, including HTML, style sheets, media, and other elements. Here’s a comprehensive guide on how to effectively use Inspect Element on Mac.

Enabling Inspect Element for Safari on Mac

Before you can start using the Inspect Element tool on Mac, you need to enable it in your Safari browser. Follow these simple steps:

Step 1: Launch Safari and click on Safari in the menu bar, then select Preferences.

Step 2: Choose the Advanced tab.

Step 3: Check the box next to Show Develop menu in menu bar.

Once you’ve completed these steps, Inspect Element will be available for use in Safari on your Mac.

Opening Inspect Element in Safari

With the Inspect Element tool enabled, there are a few ways to access it. If you wish to examine a specific element on the page, you can select it first. Alternatively, you can open Inspect Element and choose the desired element from there. Here are the methods:

Click on Develop in the menu bar, then select Show Web Inspector.
Right-click anywhere on the page and select Inspect Element from the context menu.

How to Use Inspect Element on Mac

Once you’ve opened Inspect Element, you’ll find an array of tools at your disposal to review every item on the webpage. Let’s explore the basics of using Inspect Element effectively.

Step 1: Move and resize Inspect Element.

You have the flexibility to dock the tool at the bottom or on the side of the page, or even pop it out into a separate window. Use the icons located at the top left of the inspector toolbar to position it wherever you prefer. If you choose to dock the tool, you can also adjust its size by dragging the border.

Step 2: Customize the tabs.

Inspect Element offers nine tabs for you to work with, including Elements, Storage, Layers, and Timelines. If you find some tabs unnecessary, you can hide them. Right-click on a tab and select the tabs you want to see. This will place checkmarks next to the selected tabs and display them in the toolbar.

Step 3: Inspect an element.

To select items on the page to view within the tool, click on the compass icon in the toolbar. Then, either drag through or click on the desired element on the page. You can also select the code or item in the tool for the element to become highlighted on the page.

Step 4: Search for an element.

If you want to find a specific item on the page, such as a text string, click on the search icon located on the right side of the toolbar. Enter your search term into the box on the left and view the results directly below.

Step 5: View warnings or errors.

If Inspect Element detects any warnings or errors on the page, you’ll notice corresponding icons displayed in the toolbar. Simply click on an icon to view either the warnings or errors.

Step 6: Adjust the settings.

To customize the appearance of Inspect Element, display page rulers, enable source maps, zoom in or out, and more, click on the gear icon located on the far right of the toolbar. This will open the Inspect Element settings.