If you’re new to working as a front-end developer or need to debug while testing web applications, Safari is probably on your list of browsers to check for compatibility. Along with that comes the need for a tool called Inspect Element.
Beyond simply checking the source code of a page, Inspect Element allows you to see everything that goes on behind the scenes of a website. You can view HTML, style sheets, media, and other elements all in one place. Here’s how to use Inspect Element on Mac.
Enable Inspect Element for Safari on Mac
Before you can use the Inspect Element tool on a Mac, you must enable it in Safari.
Step 1 – Open Safari and click on Safari > settings from the menu bar.
Step 2: choose Advanced eyelash.
Step 3 – Check the box Show Develop menu in menu bar.
Inspect Element is now available and ready to use in Safari on Mac.
Open watch item in Safari
With the tool on. you can access it in several different ways. If you want to see a specific element on the page, you can select it first. If not, you can open Inspect Element and select it there.
or click Develop > show web inspector in the menu bar or right-click on the page and select inspect element from the context menu.
How to use Inspect Element on Mac
Once you open Inspect Element, you’ll have all the tools you need to inspect every element on your website. And there are many tools at your fingertips. Let’s look at the basics of using Inspect Element.
Step 1: Move and resize the Preview element.
You can anchor the tool to the bottom or side of the page, or display it in a separate window. Use the icons in the upper left corner of the inspector toolbar to move it where you want it. If you dock a tool, you can drag the border to increase or decrease its size.
Step 2: Personalize the cards.
Inspect Element offers nine tabs that you can work with at the top of the toolbar. This includes assets, storage, layers, and timelines. You can hide the ones you don’t need if you want. Right-click on a tab, then select the ones you want to see. This places check marks next to them and places the cards on the toolbar.
Step 3: Inspect the element.
To select items on the page to display in the tool, click the compass icon on the toolbar. Then drag or click the element on the page. You can also select a code or element in the tool to display that element on the page.
Step 4: Find the item.
If you want to search for a specific element on the page, such as a text string, click the search icon on the right side of the toolbar. Enter your search term in the box to the left and view the results directly below.
Step 5 – Review any warnings or errors.
If the tool detects warnings or errors on the page, you’ll also see those icons in the toolbar. Click the icon to view warnings or errors.
Step 6: Adjust the settings.
To change the appearance of Inspect Element, display page rulers, enable source maps, zoom, and more, click the gear icon on the far right of the toolbar to open the Inspect Element settings.
When you’re done using Inspect Element in Safari, click X in the upper left corner of the toolbar to close it.
Take your code review, app testing, or debugging to the next level with Inspect Element on Mac for Safari.
editor’s recommendations
Categories: GAMING
Source: newstars.edu.vn