How to Inspect Element on Mac Chrome

All major web browsers come with tools that web developers use daily. One of the most commonly used, by far, is the Inspect Element tool.

Mac web developers that use Chrome can inspect the source code of any website and make slight changes to the code. But that begs the question, how to Inspect Element on Mac Chrome?

How does the tool work, and what can you use it for?

Hi, my name is Andreas. I’m a software developer with plenty of experience in developing web-based applications. Throughout the years, I’ve used the Inspect Element tool on Google Chrome for temporary editing a website’s CSS and HTML code.

Accessing the feature is very easy to do. Not only will I show you how to do it but explain its use. So, let’s start.

Easy Steps to Access Inspect Element on Mac Chrome

There are two quick ways to access the developer tools and the Inspect Element feature on Mac Chrome.

The first method is with Google Chrome browser opened on your Mac. Click on the three vertical dots on the top-right side and go to “More tools” > “Developer Tools.”

The second method to access the Inspect Element feature is to right-click anywhere on a web page and click on “Inspect.”

That’s it. You will then open the dev tools on Google Chrome Mac.

If this is your first time doing it, the amount of information you get might look overwhelming. The window that pops up gives you access to any website’s CSS (cascading style sheet) and HTML code.

You can make direct changes to the CSS code in Inspect Element to change the appearance of any website.

Bear in mind that these changes are purely client-sided. What this means is that the changes only apply to you.

How to Use Inspect Element on Chrome Mac

Once you open Inspect Element, a pop-up window will appear, by default, on the right side. It will split your window in two, making things harder to see.

You can change where the window appears by clicking on the three vertical dots and choosing the preferred docking option. Inspect Element also lets you see the website in different resolutions and devices.

If you want to see how a particular website looks on mobile devices or tablets, click on the “Toggle device toolbar” option that looks like a smartphone next to a tablet icon. The keyboard shortcut on Mac is Command + Shift + M.

If you want to view the code of a particular section of the website, use the “Select an element in the page to inspect it” tool. The Mac shortcut is Command + Shift + C.

These aren’t the only things to do in the Inspect Element section. You can also manually resize the inspector box by dragging the edge.

With Inspect Element open, you will notice several tabs on the top. These include “Elements,” “Sources,” “Console,” etc. Web developers use these tabs for different purposes. The others aren’t important now. What you’re interested in is “Elements.” 

With all that out of the way, why do you need this feature?

Use Cases for Inspect Element

I’ve somewhat hinted at the beginning about the use of Inspect Element. Web developers and designers can use the feature to change the CSS and HTML code on any website.

You don’t have to own the website; it can be any website you want. Since the changes are client-sided, they don’t apply to anyone but you. You can change the color and size of fonts, background color, add borders, etc.

These help developers experiment with different designs to make their work more efficient, especially when communicating with clients.

For example, let’s say you’re designing a website for someone and are going through it together. Your clients give you feedback on the background color. Instead of going to the code, making the changes, and saving, you can do it by going into Inspect Element.

This gives you temporary editing capabilities that save time and make you more efficient. When the client gives the green light on the new changes, go ahead and make the corrections in the CSS or HTML code.

Web developers and designers aren’t the only people that use the feature. Content writers can use Inspect Element to omit sensitive information before taking a screenshot. Let’s say you’re writing an article about how to delete saved passwords on Chrome Mac.

The easiest way to show the reader how to do that is by walking them through the process and showing screenshots. But you don’t want the reader to know your passwords.

So instead of taking the screenshot and blurring out the passwords, you can omit the information from the web page before taking the screenshot.

Lastly, SEO experts can use Inspect Element to gain valuable insight into a competitor’s hidden keywords.

So, all in all, there are several uses for this tool.

What Can You Do in Inspect Element on Chrome Mac?

Despite that writers and SEO marketers use Inspect Element, designers and developers have the most use of this tool. Through the Elements panel, you can:

  • Live edit a website’s CSS code,
  • Make changes to a website’s layout by changing the HTML code,
  • Test the website for broken code,
  • Tweak the code in real-time.

Since the “Element” tab is only one out of many in the Chrome developer tools panel, designers and developers get access to other tabs that help them with work.

For example, the “Console” tab runs JavaScript code. If your website uses JavaScript functions, you can see how the code behaves in real-time in the “Console” tab.

Conclusion

That concludes this guide on how to Inspect Element on Chrome Mac. No doubt, some of you will use this tool in the future. But you don’t need to be a designer or developer to use the tool.

If you’re also a writer, such as myself, there might come a time when you need to Inspect a website to take a screenshot. Regardless of its uses, I hope this article has helped you learn all about Inspect Element, ways to access it, and what to use it for.

Leave a Reply

Your email address will not be published.