How to use Inspect Element on MacBook Pro using the Safari browser

If you’re just getting started as a front-end developer or need to debug errors while testing web applications, Safari is likely in your list of browsers to check for compatibility. With this comes the need for a tool called Inspect Element.

Going beyond just checking the source code of a page, Inspect Element lets you view everything going on behind the scenes of a webpage. You can see the HTML, style sheets, media, and other elements, all in one spot. Here’s how to use Inspect Element on Mac.

Step 1: Open Safari and click Safari - Preferences from the menu bar.

Step 2: Select the Advanced tab.

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

- Right-click any part of the page and choose Inspect Element. Right-clicking a specific page element will open that element in the inspector view.
- Choose Develop - Show Web Inspector from the top menu bar.
- Use the shortcut command-option-I.

[magrams]

Exactly what I was looking for, thank you!

[_jbustillo]

Very good & straight to the point, thank you

[Michael-iugv]

Thank you very much I was looking for this video for weeks 🤣

[edangaming]

Error: 'module' object is not callable * Serving Flask app 'main'
* Debug mode: off

[AzharRana-bs]

View page source on MacBook air bi bta dain

[QuantamOp]

bro there is no preference button in mine

[ivanzq]

how to watch mobil version? in not three

[dbuc]

I'm not a bot, but this method works for my MacBook Air 2020 as of Dec 16 2022.

[hegahonda]

this doesn't work anymore so for anyone that wants to know how to do this this method does not work anymore