How to Use Inspect Element in Chrome, Safari, & Firefox

Jamie Juviler

Published: June 20, 2023

In a way, the job of web developers and designers is to convince users that a website is one singular entity, more than just a series of HTML elements formatted to look nice. With the right tools, however, even non-developers can peel back the curtain on any website to see what’s really happening behind the scenes.

woman learning how to inspect a webpage on her laptop

You might be familiar with the classic “view page source” trick, which displays the raw HTML of a page in the browser window. But, there’s a better way to do your detective work: The inspect element feature lets us view and even modify any website’s front-end, which can be quite useful when building a website or learning how websites work.

In this post, we’ll discuss what it means to “inspect” page elements, and how to do so on three common web browsers. If you’re in a pinch, jump ahead to what you’re looking for.

How to Inspect Elements in Chrome
How to Inspect Elements in Safari
How to Inspect Elements in Firefox

What does ‘inspect element’ mean?

Inspect element is a feature of modern web browsers that enables anyone to view and edit a website’s source code, including its HTML, CSS, JavaScript, and media files. When the source code is modified with the inspect tool, the changes are shown live inside the browser window.

Inspect is a web professional’s scout team. Developers, designers, and marketers frequently use it to peek inside any website (including their own) to preview content and style changes, fix bugs, or learn how a particular website is built. For instance, if you find an intriguing interface on a competing website, inspect element lets you see the HTML and CSS that make it up.

You can also think of your browser’s inspect feature as a “sandbox” of sorts: Play around with a web page as much as you want by changing content, colors, fonts, layouts, etc. When finished, just refresh the page to revert everything to normal. Inspect doesn’t change the website itself — only how it appears in your browser — so feel free to experiment!

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

Coding to Convention
Being Browser-Friendly
Minimizing Bugs
Optimizing Performance

Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now

Learn more

Inspect is also an incredibly valuable tool for those learning web development. Instead of viewing plain source code, use inspect element to interact with the page and see how each line of code maps to an element or style. By better understanding what constitutes the typical web page, you can communicate effectively with developers in the case of an error, or if you want to make a change.

Inspect may be a “developer tool,” but you don’t need to write any code or install any additional software to use it. You can do everything I’ve described right inside your browser — let’s learn how.

How to Inspect Elements

To inspect elements you have to right-click any part of a webpage and click Inspect > Inspect Element. Alternatively, you can press Command+Option+i on your Mac or F12 on your PC to do the same.

Every modern web browser has a native tool for inspecting elements. It can be accessed in any browser, but some browsers like Chrome and Safari have slight differences. Let’s discuss how to use the inspect tool in three desktop web browsers: Google Chrome, Apple’s Safari, and Mozilla Firefox.

How To Inspect Elements in Chrome

Chrome comes with a handy developer tool that allows you to inspect individual elements. This allows you to see the code behind a webpage, and even edit it on your own browser. (Note that the changes are only visible to you, not to anyone else across the web.)

Here's how to get started:

1. Launch Chrome and navigate to the page you want to inspect.

To use the element inspector in Google Chrome, first navigate to any web page. In these examples, I’ll be using HubSpot.com.

2. Open up the Inspect panel.

Once you arrive at your desired page, you have several ways to open Chrome's Inspect tool.

Option 1: Right-click any part of the page and choose Inspect. Right-clicking a specific page element will open that element in the inspector view.
Option 2: In the top menu bar, select View > Developer > Developer Tools.
Option 3: Click the three-dot icon in the top right corner of the browser window. From there, choose More Tools > Developer Tools. Then, click the Inspect tab in the popup.
Option 4: Use the shortcut control-shift-C on Windows or command-option-C on macOS.

3. Change the location of the inspect panel.

To better view the code, you can change the position of the inspector window.

The Chrome Developer Tools panel will open at the bottom of the browser window, but sometimes it opens in a separate window altogether.

If you want to change the location of the panel, click the three-dots icon in the top right corner of the panel (next to the X icon), then choose your preferred dock position.

I’ll choose Dock to right — this makes it easier to view the rendered page and its source:

the hubspot homepage with the chrome inspect element tool open

Along the top of the inspect panel, you’ll see tabs for Elements, Console, Sources, etc. These are all tools we can use to assess a page’s contents and performance. However, everything we need for inspecting is under the Elements tab.

4. Look at the source HTML code of the page.

The biggest area of the panel will contain the source HTML of the current page. Take some time to explore this region, and notice how hovering the cursor over the piece of code highlights the corresponding element on the page.

Blue indicates the contents of an element, green corresponds to padding, and areas in orange are margins.

5. Select a specific element to inspect.

Rather than trying to read through the code to find an element, we can also do the opposite — we can locate a piece of code by hovering over the page element itself. To do this, click the Element select icon in the top left corner of the panel:

the element select icon in the chrome inspect element tool

Next, click a page element. You’ll see the source code revealed in the inspect panel.

6. Edit the element's text, if desired.

Besides viewing, we can use the inspect tool to alter the page contents. Let’s start by swapping out some text.

First, find some text content in the source code. Then, right-click the element and choose Edit Text — this opens an inline text input in which you can write whatever you want. When you deselect the text input, you’ll see the changes take effect:

Or, what about no text at all? Just select the element in the source code and delete it. The H1 will be gone from the page.

the hubspot homepage with the chrome inspect element tool open and the heading element removed

Don’t worry though — it will reappear when you refresh the page.

7. Hide and edit elements on the page.

You can also hide any element without deleting it by right-clicking the element in the source code and choosing Hide element.

You can even add new page elements — right-click on an element in the source code and choose Edit as HTML. You’ll see a text field where you can paste HTML. For example:

the "add html element" text box in the chrome inspect element tool

the hubspot homepage with an additional heading element added

8. Edit the page's CSS code.

Moving down the Chrome inspect panel, we see the Styles tab. This shows us what CSS styling has been applied to the selected element. Click on lines of code to rewrite them, or activate/deactivate certain declarations by checking/unchecking the boxes next to them. Let’s do this for our <h1> element’s font-weight property:

gif of the font weight of an h1 element changing by using the inspect element tool in chrome

9. View the page's mobile version.

Finally, let’s cover one more feature of Chrome’s inspect feature, mobile view. When building a site, designers need to consider how its pages appear on desktop, mobile, and tablet screens alike.

Fortunately, Chrome lets you preview the same web page in multiple screen resolutions. Start by clicking the Toggle device icon in the top left corner of the panel:

the toggle device button in the chrome inspect element tool

From here, set the screen resolution manually or choose a device preset from the menu, then see how the page layout responds. You can also rotate the screen and even preview performance at “mid-tier mobile” and “low-tier mobile” speeds.

the mobile device view in google chrome inspect element tool

How to Inspect Element on Mac

To inspect an element on Mac, open up Safari. Select Safari > Settings > Advanced, then toggle the option that reads Show Develop menu in menu bar. Then, access your desired webpage, right-click, and tap Inspect Element.

Let's look at how to inspect a page on Mac in more detail below, including tips and tricks. We'll be using Safari, but technically you can also inspect a page on macOS by using Chrome or Firefox.