How to Inspect Element on Mac browsers

We’re used to the notion that websites are just graphical, user-facing representations of all the work (e.g. code and design) that was done in the background. It’s hard to imagine that these two worlds can interact. Webpages we see belong in the browser, whereas webpage building happens primarily in a text editor.

But it’s not quite like that. Since websites are just code visualizations that happen in the browser, there is one special option called Inspect Element that lets you not only peek into the underlying code but also make temporary tweaks and test how the website could look with some reversible changes.

So let’s see how to use Inspect Element on Mac in a variety of browsers and touch on a few more reasons for why it’s a good idea to do so.

Why should you use the Inspect Element shortcut?

If you’ve been previously working without knowing how to inspect pages online, you might wonder why’d you need to do it at all?

There are quite a few benefits in learning how to open Inspect Element for a variety of roles. 

• Developers have Inspect Element as their go-to browser feature. It’s incredibly useful in debugging and testing out changes in a temporary environment before implementing them permanently.
• Designers can see how their mockups are implemented in real life or collect ideas from other websites. 
• Marketers can use Inspect Element to change text online or check whether Google Analytics has been installed properly, for example. 
• Customer Support Agents should enable Inspect Element to be able to effectively communicate with developers regarding bugs reported by users and website visitors. 

How to Inspect Element in all browsers

Before we dive into a few practical examples, we should review how to actually enable Inspect Element in various browsers and what are their corresponding Inspect Element shortcuts.

Safari, in some ways, is the least Inspect Element-friendly browser as it doesn’t even show you this option right from the start — you have to enable Inspect Element first: 

1. Launch Safari.
2. Go to Preferences (⌘ + ,).
3. Navigate to the Advanced tab.
4. Check “Show Develop menu in menu bar.”

After that, you’ll get access to Safari dev tools in the menu bar (called Develop), where you can find Show Page Source (Option + ⌘ + U). Use Show Page Source ➙ Elements to display all the website code and if you point your cursor to a specific section it’ll get highlighted in the browser as well. If you want to open a Safari Inspect Element option on something specific within the page, you can right-click on it and select Inspect Element.

Firefox and Google Chrome work similarly but already have the Inspect Element pre-enabled. The Firefox Inspect Element shortcut is Option + ⌘ + I, and you can also right-click on any element to Inspect. 

Chrome inspector can be found in View ➙ Developer in the menu bar or with a shortcut of Option + ⌘ + I. Otherwise, you can Inspect Element on Chrome just the same way — by right-clicking on any part of a webpage. 

How to make website changes with Inspect Element

When you know how to Inspect Element on Mac, you get the superpower of being able to temporarily change any website element. To do this, you have to enable Inspect Element options and literally tweak any part of the HTML or CSS there. 

The process of making changes with Inspect Element is similar in all browsers. For example, to change specific text in Safari: 

1. Right-click on the text and select Inspect Element.
2. Double-click on the text in the code to make it editable.
3. Write the text replacement.
4. Hit Enter.

In the same way you can change an image or animation on any webpage — just replace the current URL with the one of the new image or GIF. 

To change colors or font sizes, open Inspect Element and make adjustments to CSS. You can quickly turn off any options using a checkbox and see the result live, or type in new values. 

Finally, you can even activate other HTML element states. For example, make a button look like it’s being clicked on or hovered over. To do this, just right click on the HTML element with a state and select a new one. 

Sometimes, you might encounter a bug where your updates wouldn’t be automatically displayed on the page. This might happen because your browser has cached the website and is not really updating on every refresh. To remedy the situation, you should purge your browser cache with a tool like CleanMyMac X. 

CleanMyMac X is the best utility to optimize your Mac for speed, security, and extra storage. As such, it features a variety of scans and tools for any Mac need imaginable. For example, to delete cache files from your browser: 

1. Launch CleanMyMac X.
2. Navigate to the Privacy tab.
3. Select the browser you want to clean.
4. Check cookies, local storage, and anything else applicable to you.
5. Click Remove.

How to inspect pages with emulation

A very important aspect of designing any website today is knowing how it’s going to work on a variety of devices, particularly smartphones. Naturally, you need to make sure your design is fully responsive. If your website is live, you can just visit it on your smartphone. But what do you do when your project only exists on your local machine? 

One of the most frequently used features of the Chrome inspector is emulating the environment on various devices right on your Mac. To see how your website looks on mobile you can just enable the Inspect Element on Chrome by pressing Option + ⌘ + I. On the left-hand side, you’ll then have a fully interactive version on the website for mobile. You can change the type of the device in the dropdown up top as well as the resolution and scale. Now you can make changes and see them reflected on any device. 

The next level of designing websites for various devices is turning those websites into functional apps for complete native-like functionality. Gone are the days when creating apps required extra knowledge and time. Now you can create a great app from a website instantly with tools like Unite and Coherence X.

Unite is a tool based on WebKit 2 that simply transforms any website into a Mac app on the fly. You can see the app in a Mac native window, use shortcuts, enable notifications, save the icon to Dock, and much more. 

Coherence X similarly makes Mac apps out of websites, with lots of the most popular one, from Netflix to Facebook to Twitter, already preset for you to use. Each app you create shields your data and acts independently of the browser or any other process on your Mac. The engine in the backend is powered by Google Chrome, so you know you can rely on your new app to work perfectly at any time. 

As you can see, learning how to Inspect Element on Mac can bring a variety of benefits, from debugging to building out new ideas across various devices. It’s important to remember that you can use a few tools to assist you. CleanMyMac X can help clear cache and optimize your Mac. Unite and Coherence X can turn websites into apps. 

Best of all, CleanMyMac X, Unite, and Coherence X are all available to you absolutely free for seven days through the trial of Setapp, a platform with more than 240 Mac, iOS, and web apps there to help you build, design, and market any project you can imagine. Try every Setapp app today at no cost and let your imagination run free.