How to inspect element on Mac

How to inspect element on Mac

What you need to know:

  • To inspect elements on Safari: Open SafariRight-click the webpage → click Inspect Element; Open Safari → tap the trackpad with two fingers.
  • The shortcut to open Inspect Element in Safari and Chrome is Option + Command + I.

Are you just starting as a front-end developer? Inspect Element is an essential component for every UI engineer to test and alter the HTML or CSS content. While the Firefox and Chrome browsers have a straightforward method, the method is complicated if you’re using Safari on Mac.

Moreover, I’m not giving you any ideas, but you can also use the Inspect Element feature to mess with your friends by changing the prices of certain goods or adding texts to webpages, etc. Read along to learn how to use the Inspect Element feature and more about it.

What is inspect element?

Inspect Element allows users to access developer tools embedded in web browsers. These tools allow them to view or edit the HTML and CSS source code in which a webpage is written.

You can view the changes made to the code in real-time on the web pages; however, the inspect element changes are temporary and will not be reflected anywhere other than on your web browser. Its primary purpose is to give you an idea of how changes made to the code will affect the webpage.

How to inspect elements on a Mac

The Inspect Element feature is not available by default on Mac if you’re using the Safari browser. Other browsers like Chrome and Firefox have simpler procedures in comparison. If you were looking for a reason to switch your default browser, now would be the right time.

Here’s how to do it on different browsers:

View source code in Safari on Mac

Before you can Inspect Element/ Source Code on Mac, you must change a few settings and turn on the Developer menu in Safari. Here’s how to do it;

  1. Open Safari browser.
  2. Click Safari at the top left → select Preferences.
  3. Click Advanced.
  4. Select the Show Develop menu in menu bar checkbox.

    View source code in Safari on Mac

Now that you’ve turned on the Develop menu, here’s how to inspect elements on Safari:

  1. Open Safari
  2. Right-click the webpage.
  3. Click Inspect Element.
  4. Optional: You can tap the trackpad with two fingers.

    Turned on the Develop menu in Safari on Mac

You can now view the source code of the website!

Inspect element in Chrome on Mac

Using Inspect Element on Chrome does not come with complications. Here’s how it works:

  1. Open the Chrome browser.
  2. Right-click or tap the trackpad with two fingers.

That’s it! You can now view the website’s source code on the right. You can follow the same steps to inspect elements on Firefox.

Inspect element in Chrome on Mac

How to change the text using Inspect Element

Now that you’re well-versed with how to open the Inspect Element tool on your Mac in Safari and Chrome, here’s how you can change the text using it.

  1. Open Safari/Chrome browser.
  2. Right-click or tap the trackpad with two fingers when you want to inspect the text.
  3. In the source code, replace the original text with the text you want to add.

You can see the results reflected in real-time. Note that these changes are temporary and do not permanently impact the web page!

FAQs

Q. What is the shortcut for Inspect Element on Mac? 

The shortcut to open Inspect Element on Mac in Safari and Chrome is Option + Command + I.

Q. Is it legal to view the source code of a website? 

While it is legal to view the source code of any website, you need to take the necessary permissions from the website owner if you intend on using it.

Q. Can you disable the Inspect Element tool in Browser? 

No. You cannot disable the Inspect Element tool in browsers. There are some workarounds but you cannot turn off the Inspect Element tool entirely.

Q. How do I see my saved passwords using inspect Element? 

If the password you entered is hidden and you want to view it, right-click the password box → select Inspect Element → look for type=”password” and replace the password with text. The hidden password will be visible now.  

Q. Why can’t I view the source code on Mac in Safari?

To view the source code in Safari on Mac, you must enable the Develop menu. Simply follow the steps shown above. Once your turn it on, the Inspect Element option will be visible.

Read more:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.