How to Inspect Element on Safari for Mac

This is how you Inspect Element on Safari for macOS

MacBook Pro 16-inch 2023

When you know how to Inspect Element on Safari for Mac, you can delve into the HTML and CSS code of a web page, to see how it's really functioning behind the scenes or to make changes to how the site looks or functions (these are only temporary and the changes will be discarded after you close your browser). 

If you're on a website you've built, you can use Inspect Element to debug issues with a page's front end.

Chrome and Firefox users will be used to simply right clicking on a page element and then selecting Inspect Element. However, with Safari the Inspect Element feature is not enabled by default, so you may be scratching your head about where to find it, especially if you're unfamiliar with Apple's browser. To enable Inspect Element, you first have to switch on Safari's Developer Menu.

If you aren't sure how, fear not, as this guide will show you exactly how to Inspect Element on Safari. All you need to do is read on.

  • In Safari, click Safari in the tool bar
  • Click Settings and head to Advanced
  • Check Show Develop menu in menu bar
  • On a webpage, right click an element
  • Click Inspect Element

Read on to see illustrated instructions for each step.

1. Open Safari's settings

A screenshot showing how to Inspect Element in Safari for Mac

With the browser open, click Safari in the top left, then click Settings .

2. Under Advanced, enable the Develop menu

A screenshot showing how to Inspect Element in Safari for Mac

Click the Advanced tab , then check Show Develop menu in the menu bar . You can now close the Settings window .

3. Right click and select Inspect Element

A screenshot showing how to Inspect Element in Safari for Mac

Right click a page element and select Inspect Element from the menu.

4. Inspect the page code

A screenshot showing how to Inspect Element in Safari for Mac

You can now inspect the page code in HTML and CSS. Have fun!

If you'd like to learn more ways to get the most out of your Mac, we have lots of helpful tutorials just like this one. Find out how to enable macOS beta updates , so you can see and test the new features coming to your Mac in upcoming OS releases. I

f your Mac is behaving a little sluggishly, learn how to clear the cache on Mac , as this may help speed things back up. If you're sick of screenshots sitting on your desktop and spoiling your clean background, discover how to change the screenshot save location on Mac . Messy desktop? Learn how to use desktop stacks on Mac .

Sign up to get the BEST of Tom’s Guide direct to your inbox.

Upgrade your life with a daily dose of the biggest tech news, lifestyle hacks and our curated analysis. Be the first to know about cutting-edge gadgets and the hottest deals.

Peter is Reviews Editor at Tom's Guide. As a writer, he covers topics including tech, photography, gaming, hardware, motoring and food & drink. Outside of work, he's an avid photographer, specialising in architectural and portrait photography. When he's not snapping away on his beloved Fujifilm camera, he can usually be found telling everyone about his greyhounds, riding his motorcycle, squeezing as many FPS as possible out of PC games, and perfecting his espresso shots. 

Feeling slow? These extensions may be bogging Chrome down, says report

Live video translation is coming to Microsoft Edge — what you can do with it

I've been covering Memorial Day sales for 15 years — here are the deals I'd shop this weekend

Most Popular

  • 2 Leesa, Molecule, Saatva and more — 5 best cooling mattress and topper deals to shop in today’s Memorial Day sales
  • 3 Tempur-Pedic's Memorial Day mattress sale is live — 5 deals I'd buy for better sleep
  • 4 Tempur-Pedic vs Purple: Which mattress for joint pain should you buy in today's Memorial Day sales?
  • 5 Beat's $200 headphones are better than the Sony WH-1000XM5 in these 3 ways
  • 2 I've been covering Memorial Day sales for 15 years — here are the deals I'd shop this weekend

safari browser inspect element

  • Meta Quest 4
  • Google Pixel 9
  • Google Pixel 8a
  • Apple Vision Pro 2
  • Nintendo Switch 2
  • Samsung Galaxy Ring
  • Yellowstone Season 6
  • Recall an Email in Outlook
  • Stranger Things Season 5

How to use Inspect Element on Mac 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.

Enable Inspect Element for Safari on Mac

Open inspect element in safari, how to use inspect element on mac.

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.

What You Need

Mac computer

Safari browser

Before you can use the Inspect Element tool on Mac, you need to enable it in Safari.

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

Step 2: Select the Advanced tab.

  • You can play almost any Windows game on Mac — here’s how
  • 5 web browsers you should use instead of Google Chrome or Edge
  • How to find a Wi-Fi password on Mac

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

Inspect Element is now available and ready for you to use in Safari on Mac .

With the tool enabled. you can access it a couple of different ways. If you want to look at a particular element on the page, you can select it first. Otherwise, you can simply open Inspect Element and select it from there.

Either click Develop > Show Web Inspector from the menu bar or right-click the page and pick Inspect Element from the shortcut menu.

Once you open Inspect Element, you’ll have all the tools you need to review every item on the webpage. And there are a lot of tools at your fingertips. Let’s take a look at the basics of using Inspect Element.

Step 1: Move and resize Inspect Element.

You can dock the tool at the bottom or on the side of the page or pop it out to a separate window. Use the icons on the top left of the inspector toolbar to move it where you want. If you dock the tool, you can drag the border to increase or decrease its size.

Step 2: Customize the tabs.

Inspect Element provides nine tabs for you to work with across the top of the toolbar. These include Elements, Storage, Layers, and Timelines. You can hide those you don’t need if you like. Right-click a tab and then select the ones you want to see. This places checkmarks next to them and puts the tabs in the toolbar.

Step 3: Inspect an element.

To select items on the page to display in the tool, click the compass icon in the toolbar. Then, drag through or click the element on the page. You can also select the code or item in the tool for that element to display on the page.

Step 4: Search for an element.

If you want to find a specific item on the page such as a text string, click the search icon on the right of the toolbar. Enter your search term into the box on the left and view your results directly beneath.

Step 5: View warnings or errors.

If the tool detects warnings or errors on the page, you’ll see these icons display in the toolbar as well. Click an icon to view either the warnings or errors.

Step 6: Adjust the settings.

To change the appearance of Inspect Element, show page rulers, enable source maps, zoom, and more, click the gear icon on the far right of the toolbar to open the Inspect Element settings.

When you finish using Inspect Element in Safari, click the X on the top left of the toolbar to close it.

You can take your code inspection, application testing , or debugging to the next level with Inspect Element on Mac for Safari.

Editors' Recommendations

  • How to choose between a MacBook and a Windows laptop
  • How to change your MAC address on Windows and Mac
  • How to convert FLAC to MP3 on Mac, Windows, and web
  • How to forget a network on a Mac
  • How to take a screenshot on a Mac
  • How-To Guides

Sandy Writtenhouse

Think about the words and phrases on our computers that we type over and over again, without even thinking about it. Emails and site logins are just a few of these frequently keyed fields, but there are plenty others. Now what if we told you there was a neat shortcut on macOS that lets you automatically input repeated words? It’s a feature called text replacements, and it’s also available on iPhones and iPads.

When you take a photo with an iPhone or iPad, the default format that the images saves in is Apple’s HEIC. This has been the norm for several years now, and even though more and more devices are beginning to support this file type, you may need to convert some of your images into a more compatible extension, like a JPEG.

If you want to have a bit of music playing in the background or want to have your favorite YouTube video running in the corner of your screen, then the picture-in-picture YouTube feature needs to be on your radar. This allows you to turn your YouTube videos into a tiny pop-up window that can be moved and repositioned around your screen.

Mac users have several ways to activate the feature, including support on both Safari and Google Chrome. There's also a nifty Chrome extension that simplifies the task to a single button press. Here's a look at how to enable picture-in-picture for YouTube on your Mac.

Productivity

How to use Inspect Element in Chrome, Safari, and Firefox

Hero image showing the Inspect Element feature in Chrome

There's a powerful tool hiding in your browser: Inspect Element.

Right-click on any webpage, click Inspect , and you'll see the innards of that site: its source code, the images and CSS that form its design, the fonts and icons it uses, the JavaScript code that powers animations, and more. You can see how long the site takes to load, how much bandwidth it used to download, and the exact color in its text.

Or, you could use it to temporarily change anything you want on the page.

Inspect Element is a perfect way to learn what makes the web tick, figure out what's broken on your sites, mock up what a color and font change would look like, and keep yourself from having to Photoshop out private details in screenshots. Here's how to use Inspect Element—your browser's secret superpower—to do all the above and more.

Table of contents:

Why should I use Inspect Element?

Screenshot showing the writer using Inspect Element

If you've never peeked at a website's code out of curiosity, you might wonder why you should learn how to use Inspect Element. Below are just a few reasons why different roles can benefit from learning this trick of the trade. 

Designer: Want to preview how a site design would look on mobile? Or want to see how a different shade of green would look on a sign-up button? You can do both in seconds with Inspect Element.

Writer: Tired of blurring out your name and email in screenshots? With Inspect Element, you can instantly change any text on a webpage.

Support agent: Need a better way to tell developers what needs to be fixed on a site? Inspect Element lets you make a quick example change to show what you're talking about.

Web developer: Need to look for broken code, compare layouts, or make live edits to a page? Inspect Element does that, too.

For these and dozens of other use cases, Inspect Element is a handy tool to know. For now, let's see how to use the main Elements tab to tweak a webpage on your own.

How to inspect element on Google Chrome

Method 1: Right-click anywhere on the webpage, and at the very bottom of the menu that pops up, click Inspect .

Screen shot showing the writer navigating to Inspect

Method 2: Click the hamburger menu (the icon with three stacked dots) on the far-right of your Google Chrome toolbar, click More Tools , then select Developer Tools . 

Screenshot of the writer navigating to Developer Tools

Once you take your preferred route to opening the Developer Tools pane, by default, it will show the Elements tab—that's the famed Inspect Element tool we've been looking for.

If you want to change the orientation of the Inspect Element pane, click the three vertical dots on the top-right side of the Inspect Element pane near the "X" (which you'd click to close the pane). Now, you'll see options to move the pane to the bottom, left, or right side of your browser or to open the pane in a completely separate window (undock view).

Screenshot of the writer showing how to change the orientation of the Inspect Element pane

For this tutorial, let's dock the pane on the right side of our browser window to give us more space to work. You can make the Developer Tools panel wider or narrower by hovering over the left-side border. Once the ↔ cursor appears, drag the pane left to widen it or right to narrow it.

How to inspect element on Firefox

To get to Inspect Element on Firefox you have three options (just like on Chrome).

Method 1: Right-click anywhere on the page and click Inspect at the bottom of the menu.

Screenshot showing the user navigating to Inspect

Method 2: Click the hamburger menu (three horizontal lines at the top-right corner of the window), select More tools , then click Web Developer Tools .

Screenshot of the writer navigating to More tools

Method 3: The keyboard shortcut on Firefox is command  + option + I for Macs and Control + Shift + C for PCs.

The Element pane in Firefox likes to pop up at the bottom of the window, which doesn't give you much room to work with. To move that pane to the side and free up more room, click the hamburger menu (three horizontal dots, next to the "X" in the top-right corner) and click Dock to Right (or left, if you prefer). 

Screenshot of the writer navigating to Dock to Right

If you like, you can also move the pane into a separate window in this menu. You can also expand the pane further or narrow it by hovering over the edge until your cursor changes, and then drag it to the left or right.

How to inspect element on Safari

To launch Inspect Element with Safari, you'll need to activate the developer capabilities in the advanced settings first. Here's how.

Click the Safari dropdown in the top navigation bar above the Safari window, and then click Preferences .

Screenshot of the writer navigating to preferences

Navigate to Advanced , and check the box at the bottom of the window by Show Develop menu in the menu bar . Close the window.

Screenshot of the writer navigating to Advanced and clicking Show Develop menu in main bar

Now, you should be able to right-click anywhere on the page and click Inspect Element to open the Elements pane.

Screenshot of the writer navigating to Inspect Element

The pane should appear along the bottom of your window. To move it to a side alignment and give yourself a little more space to look at the code, click the Dock to right of window (or left of window) option on the top-left corner of the pane, next to the "X."

Screenshot of the writer showing how to side align the pane

I prefer right, but you can easily switch this to the other side or detach the pane into its own separate window if you prefer. To make the pane wider or narrower, just hover over the edge until the cursor changes to the dragger, then drag to move the edge.

Tools you can access through Inspect Element (+ tutorials)

Now that we're in Inspect Element, there's an array of useful tools at our fingertips that we can use to make any site look exactly how we want. For this tutorial, we'll focus on the Search , Elements , and Emulation tabs. These aren't the only useful tools Inspect Element opens up—not by a long shot—but they're extremely helpful ones that beginners can start putting to use right away.

Note that, for simplicity, I'll be using Chrome to demonstrate, but the instructions should be essentially the same for all three browsers.

Use Inspect Element Search to find anything on a site

Wondering what goes into your favorite sites? Search is your best tool for that, aside from reading a site's entire source code.

You can open the default Elements view, press Ctrl + F or command + F , and search through the source code. But the full Search tool will also let you search through every file on a page, helping you find text inside CSS and JavaScript files or locate an icon image you need for an article.

Screenshot of the writer navigating to Search

In the search field, you can type anything— anything —that you want to find on this webpage, and it will appear in this pane. Let's see how we can use this.

Type meta name into the search field, press Enter, and you'll immediately see every occurrence of "meta name" in the code on this page. Now, you can see this page's metadata, the SEO keywords it's targeting, and whether or not it's configured to let Google index it for search. That's an easy way to check what your competitors are targeting—and to make sure you didn't mess anything up on your site.

Screenshot the writer searching meta name

Search is an effective tool for designers as well since you can search by color, too. Type #ff4a00 into the search field and press Enter (and make sure to leave the Match Case button unchecked to view all of the results). You should now see every time the color #ff4a00, Zapier's shade of orange, appears in this site's CSS and HTML files. Then, just click the line that reads "color: #ff4a00;" to jump to that line in the site's HTML and tweak it on your own (something we'll look at in the next section).

Screenshot of the writer searching for the color: #ff4a00

This is a handy way for designers to make sure a site is following their brand's style guide. With the Search tool, designers can easily check the CSS of a webpage to see if a color is applied to the wrong element, if an incorrect font family is used on a webpage, or if you're still using your old color somewhere on your site.

The Search tool is also the perfect way to communicate with developers better since you can show them exactly where you've found a mistake or exactly what needs changing. Just tell them the line number where the problem exists, and you'll get your fix that much quicker.

Or you can change the webpage yourself with Elements , the core part of Chrome's Developer Tools.

Change anything with Elements

Front-end developers use the Inspect Element tool every day to modify the appearance of a webpage and experiment with new ideas—and you can, too. Inspect Element lets you tweak the appearance and content of a webpage by adding temporary edits to the site's CSS and HTML files.

Once you close or reload the page, your changes will be gone; you'll only see the changes on your computer and aren't actually editing the real website itself. That way, you can feel free to experiment and change anything—and then copy and save the very best changes to use later.

Let's see what we can do with it.

Click the Elements tab in the Developer Tools pane—and if you want more room, tap your Esc key to close the search box you had open before. You should see the HTML for this page—now you know how the sausage gets made.

Screenshot of the writer highlighting a part line of the  Elements tab in the Developer Tools pane

In the top-left corner of the Developer pane, you'll see an icon of a mouse on top of a square. Click it, then you can select any element on the page you want to change. So let's change some things!

Change the text on a webpage

Ever wanted to change text on a site? Perhaps to see how a new tagline would look on your homepage or to take your email address off a Gmail screenshot? Now you can.

Click the icon of a mouse cursor on a square in the top-left corner of the pane.

Screenshot of the writer highlighting text on the What is AI post

Double-click the highlighted text in the Developer Tools pane (not the text on the live page) to turn it into an editable text field.

Screenshot of the writer highlighting a section of copy

Type anything you want in this text field ("Auri is a genius" should work just fine), and press Enter .

Voila! You've just (temporarily) changed the text on the webpage.

Screenshot of the writer highlighting the changed text

Refresh the page, and everything will go back to normal.

Fun? Let's try another way to change some things on this page by closing out of the Developer pane altogether. You can then highlight any part of the live webpage you want to edit, then right-click it and hit Inspect .

Screenshot of the writer navigating to Inspect

When your Developer Tools pane opens, it should automatically highlight that sentence. Pretty neat, huh? It's the little things that count.

Now that we've selected a sentence to change on our blog, let's change how it looks.

Change the color and font of elements

On the lower half of the Developer Tools pane, you'll see a sub-pane with a few additional tabs that allow you to change how this text looks on the page. Let's get started on the Styles tab.

Screenshot of the writer highlighting a specific line of code for "What is AI"

You may notice that some things are crossed out. This means that these styles are not active for the element we've selected, so changing these values will have no effect. 

Let's try changing something.  

Look through the code for the "font-size" field and click into it. Let's change it from 34px to 42px.

Screenshot of the writer changing the font size

Now scroll down to "color" and change it to Zapier's signature #ff4a00.

Screenshot of the writer navigating to the code color

This will look a bit cramped, so let's finish by changing the "line-height" to 44px.

Screenshot of the writer changing the line height

Now check the blog post to see the difference.

Screenshot of the current "What is AI? section

Now let's try something really cool.

Change element states

Want to see how a button or link will look once someone interacts with it? Inspect Element can show that, too, with force element state tools. You can see how the element will look once a visitor hovers over the element (hover state), selects the element (focus state), and/or has clicked that link (visited state).

As with the other examples, you'll need to click the mouse cursor/box icon. For this example, we'll select the "Artificial Intelligence (AI)" tag on the "What is AI" article to try a color change. 

In the Developer Tools pane, right-click on that code in the Elements tab, hover over Force state , and click the :active: option. Do this one more time, but click the :hover: option this time.

safari browser inspect element

That will change the button's background to black, which is what happens when you hover over the button on the live site. 

safari browser inspect element

Now, change the "background-color" value to #ff4a00.

safari browser inspect element

You should instantly be able to see what the new hover color will look like.

Screenshot of the orange CTA button

Try experimenting—change the :hover: color, then uncheck :hover: in the right-click menu and drag your mouse over the button to see the new button color.

Change images

You can easily change images on a webpage with Inspect Element, too. Using the same "What is AI?" blog post as an example, let's replace the orange solid color background on the "Power your automation with AI" button with a dramatic photo of a solar flare from NASA.

First, copy this link to the image: https://c1.staticflickr.com/9/8314/7931831962_7652860bae_b.jpg

Open Inspect Element on the orange background of the "Power your automation with AI" button and look for the "background-color" code in the pane.

Screenshot of the writer highlighting the background color field

Click "background-color" and replace color with image —this should cause an error. Just replace the color code with url and then paste the URL you copied into the parentheses.

Screenshot of the writer highlighting the code where the user should add the background image URL

This should automatically replace that boring single-color background with a flashy new image.

Screenshot of the changed "What is AI" post and CTA button

Note: You can also change a photo to a GIF or a video—all you need is a link to the file, and you can add it in.

Editing text is handy, swapping out images is fun, and changing colors and styles just might help you quickly mock up the changes you want made to your site. But how will that new tagline and button design look on mobile?

That's where Emulation comes in—it's where everything we've reviewed so far can be applied even further. Let's see how.

Test a site on any device with Emulation

Everything has to be responsive today. Websites are no longer only viewed on computers—they're more likely than ever to be viewed on a phone, tablet, TV, or just about any other type of screen. You should always keep that in mind when creating new content and designs.

Emulation is a great tool to approximate how websites will look to users across various devices, browsers, and even locations. Though this does not replace actual testing on a variety of devices and browsers, it's a great start.

In the Developer Tools pane, you'll notice a little phone icon in the top-left corner. Click it. This should change the page into a tiny, phone-styled page with a menu at the top to change the size.

Screenshot of the writer using Emulation

Resize the small browser to see how things would look if you were browsing on a tablet, phone, or even smaller screen. Or, click the menu at the top to select default device sizes like Surface Duo or iPhone 12 Pro—let's go ahead and select the latter.

The webpage screen should shrink down to the device's size, and you can zoom in a bit by clicking the percentage dropdown next to the dimensions.

If you change the device preset to "Responsive," you can enlarge the view by dragging the right edge of the webpage emulation right. See what happens? Dragging the screen along the grid allows you to see how the webpage will change as the screen size changes. You can even toggle portrait and landscape views by clicking the little rotation icon at the end of the top menu.

Play around with the other devices to see how the webpage and screen resolution changes. All of the other developer tools we've gone over so far will also react to the device view. 

Emulate mobile device sensors

When you start interacting with a device preview, you may notice that your mouse now appears as a little circle on the webpage. This allows you to interact with the page as if you're on your mobile device.

If you click while dragging the page down, it doesn't highlight text like it normally would in your browser—it drags the screen down like you're on a touchscreen device. Using this view, you can see how large touch zones are on a webpage. This means you can see which buttons, icons, links, or other elements are easily touchable with the finger.

You can even make your browser act like a phone. Press your Esc key to open the Search pane in Inspect Element again, and this time click the hamburger menu on the top-right. Select More tools and then Sensors to get four new tools: Location, Orientation, Touch, and Emulate Idle Detector state.

safari browser inspect element

Touch lets you choose whether the circle selector that acts more like a finger than a normal mouse cursor is forced or device-specific. 

Orientation lets you interact with motion-sensitive websites, such as online games that let you move things by moving your phone. 

Location lets you pretend you're in a different location.

Emulate Idle Detector state allows you to toggle between different idle user conditions.

Let's try viewing this site from Berlin. Just click the dropdown and select the city—nothing changes, right?

safari browser inspect element

This is because there isn't content on this page that changes based on your location. If you change the coordinates on a site like Groupon.com that uses your location to show localized content, though, you would get different results. Go to Google.com in a different location, and you'll perhaps see a new Google logo for a holiday in another country, or at least will get the results in a different language.

Emulation is a great way to put yourself in your user's shoes and consider what the user may be seeing on your webpage—and it's a fun way to explore the international web.

Emulate mobile networks

You can also see what it's like to browse a site on different networks—perhaps to see if your site will load even if your users are on a slower 3G network.

To give it a try, click the hamburger menu in the top-right corner of the pane, hover over More tools , and select Network conditions .

Screenshot of the writer navigating to Network conditions

There, you can choose from fast or slow 3G, or offline to see how the page works without internet. Or, click Add... to include your own testing (perhaps add 56Kbps to test dial-up internet). Now, reload the page, and you'll see just how long it'd take for the site to load on a slow connection—and how the site looks while it's loading. That'll show why you should improve your site to load faster on slow connections.

Screenshot of the writer navigating to Fast 3G

You can also change your user agent—uncheck Use browser default in the User agent field and select Firefox — Mac perhaps to see if the site changes its rendering for other browsers on different devices. That's also a handy hack to make webpages load even if they claim they only work in a different browser.

Inspect Element keyboard shortcuts

Now that you've learned the ropes, here are some Inspect Element keyboard shortcuts that'll make using it even easier. 

Related reading:

This article was originally published in January 2015 by Auri Pope. The most recent update, with contributions from Dylan Reber, was in May 2024.

Get productivity tips delivered straight to your inbox

We’ll email you 1-3 times per week—and never share your information.

Bryce Emley picture

Bryce Emley

Currently based in Albuquerque, NM, Bryce Emley holds an MFA in Creative Writing from NC State and nearly a decade of writing and editing experience. His work has been published in magazines including The Atlantic, Boston Review, Salon, and Modern Farmer and has received a regional Emmy and awards from venues including Narrative, Wesleyan University, the Edward F. Albee Foundation, and the Pablo Neruda Prize. When he isn’t writing content, poetry, or creative nonfiction, he enjoys traveling, baking, playing music, reliving his barista days in his own kitchen, camping, and being bad at carpentry.

  • Software & web development
  • Internet browsers

Related articles

A hero image for Google Sheets app tips with the Google Sheets logo on a green background

The 19 best Google Sheets add-ons to boost your productivity

The 19 best Google Sheets add-ons to boost...

Hero image with the OpenAI logo

What is GPT? Everything you need to know

ChatGPT vs. GPT: What's the difference?

Hero image with an icon representing an AI agent

What is multimodal AI? Large multimodal models, explained

What is multimodal AI? Large multimodal...

Improve your productivity automatically. Use Zapier to get your apps working together.

A Zap with the trigger 'When I get a new lead from Facebook,' and the action 'Notify my team in Slack'

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

Jamie Juviler

Published: May 20, 2024

When I started my coding journey, I couldn’t always pinpoint what made a web page great — all of the code underneath that craft a well-designed experience. So, I would use the inspect element on my browser to peel back the curtain. Here, I could see how pages were coded so I could understand how to recreate elements for my own projects.

pair learns how to how to inspect element on a mac

The inspect element feature lets us view and even modify any website’s front end. This simple trick can help you understand how websites work and even help you build your own.

In this post, I’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.

Table of Contents

How to Inspect Elements in Chrome

How to inspect elements in safari, how to inspect elements in firefox, get a closer look with inspect, 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 I find an intriguing interface on a competing website, the inspect element lets me see the HTML and CSS that make it up.

I also think of my browser’s inspect feature as a “sandbox” of sorts. I can play around with a web page as much as I want by changing content, colors, fonts, layouts, etc. When finished, I just refresh the page to revert everything to normal.

Inspect doesn’t change the website itself — only how it appears in your browser. You can then experiment without worry!

Inspect is also an incredibly valuable tool for those learning web development. Instead of viewing plain source code, I can use the 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, I can communicate effectively with developers in the case of an error or if I 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 web page 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.

Chrome comes with a handy developer tool that allows you to inspect individual elements. This allows you to see the code behind a web page 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.

safari browser inspect element

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

You're all set!

Click this link to access this resource at any time.

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

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

2. Open up the Inspect panel.

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

  • Option 1 : I can 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, I can select View > Developer > Developer Tools .
  • Option 3: I can click the three-dot icon in the top right corner of the browser window. From there, I can choose More Tools > Developer Tools . Then, I can click the Inspect tab in the popup.
  • Option 4 : I can 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, I 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 I want to change the location of the panel, I can click the three-dots icon in the top right corner of the panel (next to the X icon), and then choose my preferred dock position.

Pro tip: Choosing Dock to right 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, I see tabs for Elements , Console , Sources , etc. These are all tools I can use to assess a page’s contents and performance. However, everything I need to inspect 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. I always spend some time exploring this region. 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.

Pro tip: If you’re a beginner and want to learn more about the different elements you’re inspecting, check out this HTML guide for beginners.

5. Select a specific element to inspect.

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

the element select icon in the chrome inspect element tool

8. Edit the page's CSS code.

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

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 me 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

Now, when I click a page element, the Web Inspector reveals the corresponding source code.

7. Edit, add, or delete page elements.

Like Chrome’s inspector, Safari lets me modify, add, and remove page elements. To edit the page, I can right-click an HTML element in the inspect panel. I can then choose an option from the Edit menu.

Web Inspector will prompt me for a new text input and then display my changes in real time:

how to inspect element on mac, the hubspot homepage with the heading text changed in safari inspect element tool

If I want to delete a page element, I just select some code and delete it. Or, I can right-click and choose Toggle Visibility to hide an element without deleting it.

8. Activate or deactivate the page's CSS code.

To the right, I have the Styles column, where I can change or activate/deactivate CSS declarations for any element, like so:

When testing content and style changes, I want to see the effect on mobile screens as well as desktops. I’ll cover that next.

Pro tip: When seeking inspiration from other web pages, I always take advantage of the Styles tab in my browser’s developer tools to tailor the CSS according to how I envision it on my own page. Try it out. This allows you to refine and adapt design elements to suit your specific preference before moving forward with coding it in your own workspace.

Safari’s Responsive Design Mode allows me to preview a website across common devices.

To view the page in a mobile viewport, I choose Develop → Enter Responsive Design Mode . In this mode, I can use the same inspector tools on pages formatted for Apple devices or set the dimensions myself:

how to inspect element on mac, the mobile view in the safari inspect element tool

What I like: Safari’s responsive design tab not only lets you test your web page’s responsiveness on devices, but you can also test its behavior across different browsers. Serving as a one-stop-shop for testing responsiveness, the Safari dev tools are a huge time saver.

Firefox is another great option for inspecting a web page in either macOS, Windows, or Linux. Here’s how to get started.

1. Open Firefox's inspect element tool.

To open the Firefox Inspector, I have several options:

  • Option 1: I can 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.
  • Option 2: I can select Tools → Browser Tools → Web Developer Tools from the top menu bar.
  • Option 3: I can use the shortcut control-shift-I or press f12 in Windows or command-option-I in macOS.

Next, I go to the web page I’d like to inspect. I’ll be using HubSpot.com again.

3. Change the location of the inspector panel.

The Firefox inspector appears along the bottom of the window by default. To change its position, I can select the three-dots icon in the top right corner of the inspector, then choose an alternative display option.

the inspect element tool in the firefox browser

4. Look at the HTML code of the page.

Firefox’s inspector panel is comparable in features to Chrome’s and Safari’s. The HTML source code indicates the corresponding page element with color codes — content is blue, padding is purple, and margins are yellow:

I can also find code by selecting elements on the page. To enter selection mode, I click the cursor icon in the top left corner:

the select element button in the firefox inspect element tool

I can then click any page element to reveal its source code in the inspect panel.

6. Modify or delete page elements.

To modify or delete a page element, I select its code in the inspector. Then, I can either double-click to change the text, right-click and choose Edit as HTML, or click Plus Button next to the “Search HTML” bar to add code. Or I can simply delete the code and see the resulting changes on the page.

the firefox inspect element text editor

7. Toggle the page's CSS styles.

To toggle the CSS styling of an element, I use the Filter Styles region at the bottom of the inspect panel. There, I can uncheck the box next to a CSS declaration to deactivate it (or write in new code myself):

8. View the page's mobile version.

Finally, Firefox’s tools also come with a mobile preview option. To use it, I can click the Responsive Design Mode icon in the top right corner of the panel:

the mobile view button in firefox developer tools

Responsive Design Mode lets me choose from several preset screen resolutions or set my own. I can also toggle connection speed and device pixel ratio:

the responsive design editor in firefox inspect element tool

What I like: As a software developer, it is very important that I make web pages that can be easily used by anyone. Firefox’s accessibility tab in its inspector tool allows me to check if my nodes accessibility tree is missing any important properties. I can verify color contrasts too.

The quickest way to access this feature is by right clicking on the page → choose Inspect → select the two arrows next to debugger → select Accessibility .

Once you learn the basics of your browser’s inspect tool, you might realize just how much information about your favorite websites is publicly available. With a few clicks, you can explore how exactly web pages are built, what styles they use, how they optimize for search engines, how they format on mobile screens, and a lot more.

Editor's note: This article was originally published in December 2020 and has been updated for comprehensiveness.

coding-hacks

Don't forget to share this post!

Related articles.

The Beginner's Guide to Website Development

The Beginner's Guide to Website Development

Are .io Domains Good? Why Tech Startups Love .io Domains

Are .io Domains Good? Why Tech Startups Love .io Domains

15 Backend Project Ideas for Your Developer Portfolio

15 Backend Project Ideas for Your Developer Portfolio

37 Backend Interview Questions and Answers: The Ultimate Guide 2022

37 Backend Interview Questions and Answers: The Ultimate Guide 2022

How to Build & Run an Effective Website With a Small Team or Budget [Startup Tips]

How to Build & Run an Effective Website With a Small Team or Budget [Startup Tips]

How to Code a Website for Free in 6 Easy Steps

How to Code a Website for Free in 6 Easy Steps

How Long Does it Take to Build a Website?

How Long Does it Take to Build a Website?

Flush DNS: What It Is & How to Easily Clear DNS Cache

Flush DNS: What It Is & How to Easily Clear DNS Cache

How to Make a Website With User Accounts and Profiles [With WordPress, Wix, and More]

How to Make a Website With User Accounts and Profiles [With WordPress, Wix, and More]

Wildcard SSL Certificates: What They Are & How They Work

Wildcard SSL Certificates: What They Are & How They Work

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

  • I Tried Both: Apple Watch 9 vs Fitbit Charge 6
  • Best Places to Print Photos Online

How to Inspect an Element on a Mac

Learn more about the sites you view

safari browser inspect element

  • Swansea University, Staffordshire University

safari browser inspect element

  • Saint Mary-of-the-Woods College

What to Know

  • In Safari: Right-click on a webpage and select Inspect Element .
  • In Chrome, you can right-click and click Inspect .
  • To enable the feature in Safari: Safari > Preferences > Advanced > check the Show Develop menu in menu bar box.

This article teaches you how to inspect a website's element on Mac. It looks at how to do so via Safari and Google Chrome. 

How Do You Use the Inspect Element Feature on a Mac?

Before inspecting elements on Mac when using Safari, you need to enable the developer menu within the browser. Here's a look at how to switch it on and what to do to inspect an element. 

If you can see Develop between Bookmarks and Window, the Developer Menu has already been enabled, and you can skip to step 4.

Using the Inspect Element Feature in Safari

Here's how to use Inspect Element in Safari, the default browser on Mac computers.

In Safari, click Safari > Preferences .

Click Advanced .

Click Show Develop menu in menu bar then close the window.

When browsing a website, right click on the item you wish to inspect. 

Click Inspect Element .

You can now view the code behind the website you've inspected.

Using the Inspect Element Feature in Chrome on a Mac

If you use Chrome instead of Safari on your Mac, it's even easier to view an element as there's no need to enable the feature. Here's what to do.

In Chrome, browse to a website.

Right click on the element you wish to inspect.

Click Inspect .

You can now view the code in a side window on Chrome. 

Why Can’t I Inspect on My Mac?

You might not be able to inspect an element on your Mac if you haven't enabled the Developer menu within Safari. Here's a reminder of how to do it.

How to Make Website Changes by Inspecting the Element

Besides allowing you to view the code on a website, it's also possible to temporarily change any website element through Inspect Element. Here's how to do so via Safari.

The process is very similar on other browsers.

When browsing a website, right click on the item you wish to inspect.

Double click on the text in the code to make it editable.

Delete it or enter a new string of text.

The code has now been temporarily changed just for your benefit. 

Why Would You Want to Use the Inspect Element Feature?

Being able to inspect an element is helpful for many reasons.

  • To change code on the fly . Website designers can temporarily change things around on a website to see how the changes affect things. 
  • To check the code . Both designers and marketing people can check the code to confirm that things like Google Analytics details are there. 
  • To view images separately from a site . If a site doesn't allow you to open an image in a new tab or window, viewing the element makes it possible. 
  • Tinker . Seeing the code of a web page can help you understand what you see, removing the mystery of what and why of what's up with the site you are on. It's like taking apart an appliance to see how it works, but there are no screws to lose in this case.

Yes. However, if you plan to use any code or assets from a website, be sure to check with the owner and add a copyright note.

In Chrome, right-click the page and select Inspect , then go to the top section and right-click the <html> tag (e.g. <!doctype html>). Select Copy > Copy outerHTML , then paste the code into a text or HTML file.

Yes. Right-click the element you want to copy and choose Inspect . Right-click on highlighted code and select Copy > Copy styles .

To reveal hidden passwords, right-click on the password text box and select Inspect . In the highlighted section, look for type=”password” and replace password with text . There are easier ways to show all your passwords in Chrome .

Get the Latest Tech News Delivered Every Day

  • How to Pin Sites in Safari and Mac OS
  • What Is a Home Page?
  • How to Turn on Location Services on a Mac
  • How to Activate the iPhone Debug Console or Web Inspector
  • How to Turn Off AdBlock on Mac
  • How to View HTML Source in Safari
  • Add More Features by Turning on Safari's Develop Menu
  • How to Allow Pop-Ups on a Mac
  • What Is Safari?
  • How to Enable and Allow Cookies on Mac
  • How to Share Liked Songs on Spotify
  • How to Activate and Use Responsive Design Mode in Safari
  • How to Turn Off a Pop-Up Blocker on a Mac
  • How to View Internet Explorer Sites on a Mac
  • How to View the HTML Source in Google Chrome
  • How to Use WhatsApp on a Mac

How to Inspect Element on a Mac on Any Browser

Whether you use Safari, Chrome, or any other browser on your Mac, we'll teach you how to access Inspect Element to make alterations to a webpage.

Ever been curious about the source code of a webpage? Almost every web browser, including your Mac's native browser, has a feature that lets you look at it—it's called Inspect Element.

Not only can you see the HTML, CSS, and JavaScript webpage code with Inspect Element, but you can also modify it. This allows developers to test webpages and web applications with the feature, but users can also use it to alter fonts in their personal browsers.

Check out the steps below to learn how to use Inspect Element on any browser on your Mac and start changing code.

How to Inspect Element in Safari and Other Browsers on a Mac

Using the Inspect Element feature is the same across all web browsers available for macOS. You can activate it with just a few clicks. The exception to this is Safari, which requires Inspect Element to be enabled before it can be used. We've outlined how to enable it in a separate section below.

But to use Inspect Element on your favorite Mac browser in general (or once it's enabled):

  • Open your desired browser and navigate to a webpage you want to inspect.
  • The Inspector tool will open, and the source code for the webpage will appear. Read or make alterations to the code however you want; for example, you can edit webpages on Safari using Inspect Element to tinker with text and images .

How to Enable Inspect Element in Safari

To enable the Inspect Element feature in Safari on your Mac, you have to activate the Develop menu. To do this:

  • Open Safari, go to Safari > Settings from the menu bar, or hit Cmd + , on your keyboard.
  • Head to the Advanced tab.
  • Check the Show Develop menu in menu bar box.

The Develop menu should now appear in the top menu when you're using Safari, and you should be able to access Inspect Element on your Mac from the context menu!

When to Use Inspect Element in Your Browser

Developers can use Inspect Element to try layout changes on webpages and web applications and test functionality for users in different browsers. But it can be used by normal users as well.

If a webpage has a font you find difficult to read, or if it's in a color you don't like, you can use Inspect Element to alter it so the page is more legible or pleasant to look at. You can also change webpage headers via Inspect Element to prank your friends .

Inspect Element only changes things on your Mac and the specific browser you're using. So, use it any time you want a quick change to a website to suit your preferences.

Inspect Element: A Feature to Improve User Experience

Knowing how to use Inspect Element on your Mac can make your use of webpages more streamlined and pleasant. It can offer quick fixes to formatting issues and let developers fix bugs.

We hope our guide helps you utilize the feature, so the next time you have issues with a webpage in Safari or any other browser, you know you have a solution!

Q: How Do I Use Inspect Element in a PDF on My Mac?

To use Inspect Element in PDFs on your Mac, the process is quite straightforward. Open a PDF in the Preview app and click on the information icon . Here, you'll then be able to access numerous aspects—such as file size, the content creator, and more.

Q: How Do I Use Inspector Element Without Right-Clicking on My Mac?

Using Inspector Element without tapping on your trackpad is incredibly simple. All you need to do is press command + option + I simultaneously. After doing that, the Inspector Element window should appear at the bottom of your screen; you can close it in the same way you would with the right-click method. You can use plenty of other Mac keyboard shortcuts for several other functions on your device, too.

Q: Does Inspector Element Automatically Open Across All Windows?

No—the Inspector Element window will only open in the tab that you're currently using. If you want to use the feature in another one of your tabs, you'll need to then go manually to that and follow the same protocol you did for the first.

  • PRO Courses Guides New Tech Help Pro Expert Videos About wikiHow Pro Upgrade Sign In
  • EDIT Edit this Article
  • EXPLORE Tech Help Pro About Us Random Article Quizzes Request a New Article Community Dashboard This Or That Game Popular Categories Arts and Entertainment Artwork Books Movies Computers and Electronics Computers Phone Skills Technology Hacks Health Men's Health Mental Health Women's Health Relationships Dating Love Relationship Issues Hobbies and Crafts Crafts Drawing Games Education & Communication Communication Skills Personal Development Studying Personal Care and Style Fashion Hair Care Personal Hygiene Youth Personal Care School Stuff Dating All Categories Arts and Entertainment Finance and Business Home and Garden Relationship Quizzes Cars & Other Vehicles Food and Entertaining Personal Care and Style Sports and Fitness Computers and Electronics Health Pets and Animals Travel Education & Communication Hobbies and Crafts Philosophy and Religion Work World Family Life Holidays and Traditions Relationships Youth
  • Browse Articles
  • Learn Something New
  • Quizzes Hot
  • This Or That Game
  • Train Your Brain
  • Explore More
  • Support wikiHow
  • About wikiHow
  • Log in / Sign up
  • Computers and Electronics
  • File Manipulation

4 Easy Ways to Inspect Element on an iPhone

Last Updated: August 8, 2023 Fact Checked

  • Safari Developer Tools
  • Web Inspector
  • JavaScript Bookmark
  • Edit Webpage Shortcut

This article was written by Luigi Oppido and by wikiHow staff writer, Nicole Levine, MFA . Luigi Oppido is the Owner and Operator of Pleasure Point Computers in Santa Cruz, California. Luigi has over 25 years of experience in general computer repair, data recovery, virus removal, and upgrades. He is also the host of the Computer Man Show! broadcasted on KSQD covering central California for over two years. This article has been fact-checked, ensuring the accuracy of any cited facts and confirming the authority of its sources. This article has been viewed 42,292 times.

Need to debug a website on your iPhone but can't find "Inspect Element?" While this common browser feature isn't built into Safari on your iPhone, there are still ways you can inspect website elements without paying for an app. The official way is to use Safari Developer Tools, which requires you to connect your iPhone to a Mac. If you're not near a computer, you can install a free app called Web Inspector, or create a JavaScript bookmark (which also works on Chrome). Or, if you're not debugging a web app and just want to change the way a website looks, you can use an iPhone shortcut called Edit Webpage.

Things You Should Know

  • Use Safari Developer Tools to inspect elements by connecting your iPhone to your Mac.
  • To inspect an element without a computer, install the Web Inspector app, or use a JavaScript bookmark.
  • To edit text or remove images from a website, try the Edit Webpage shortcut in the Shortcuts app.

Using Safari Developer Tools

Step 1 Connect your iPhone to your Mac with a USB cable.

  • You will need to use a USB cable to connect , as connecting with Wi-Fi won't allow you to inspect an element.

Step 2 Enable Web Inspector on your iPhone.

  • Open your iPhone's Settings .
  • Scroll down and tap Safari .
  • Scroll down and tap Advanced .
  • Tap the "Web Inspector" switch to turn it on (green).

Step 3 Enable the Develop menu in Safari on your Mac.

  • Click the Safari menu.
  • Click Settings .
  • Click Advanced .
  • Select "Show Develop menu in menu bar." [1] X Research source

Step 4 Go to the website you want to inspect on your iPhone.

  • As you select items in the Elements tab on your Mac, you'll see the selected element highlighted on your iPhone. [2] X Research source
  • If you want to continue using Inspect Element without leaving your iPhone plugged in to your Mac, click the Develop menu again and select Connect via Network .

Using the Web Inspector Extension

Step 1 Install Web Inspector from the App Store.

  • Web Inspector is useful for inspecting elements in Safari as it doesn't require you to connect your iPhone to a Mac. If you want to debug in Chrome, you'll need to use a JavaScript bookmark instead.
  • While this extension does have the same name as Safari's "Web Inspector," it's not an official Apple tool.

Step 2 Enable the Web Inspector extension in Safari.

  • Open Safari and go to any website.
  • Tap Aa in the address bar.
  • Tap Manage Extensions . [3] X Research source
  • Tap the switch next to "Web Inspector" to enable it.

Step 3 Go to the webpage you want to inspect.

  • To allow Web Inspector to inspect elements on this website for one day only, select Allow for One Day .
  • If you choose the latter option, you won't have to give Web Inspector permission to access websites again in the future.

Step 5 Tap

  • When you're finished, double-tap Aa to close Web Inspector.

Using a JavaScript Bookmark

Inspect Element on iPhone Step 12

  • 1 Go to the website you want to inspect. This trick involves creating a bookmark that contains a string of JavaScript code to bring Inspect Element to any iPhone web browser. This trick will work in both Safari and Chrome, though the process of creating the bookmark will be a little different.

Step 2  Create a...

  • Chrome: Tap the three-dot menu and select Add to Bookmarks .
  • Safari: Tap the Sharing icon at the bottom, then tap Add to Favorites .

Step 3 Edit the bookmark to replace the URL.

  • Chrome: Tap the three-dot menu and select Bookmarks at the top. Tap and hold the new bookmark, then tap Edit Bookmark.
  • Safari: Tap the open book icon at the bottom, then tap Favorites . Tap and hold the bookmark you just created, then tap Edit .

Step 5 Replace the bookmark contents with code.

Using the Edit Webpage Shortcut

Step 1 Open the Shortcuts app on your iPhone.

  • You'll find the Shortcuts app in your App Library.
  • This is helpful if you want to edit text or remove images and other objects from a website you're viewing.

Step 2 Tap Gallery.

  • Scroll down and tap Shortcuts .
  • Tap Advanced .
  • Toggle on "Allow Running Scripts."

Step 6 Open the website you want to inspect in the Safari app.

  • Tap any element to edit it. Now you can edit text and images on the website without having an official Inspect Element feature built into Safari.

Expert Q&A

  • Adobe Edge Inspect was a popular tool for inspecting elements on websites, but the tool is no longer in development or receiving updates. [4] X Research source Thanks Helpful 1 Not Helpful 0
  • There are also several paid apps that will allow you to inspect web elements on your iPhone, including Achoo HTML Viewer & Inspector and Inspect Browser. Thanks Helpful 2 Not Helpful 0

safari browser inspect element

You Might Also Like

Use Winrar to Fix Corrupted RAR and ZIP Archives

  • ↑ https://support.apple.com/guide/safari/use-the-developer-tools-in-the-develop-menu-sfri20948/mac
  • ↑ https://support.apple.com/guide/safari-developer/inspecting-overview-dev1a8227029/mac
  • ↑ https://support.apple.com/guide/iphone/get-extensions-iphab0432bf6/ios
  • ↑ https://helpx.adobe.com/edge-inspect/system-requirements.html

About This Article

Luigi Oppido

  • Send fan mail to authors

Is this article up to date?

safari browser inspect element

Featured Articles

The Top 12 Traits That Make a Person Unlikeable

Trending Articles

How to Answer “How’s It Going?” in Any Situation

Watch Articles

Make Homemade Liquid Dish Soap

  • Terms of Use
  • Privacy Policy
  • Do Not Sell or Share My Info
  • Not Selling Info

wikiHow Tech Help Pro:

Level up your tech skills and stay ahead of the curve

Sign up for our daily newsletter

  • Privacy Policy
  • Advertise with Us

How to Inspect Elements in Safari, Chrome, and Firefox on Mac

Abbaz Uddin

Inspecting elements is an essential skill that allows anyone to understand how a website is built and to make necessary adjustments. You don’t have to be a web developer to benefit from inspecting elements on a Mac with any modern browser with just a few simple clicks. Fortunately, inspecting elements is a built-in tool in all modern browsers, and you don’t need any special software to do it. This tutorial provides step-by-step instructions on how to inspect elements in Safari, Chrome, and Firefox on Mac.

Tip : looking to switch from Chrome to Firefox as your default browser? We provide everything you need to ensure a smooth transition.

What Is Inspect Elements?

How to inspect elements in google chrome on mac, how to inspect elements in safari on mac, how to inspect elements in firefox on mac, frequently asked questions.

Inspect Elements is a powerful feature available on all modern web browsers that allows you to learn more about a webpage, like its structure, layout, and styling of it. Developers and online content designers often use these tools to debug, experiment, and troubleshoot a web project. You can easily select an element of a website, and the inspection tool will give all the information beneath a particular element, like the color, font, size, and other elements.

The inspection tool also allows you to modify the code temporarily and view the changes being applied to the webpage in real-time. However, the changes will only be visible to you. It is a powerful tool for you, whether you’re an experienced developer or just curious to learn how a particular website is built.

Did you run into the Firefox Relay pop-up? We show you how to remove the Firefox Relay drop-down from email fields .

Let’s start with how to inspect elements in Chrome, as it is the most popular browser. The steps are fairly simple, allowing you to get started in no time.

How to Open the Inspection Panel in Google Chrome

  • Open the Chrome browser, and visit any website you’d like to inspect.

Google Chrome Icon On Mac

  • Right-click on any blank space and select “Inspect.”

Highlighted Inspect Button On Chrome

  • You will see the inspection panel on your screen.

Inspect Element Panel On Chrome In A Mac

Good to know : not using Chrome for Mac? Discover how to use Google Chrome’s “Inspect” tool for website diagnostics on a Windows PC.

How to Inspect a Particular Element of a Webpage in Google Chrome

Now that you have successfully opened the inspection panel, let’s learn how to interact with an element.

  • From the left corner of the inspection panel, click on “Select an element to inspect it.”

Select An Element To Inspect It Option On Chrome

  • Select any element. For this example, we’re inspecting an image on the webpage. You can do this with any element you would like. You will see a white box with some basic information, like the type of element, name of the file, etc. On the right side, you will see the code associated with the particular element.

Inspecting An Image Element On Chrome

How to View the Mobile Version of a Website in Google Chrome

  • From the left side of the inspection panel, click on the “Toggle Device Toolbar” option.

Toggle Device Toolbar Option On Chrome Inspection Panel

  • You will see the website react on a mobile device. You can still perform your inspection by clicking on the element, and the information will be based on smartphones.

Mobile View On Chrome Inspection Tool

  • If you click on the “Responsive” drop-down above, you can select a device of your choice from the list. When you do so, you will see how the webpage reacts to a particular smartphone model.

Supported Mobile Devices On Chrome Inspection Tool

How to Change the Location of the Inspection Panel in Google Chrome

  • Click on the vertical three-dot ellipsis from the right corner of the inspection panel.

Customize And Control Dev Tools Button On Chrome In A Mac

  • Select the location for the inspection dock: on the left, below, or on a pop-up window.

Highlighting Dock Side Settings On Chrome

The inspect elements feature is turned off by default on Safari, as it is a part of the developer option. So first, we need to enable the “Develop Menu.”

Tip : making the switch from Chrome to Safari as your default browser on your Mac? We have all the steps to help you transition without losing your favorite bookmarks, extensions, and more.

How to Open the Inspection Panel in Safari

  • Once you open Safari and are already on the website you want to inspect, click on the “Safari” icon in the top menu bar and select “Settings.”

Safari Settings Button From Top Menu

  • This will take you to the “General” tab. Select the “Advanced” tab on the far right.

Safari Advanced Settings From The Settings Panel

  • Click the checkbox next to “Show Develop menu in the menu bar” to have access to all advanced features of Safari.

Show Develop Menu In Menu Bar Option On Safari Settings

  • Right-click anywhere on the website and select “Inspect Element.” This will open the inspect elements panel in Safari.

Inspect Element Button On Safari

  • For more advanced options, click on the “Develop” tab in the menu bar.

Develop Option On Menu Bar

How to Inspect a Particular Element of a Webpage in Safari

  • Click on the “inspect” icon that looks like a bullseye in the left corner of the inspection pane.

Start Element Selection On Safari In A Mac

  • Use your cursor and select the element you would like to inspect. We are inspecting the title tag for this example, but you can inspect any element you would like.

Inspecting A Heading Tag On Safari Inspect Tool

How to View the Mobile Version of a Website in Safari

  • From the top menu bar, click on the “Develop” option and select “Enter Responsive Design Mode.”

Enter Responsive Mode On Safari Inspection Tool

  • Select any device model you want to use to inspect the webpage.

Iphone View On Safari Inspection Tool

How to Change the Location of the Inspection Panel in Safari

From the left side of the inspection panel, select the location you would like, and the inspection pane will be moved accordingly.

Change Inspection Dock Location On Safari

Firefox is a popular choice among seasoned developers and designers when working on web projects. Let’s see how we can inspect elements in Firefox on Mac.

How to Open the Inspection Panel in Firefox

  • Once you are on the webpage you want to inspect in the Firebox browser, right-click and select “Inspect.”

Inspect Button On Firefox In A Mac

  • This will open the inspection panel on the Firefox browser.

Inspection Panel On Firefox In A Mac

How to Inspect a Particular Element of a Webpage in Firefox

  • Click on the “cursor” icon that you see in the left corner of the inspection panel.

Pick An Element From The Page On Firefox

  • Move your cursor to the element you’d like to inspect. For this example, we are inspecting a heading tag, but you can do this with any element you would like.

Inpecting A Title Tag On Firefox Inspection Tool

How to View the Mobile Version of a Website in Firefox

  • From the right corner of the inspection panel, click the smartphone icon.

Responsive Design Mode On Firefox In A Mac

  • This will convert and load the website into a smartphone-shaped viewer. You can click on the “Responsive” toggle to select a mobile device of your choice.

Resposive Drop Down Button On Firefox In A Mac

How to Change the Location of the Inspection Panel in Firefox

  • Click on the horizontal three-dot ellipsis in the right corner of the inspection dock.

Inspection Dock Settings On Firefox In A Mac

  • Select the location you’d like to enable, and the inspection panel will be moved accordingly.

Different Inspection Dock Location On Firefox In A Mac

How does inspecting elements differ from viewing the page source?

Inspect elements is a developer tool built into modern browsers to interact, modify, and troubleshoot a webpage for its HTML, CSS, and JavaScript. When you check the page source of a webpage, you simply see a static HTML code that was delivered by the server to the browser. You can analyze the overall structure, content, and tags, like the metadata, etc., but the inspection tool renders the webpage with all of its elements, corrects errors, and more.

Which other types of data can I discover from using the inspect elements tool?

With inspect elements, you get a comprehensive view of how a website is built. You gain access to the actual HTML code with hierarchy and nesting. You can modify the CSS and see the changes in real time, including elements like color, font size, etc. You can also see the JavaScript code, allowing you to debug the code and analyze it. The “Network Requests” feature makes it easier for you to understand the resources that are being loaded externally, like the Console Output fonts, DOM manipulation, and more.

Can website owners see inspect element activity on their websites?

Technically, yes. To clarify, all modern websites have analytics and other tracking tools installed, which essentially track everything that you do on a website, from how long you remain on the site to where you click. However, you will never be personally identified by the website, and you are simply a data point in a cluster of users that matches your demographic and behavior. These systems are in place to monitor the website’s performance and improve user experience.

Image credit: Unsplash . All screenshots by Abbaz Uddin.

Our latest tutorials delivered straight to your inbox

Abbaz Uddin

Abbaz is an experienced Freelance Tech writer. He has a strong passion for making technology accessible to non-tech individuals by creating easy-to-understand content that helps them with their technological needs.

Other Storage Mac Featured 2

  • Accessories
  • Meet the team
  • Advertise with us

iGeeksBlog

What you need to know :

  • To inspect elements on Safari: Open Safari → Right-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;

  • Open Safari browser.
  • Click Safari at the top left → select Preferences .
  • Click Advanced .

View source code in Safari on Mac

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

  • Open Safari . 
  • Right-click the webpage.
  • Click Inspect Element .

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:

  • Open the Chrome browser.
  • 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.

  • Open Safari/Chrome browser.
  • Right-click or tap the trackpad with two fingers when you want to inspect the text.
  • 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!

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

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.

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

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

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.

  • 4 Reasons why Safari is better than any other browser?
  • Safari vs. Chrome: Which browser is better for iPhone and Mac?
  • How to install and use a web browser on Apple TV 4 and 4K

Darryl

Consumer Technology and Motorcycles are the two things that excite Darryl the most. Why? Because Tech helps better people's lives, and solving people's problems related to tech is something he enjoys. And what about bikes, you ask? Well, drop a gear and disappear.

View all posts

🗣️ Our site is supported by our readers like you. When you purchase through our links, we earn a small commission. Read Disclaimer .

LEAVE A REPLY Cancel reply

Save my name, email, and website in this browser for the next time I comment.

Related Articles

No service on iphone after ios 17.5.1 update try these 11 fixes, how to do boomerang on instagram (2024 guide), how to hide apps on iphone or ipad in ios 17, how to block text messages on iphone or ipad (ios 17 updated).

How To Inspect Elements in Safari on iPhone and Mac

The Uptide

As a developer, it often happens that we need to inspect HTML elements in our web browsers to understand the workings and layout of a particular webpage. While most people use Chrome Dev Tools for this purpose, it is always a good practice to test your webpages across different browsers to ensure that your website is cross-browser compatible.

Within Safari, it is possible to test your website across all devices by enabling advanced development features. Simply follow the steps outlined below and you will be up and ready to develop for Safari in no time.

How To Inspect Elements on The Safari Browser

To open the web inspector in Safari, we will first need to enable the developer menu.

1. Open the Safari web browser. Then, navigate to your webpage of choice.

2. In the top navigation bar, click on Safari. A drop-down menu will appear. From here, select the Preferences option.

safari browser inspect element

3. This will open the Preferences admin panel. Navigate to the Advanced tab within the admin panel.

Navigate to the Advanced Tab

4. At the bottom of the panel, you will see the Show Develop Menu in Menu Bar checkbox. Select this.

5. You will now have access to advanced developer features and a Develop option will appear in the top navigation bar.

Develop Menu in the top navigation bar

There are two ways to inspect elements once you have enabled the Develop menu. You can navigate to your page of choice, then open the Develop menu. From the dropdown, select Show Web Inspector (alternatively, press ⌘⌥I ). This will open the web inspector menu.

Alternatively, once you have enabled the Develop menu, you will also be able to access the web inspector by right-clicking on any HTML element on your webpage and clicking in Inspect Element .

Right-click to open the Web Inspector

How To Inspect Elements on Safari on an iPhone or iOS Simulator

To inspect HTML elements on a mobile device, you can follow the steps outlined above to enable the Develop menu . Once this is enabled and you will have access to advanced Developer tools . You can then test across multiple devices (like iPhones and iPads) with the in-built iOS simulator.

1. Open the Develop menu tab at the top of the screen, then select the Enter Responsive Design Mode option.

safari browser inspect element

2. This will give you access to the iOS simulator in Safari with different web views for a number of different devices and configurations. Select the device you wish to test on.

Select the Device you Wish to Simulate

3. Then, right-click anywhere on the web page and select Inspect Element . This will open the Web Inspector within the device of your choice.

Open Web Inspector

4. Clicking on this will open the developer console and you will be able to easily inspect HTML elements across all kinds of simulated iOS devices.

Sign up for more like this.

How to Use Your Browser’s Inspect Element Tool to Edit Webpages

Inspect Element, featured image, illustration.

There are numerous valuable web development resources , be it books, videos, online courses , and more. Learning how to use a browser’s Inspect Element tool is one such powerful ability. It’s an invaluable learning tool — one that’s right under your fingertips and always accessible.

With the Inspect Element feature, you get to see the website’s inner workings. Although you can only see frontend markup such as HTML, CSS, and sometimes JavaScript, it gives you a way to see precisely how the developers built a website.

In this post, we’re going to show you how to use the Inspect Element tool and some of the related technologies, features, and functionality you’ll come across. First, let’s give you a formal introduction to the Inspect Element tool itself.

Introducing the Inspect Element Tool

In the web’s early days, there was only one way to look at a website’s code — the View Source feature.

The Kinsta View Source page

This situation was prevalent in the days before we had Cascading Style Sheets (CSS) and JavaScript in abundance. Web developers used HTML for all site elements, including content, design, and… well, everything.

Once the web started to evolve, and the underlying technologies increased in power, it was necessary to develop better tools. Firefox’s Firebug was an early solution for finding out how a website performed and worked under the hood:

The Firefox and Firebug logos.

After a while, that functionality found its way into almost all browsers. Today, we know that feature as the Inspect Element tool:

The Inspect Element tool used on the Kinsta website.

It’s a powerful way to see the underlying technology and code of a website. As such, you can find it in a few different places — often through a toolbar menu, right-clicking on a page and selecting the option, or with a keyboard shortcut.

While the Inspect Element tool’s primary focus is on the HTML and CSS of a page, there’s more you can do with it.

Touring the Inspect Element Panel

Brave's DevTools.

The Inspect Element tool is much more than a way to display code . There are often several panels to access:

  • Inspector — This is called Elements in some browsers. It’s the main screen in the Inspect Element tool and shows you the page code, along with element-specific CSS. You’ll also find further details on a site’s “grid system” and other aspects.
  • Console — This is a frontend warning log for a site, and it’s a place you can also enter code snippets to perform a quick test of an idea.
  • Network — Here, you’ll see the requests made to and from a server, such as all POST and GET requests.
  • Performance — Of course, a site has to be performant . As such, there’s a dedicated tool to help you gauge some essential site metrics. Some browsers do better than others here.
  • Memory — This panel lets you see how a site uses memory, and again, some browsers offer extensive metrics.
  • Application — Within this panel, you can see a whole range of information on the site’s cache, background services, and more.

On top of this, there are more panels you can add:

A list of further panels within Brave’s DevTools.

There are simple panels, such as Media , and more complex ones like the JavaScript Profiler and the Performance monitor . In a nutshell, the Inspect Element tool’s name is doing a disservice to all functionality under the hood. It has immense power and should be central to any web developer’s workflow.

Why You’d Want to Use Inspect Element?

The Inspect Element tool is almost the only “nailed-on” solution you’ll need to have at your side during development. We’ll get into the technical details as to why throughout the rest of the article. First, though, it’s worth talking about your motivation for using Inspect Element.

There are a few reasons why you’d want to use the tool:

  • You can browse other websites for inspiration on how to work on yours.
  • You’ll learn how other sites or developers achieve specific techniques.
  • It gives you a license to experiment on your site without consequences.
  • In most Inspect Element tools, you get the opportunity to debug the sites.
  • It’s good to find out more about the website in question.

In short, learning about web development involves looking at good examples of websites and finding out what makes them tick.

The Inspect Element tool lets you check out the exact HTML and CSS used on a site, giving you a great chance to implement those aspects and techniques in your work.

How to Find Your Browser’s Inspect Element Tool?

The good news is that finding the Inspect Element tool is straightforward. In most cases, you’ll right-click on a page and select Inspect or Inspect Element .

Choosing the Inspect Element tool.

By default, it’ll open the tool in a split window. It often defaults to the right-hand side. But you can customize this to your liking and even pop the tool out into its window.

The Inspect Element tool in its own window.

Of course, you can also access Inspect Element from the browser toolbar or through a keyboard shortcut. The exact location will vary depending on the browser. For example, in Firefox , you’ll find the Web Developer Tools in the Tools > Browser Tools menu. In contrast, Brave (and other Chromium-based browsers) have the Developer Tools option in the View > Developer menu.

Brave’s toolbar menu, showing its developer tools.

The keyboard shortcuts are often similar cross-browser: Command + Shift + C ( Control + Shift + C for Windows). This shortcut makes it quick to bring up the tools you need to work with straight away.

If you’ve never opened the Inspect Element tool before, it’s often displayed on the right-hand side of your menu, as we mentioned earlier. To change this, click on the traffic light menu in the Inspect Element’s toolbar. Here, you can switch the side the “dock” is displayed:

The Dock side option in the Inspect Element tool.

Note that Firefox also uses a “triple pane” view by default, which helps you to get as much information in the Inspect Element tool as possible:

Firefox's triple pane view.

Now that you have the tool open, it’s a good idea to find out what you can do with it. We’ll talk about this next.

3 Situations for Using the Inspect Element Tool

We’ve touched on some ways you’ll use the Inspect Element tool, but we can go further than this to offer some use cases. Let’s discuss these in brief.

1. Searching for Specific Elements on a Webpage

The primary goal of the Inspect Element tool is in its name — inspecting website elements. To do this, you’ll head to the desired webpage and then choose your method of opening the development tools .

Once the panel is open, you’ll click the arrow that acts as a selector for your desired element:

The Inspector Arrow icon.

From here, you can hover over any element on the page, and you’ll see it highlighted in the Inspector/Elements window:

Highlighting an element in the development tools panel.

It’s a simple process — one of the reasons why the Inspect Element tool is so valuable and popular with web developers.

2. Emulating a Target Device, Display, and Browser

The Inspect Element also functions as a device emulator of sorts. In other words, you’re able to see how a website looks on a specific device. The options are numerous:

A list of emulated devices within Brave.

This emulator will be great for judging whether your mobile-first strategy or responsive design is accurate and working. It’s invaluable and also more cost-effective than having 200 devices floating around your desk.

You’ll often access device emulation from a small icon somewhere on the Inspect Element panel:

Emulating a device with the Inspect Element tool.

Clicking this icon will display your site as it looks on the device you’ve selected:

Choosing a device to emulate from the Inspect Element tool.

We’ll dig into this in more detail later, but it’s a rock-solid way of making your designs consistent across devices.

3. Ascertaining the Performance of Webpage

The Inspect Element tool can also help you judge the speed and performance of a website through the Performance panel:

The Inspect Element Performance panel.

This feature works by “recording” the loading times of specific elements and scripts. Chromium-based browsers perform brilliantly at offering this information. You’ll record the page as it loads, and then view the results in a timeline format.

It’s an excellent way to ascertain whether a page is performant on a general level. From there, you’ll want to use a tool such as Google PageSpeed Insights or Lighthouse to work on your site’s performance further. Chromium-based browsers will have a Lighthouse report generator built-in:

A built-in Google Lighthouse report.

You’re also able to see a summary of the performance testing within a few other tabs. For example, you can view a Call Tree , an overall summary, and an Event Log :

The Inspect Element’s Event Log.

It’s conceivable that you wouldn’t need any other tool to judge how your website performs or works. Learning how it works in practice is something we’ll discuss next.

Tricks and Tips for Using the Inspect Element Tool

We’ve already talked about how the Inspect Element tool is more powerful than it may appear to be at first glance. Let’s take a look at some tricks and tips to get the best out of its feature set, starting with the basics.

1. Changing Element Properties, Values, and States

So far, we’ve only touched on the concept of using the Inspect Element tool to make temporary changes to a site. Let’s discuss how to do this in more detail.

The steps are straightforward. First, use the arrow icon to select your chosen element. You’ll see an overlay that highlights the various components as you hover over them:

Selecting elements in the Inspect Element tool.

Once you get to your desired element, you can double-click almost anywhere you see a tag within the Elements panel and type in a change. For example, we want to change the original hero text on the Kinsta homepage to something different:

Changing text on the Kinsta home page.

You can also work with CSS in the same way as HTML. For example, take the call to action (CTA) buttons on the Kinsta home page:

Selecting a button on the Kinsta home page.

If you select the button using the pointer, you can see its related CSS in the right-hand Styles panel:

The Style panel within the Inspect Element tool.

As with HTML elements, you can change values and add your CSS in too:

Changing the button color in the Styles panel.

Of course, for elements such as buttons, you may want to work with its various states. In this case, the :hover state is worth changing too. To do this, click the :hov link in the Style panel. Choosing this will bring up a list of element states, and you can select those you want to see the hover-state CSS for:

Bringing up the states options in the Styles panel.

The webpage will show how the state looks without you having to act. Here, we’ve changed the hover colors to differentiate it from the default button state:

Changing hover state colors in the Styles panel.

You can even take image URLs and swap them out for others. On the Kinsta home page, we show a screenshot of the MyKinsta dashboard :

The MyKinsta dashboard on the Kinsta home page.

Through locating the element and changing the source URL of the image, you’re able to test out other pictures in its place:

Changing an image on the Kinsta home page.

As you’d expect, these changes aren’t permanent, and with a quick refresh of the page, you can get things back to normal. As an alternative, you can also copy the HTML and CSS over to your editor and include them in your code to make those changes permanent.

2. Searching for Elements

It could be that before you can alter an element, you need to find it. The Inspect Element tool has straightforward search functionality that can help you find any aspect of a webpage.

That said, it’s tough to find if you don’t know where to look. The “official” way in Chromium-based browsers is to head to the “traffic light” menu on the right-hand side of the page and select the Search option:

The Search option in Brave’s DevTools.

Using this will open the Console panel, along with a Search tab. From here, type your desired tag into the text box, and you’ll see a list of associated elements on the page:

Searching for elements in Brave’s DevTools.

Note that in other browsers, you may find the functionality elsewhere. For example, Firefox includes a search box at the top of its Inspector panel:

Searching for elements in the Firefox Inspector panel.

Here’s another quick tip: You can carry out recursive expansion of the various nodes and elements by right-clicking within the Elements pane, and choosing Expand recursively :

The Expand recursively option in the Elements panel.

If you take a look at the Styles panel, you’ll also spot a Filter text box. This field lets you filter by CSS properties, making it a great companion to the global search functionality:

Filtering by properties in the Styles panel.

On the whole, it shouldn’t be tough to find what you need with two dedicated filter and search tools.

3. A Quick Primer on the Box Model

One of the best ways the Inspect Element tool can help you learn more about how CSS properties act upon elements is the visual “box model” panel.

The Box Model.

This overview gives you a representation of how a specific box (such as “element” or “div”) appears on the screen. In other words, it’s an overview of how the margins, padding, border, and content combine to become the section you see on-screen.

Explaining the complete CSS box model and how it interacts with a webpage’s HTML is beyond the scope of this article, though Mozilla has a fantastic guide to the ins and outs of the concept.

You’ll often find the Box Model panel within the Layout or Computed sections of the right-hand pane of the Inspect Element tool:

The Box Model panel within the Inspect Element tool.

As with any elements and properties, you can also change the values and settings of a particular box. There will also be a list of other properties to help you position the box, set a z-index, apply float and display settings, and much more.

While working with the box model, you may also benefit from seeing the grid system in play on the page. To do this, take a look at the Layout panel — the options you need will be under the Grid menu:

The Grid settings menu.

Clicking your desired display settings and then choosing a relevant overlay will show it on-screen, allowing you to make more accurate decisions using the box model to manipulate site elements.

4. Emulating Devices Using Inspect Element

They’ve turned from buzzwords into integrated lexical terms, but “responsive” and “mobile-friendly” are key web development factors. As such, the Inspect Element tool tackles this facet through a couple of features.

In most browsers, the Inspect Element tool will have a mobile device icon along the top toolbar:

Toggling mobile responsive viewing within Brave.

Safari, however, is different. Instead, there’s an Enter/Exit Responsive Design Mode toggle in the Develop menu:

The Exit Responsive Design Mode option in Safari.

Regardless of how you get there, once you choose the option, the webpage will display as though you’re viewing it in on a smaller device:

A mobile device layout view in Firefox.

While Safari only gives you the choice of different Apple devices, other browsers dig in to provide you with the tools you need to design with mobile-first principles. For example, you can choose the viewport’s orientation, as well as which device you’d like to emulate:

The Device Emulation list in Brave.

There are two other interesting features here. First, you can choose an emulated network speed. Safari doesn’t include any options for this, and Chromium-based browsers offer a small, general choice of network throttling:

The throttling options in Brave.

Firefox does the best here, with a decent selection of network choices to pick from:

Firefox's throttling options.

To round things out, you’re able to simulate haptic feedback and sensor recognition too. It’s the default in Chromium-based browsers, and in Firefox, you have to toggle it on:

The haptic feedback option in Firefox.

Firefox falls behind here, as Chrome, Brave, and others show your cursor as a small “fingertip-like” overlay. The functionality isn’t perfect for any browser, though it’s a reliable way to determine how your site might act on other devices.

This sort of testing often falls by the wayside for many web developers. That said, there’s no excuse now when browsers offer comprehensive solutions like this.

5. Keyboard Shortcuts When Using the Inspect Element Tool

Most browser keyboard shortcuts are often the same across browsers. That’s good news if you flit between various tools to test your sites.

Here’s a quick list of some of the most popular (and valuable) shortcuts:

Of course, there are many more shortcuts available. Mozilla has exceptional documentation for Firefox, while Chrome, Brave, Edge, and others share shortcuts . Apple is less helpful with Safari developer shortcuts, as there is no defined list within their help pages. Instead, we suggest reading through the official documentation for Safari’s developer tools.

Web development is no longer just HTML. There are many technologies involved. Even sticking with the holy trinity of HTML, CSS, and JavaScript, you’ll still need to see how a website pulls all of these components together.

The browser’s Inspect Element tool is one of the best ways to look under the hood of a website and find out in explicit detail how it works. While it’s fantastic as a learning aid, it can also help you test changes to your site and find how it functions on different devices and mobile networks.

Do you use the Inspect Element often? If so, what are your favorite features? Share your opinions in the comments section!

safari browser inspect element

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website , and connect with Salman on Twitter .

Related Articles and Topics

safari browser inspect element

Powerful Managed WordPress Hosting

safari browser inspect element

62 Awesome Web Development Tools to Use

  • Website Performance
  • Web Development

Gravatar for this comment's author

I love the depth and detailed information provided in this article.

I’ve been exploring the Inspect Element tool and Source pages for a few years on my own. I’ve been using it to determine if a site was constructed with WordPress or another CMS. I also checked the published dates and studied visual elements like images and gifs.

Now I’ve found three more ways to use the Inspect Element tool.

Also loved that the author of this piece didn’t dumb down words or concepts.

Thanks for this resource!

Leave a Reply Cancel reply

By submitting this form: You agree to the processing of the submitted personal data in accordance with Kinsta's Privacy Policy , including the transfer of data to the United States.

You also agree to receive information from Kinsta related to our services, events, and promotions. You may unsubscribe at any time by following the instructions in the communications received.

How to Inspect Element on iPhone: A Step-by-Step Guide

Inspecting an element on your iPhone is a handy trick for web developers, designers, or curious minds that want to peek behind the curtains of a website. It allows you to view and sometimes manipulate the HTML and CSS code that makes up a website. Don’t worry; it’s not as intimidating as it sounds. In just a few simple steps, you’ll be inspecting elements like a pro.

Step by Step Tutorial on How to Inspect Element on iPhone

Before we dive into the steps, let’s understand what we’re trying to achieve. By the end of this tutorial, you’ll be able to open a hidden developer console on your iPhone’s Safari browser that lets you inspect the elements of any website you visit.

Step 1: Enable Developer Mode

Turn on the Developer Mode on your iPhone’s Safari settings.

Enabling Developer Mode is the gateway to accessing all the developer tools that Safari has tucked away. To do this, open your iPhone’s Settings, scroll down to Safari, and tap on ‘Advanced.’ Then toggle on the ‘Web Inspector.’

Step 2: Connect to a Mac

Use a USB cable to connect your iPhone to a Mac computer.

The Web Inspector tool on your iPhone works in tandem with a Mac. So, after enabling Developer Mode, grab a USB cable and hook up your iPhone to your Mac. Make sure you trust the computer if prompted on your iPhone.

Step 3: Open Safari on Mac

Launch the Safari browser on your Mac.

Now, with your devices connected, open Safari on your Mac. We’ll be using the Safari browser on your Mac as a bridge to inspect elements on your iPhone. Make sure the Develop menu is enabled by going to Safari’s Preferences, clicking on the Advanced tab, and checking the box at the bottom that says ‘Show Develop menu in menu bar.’

Step 4: Choose Your iPhone

Select your iPhone from the Develop menu in Safari on your Mac.

With the Develop menu now visible in your Mac’s Safari menu bar, click on it. You should see your iPhone listed as an option. Hover over it, and a list of open tabs on your iPhone’s Safari will appear.

Step 5: Start Inspecting

Pick the tab you want to inspect and start exploring the elements.

Select the tab that corresponds to the website you want to inspect. A new window with the developer console will pop up, and you’ll see the HTML and CSS code for that web page. You can click on different elements to see their properties or even alter the code to see how changes would look.

After completing these steps, you’ll have the Web Inspector at your fingertips whenever you need it. It’s a powerful tool for learning, troubleshooting, or simply satisfying your curiosity about how web pages are built.

Tips for Inspecting Element on iPhone

  • Always make sure your iPhone and Mac are running the latest software updates for the best compatibility and security.
  • Use a USB cable that supports data transfer, not just charging.
  • If the Web Inspector window doesn’t show up, try restarting both your iPhone and your Mac.
  • Familiarize yourself with HTML and CSS basics to make the most out of inspecting elements.
  • Don’t be afraid to experiment with the code; any changes you make are temporary and won’t affect the actual website.

Frequently Asked Questions

Can i inspect element on iphone without a mac.

No, to use the full suite of Safari’s Web Inspector tools on your iPhone, you need to connect it to a Mac.

Will inspecting elements make changes to the website?

Any changes you make while inspecting elements are only on your browser and will not affect the live website.

Do I need to be a developer to inspect elements on my iPhone?

No, anyone can learn to inspect elements, but having some knowledge of HTML and CSS enhances the experience.

Can I inspect elements on browsers other than Safari?

The built-in Web Inspector only works with Safari, but there are third-party apps and browsers that offer similar functionality.

Is it legal to inspect elements on any website?

Yes, inspecting elements is a common practice for educational and troubleshooting purposes and is completely legal.

  • Enable Developer Mode in Safari settings on iPhone.
  • Connect iPhone to Mac with a USB cable.
  • Open Safari on Mac and enable Develop menu.
  • Select your iPhone from the Develop menu in Safari on Mac.
  • Choose the tab you want to inspect.

Inspecting an element on an iPhone, while it may initially seem like a task suited for tech wizards, is actually a straightforward process that can be mastered by anyone willing to follow a few simple steps. It bridges the gap between what we see on our screens and the complex code that brings it to life. Whether you’re debugging a website, learning about web design, or simply indulging your curiosity, the ability to inspect elements right from your phone is a valuable skill in our digital world. So go ahead, connect that iPhone to your Mac, and start exploring the intricacies of the websites you love. Who knows what secrets you’ll uncover?

Matthew Burleigh Solve Your Tech

Matthew Burleigh has been writing tech tutorials since 2008. His writing has appeared on dozens of different websites and been read over 50 million times.

After receiving his Bachelor’s and Master’s degrees in Computer Science he spent several years working in IT management for small businesses. However, he now works full time writing content online and creating websites.

His main writing topics include iPhones, Microsoft Office, Google Apps, Android, and Photoshop, but he has also written about many other tech topics as well.

Read his full bio here.

Share this:

Join our free newsletter.

Featured guides and deals

You may opt out at any time. Read our Privacy Policy

Related posts:

  • 15 Ways to Fix Safari Not Working on iPhone in 2023
  • How to Enable the Developer Tab in Excel for Mac
  • Safari History iPhone: How to See It [2023 Guide]
  • How to Enable Developer on the iPad: A Step-by-Step Guide
  • How to Access Developer Mode on iPhone 14: A Step-by-Step Guide
  • How to Show Developer Tab – Excel 2010
  • How to Get Safari Back on iPhone 13
  • How to Make All Columns the Same Width in Excel 2013
  • 3 iPhone Safari Tips You Might Not Know
  • How to Make Google Your Homepage in Safari on a Mac
  • How Do You Scan a QR Code with an iPad?
  • How to Enable Javascript on an iPhone
  • How to Show Bookmarks Bar in Safari on iPad
  • How to Enable Developer Options in Android: A Step-by-Step Guide
  • How to Delete Favorites in Safari on a Mac
  • What is a Mac Mini?
  • How to Use the Snapchat Dark Theme Android: A Step-by-Step Guide
  • Show the Developer Tab in Excel 2011
  • How to Make a QR Code for a Google Form: A Step-by-Step Guide
  • Where is the MAC Address on My iPhone? [2023 Guide]

IMAGES

  1. How to Inspect Elements in Safari Mac Computer

    safari browser inspect element

  2. How to use Inspect Element in Chrome, Safari, and Firefox

    safari browser inspect element

  3. How to Inspect Elements in Safari Mac Computer

    safari browser inspect element

  4. How to Inspect an Element in Safari Browser

    safari browser inspect element

  5. How to Inspect Elements in Safari Mac Computer

    safari browser inspect element

  6. How to Inspect Element on Mac using Safari ?

    safari browser inspect element

VIDEO

  1. how to inspect element in safari on mac

  2. Web design tutorial part 12 ( How to Use Browser Inspect Elements Effectively )

  3. do changes directly on browser

  4. How to open inspect elements on safari macbook

  5. How to enable inspect element on safari ( Mac OS X )

  6. Master the Art of Browser Inspection!

COMMENTS

  1. How to Inspect Element using Safari Browser

    229. In your Safari menu bar click Safari > Preferences & then select the Advanced tab. Select: "Show Develop menu in menu bar". Now you can click Develop in your menu bar and choose Show Web Inspector. See the detailed guide here for more info: LINK. You can also right-click and press "Inspect element". EDIT As suggested by @dennis in the ...

  2. How to Inspect Element on Mac using Safari ?

    Method 1 - Using Safari Inspect Element. Follow the steps below to Inspect Element on macOS using Safari: 1. The primary step is to enable the Developer menu. To do so, open the Safari browser and click Safari -> Settings. 2. Click on Advanced. Check the Show Develop menu in menu bar checkbox.

  3. How to Inspect Element on Safari for Mac

    In Safari, click Safari in the tool bar. Click Settings and head to Advanced. Check Show Develop menu in menu bar. On a webpage, right click an element. Click Inspect Element. Read on to see ...

  4. Web Inspector

    Overview. Web Inspector helps you inspect all the resources and activity on webpages, Service Workers, Mac and Home Screen web apps, and JavaScript running inside your applications, making development more efficient across Apple platforms. The clean, unified design puts each core function in a separate tab, which you can rearrange to fit your ...

  5. How to use Inspect Element on Mac using the Safari browser

    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. Inspect Element is now available and ...

  6. How to use Inspect Element in Chrome, Safari, and Firefox

    To get to Inspect Element on Firefox you have three options (just like on Chrome). Method 1: Right-click anywhere on the page and click Inspect at the bottom of the menu. Method 2: Click the hamburger menu (three horizontal lines at the top-right corner of the window), select More tools, then click Web Developer Tools.

  7. Inspecting Safari on macOS

    The first is via the Develop menu. With the webpage you wish to inspect frontmost in Safari, go to the Develop menu and choose Show Web Inspector (⌥⌘I). Web Inspector will then appear, and will be inspecting the webpage. The second was to show Web Inspector is to right click on the webpage and choose Inspect Element from the context menu.

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

    3. Open up Web Inspector. There are three ways to open Web Inspector in Safari: Option 1: I can 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. Option 2: I can choose Develop → Show Web Inspector from the top menu bar.

  9. How to Inspect Element on Mac: Chrome, Safari & Firefox

    Click the multicolored orb icon to launch Chrome. 2. Navigate to the site you want to inspect. Use the address bar to go to the page with elements that you want to look at. 3. Inspect the page. You can do this in a few different ways: Right-click or ctrl-click the page and select Inspect OR. Press Cmd + Opt + C.

  10. How to Inspect an Element on a Mac

    In Safari: Right-click on a webpage and select Inspect Element. In Chrome, you can right-click and click Inspect. To enable the feature in Safari: Safari > Preferences > Advanced > check the Show Develop menu in menu bar box. This article teaches you how to inspect a website's element on Mac. It looks at how to do so via Safari and Google Chrome.

  11. How to Edit Webpages on Safari Using Inspect Element

    Open Safari. Click Safari in the top menu bar. From the dropdown menu, select Preferences . Select the Advanced option. Check the box that says Show Develop menu in menu bar . After selecting this option, you can right-click on a webpage and select Inspect Element. Alternatively, you can select Develop in the menu bar, and then Show Web Inspector .

  12. How to Inspect Element on a Mac on Any Browser

    To enable the Inspect Element feature in Safari on your Mac, you have to activate the Develop menu. To do this: Open Safari, go to Safari > Settings from the menu bar, or hit Cmd + , on your keyboard. Head to the Advanced tab. Check the Show Develop menu in menu bar box. The Develop menu should now appear in the top menu when you're using ...

  13. How to Inspect Element on iPhone: 4 Ways on Safari + Chrome

    Use Safari on your iPhone to navigate to the site on which you want to use Inspect Element. 5. On your Mac, click the Develop menu. You will see your iPhone listed here. 6. Hover your mouse over your iPhone and select the website. This opens the Inspect Element panel on your Mac for the site that's open on your iPhone.

  14. How to Inspect Elements in Safari, Chrome, and Firefox on Mac

    Click the checkbox next to "Show Develop menu in the menu bar" to have access to all advanced features of Safari. Right-click anywhere on the website and select "Inspect Element.". This will open the inspect elements panel in Safari. For more advanced options, click on the "Develop" tab in the menu bar.

  15. How to inspect element on iPhone

    Try Inspect Element on Real iPhone for Free. One can inspect an element on iPhone in 3 simple steps: Sign up for Free on BrowserStack Live. Select the desired iPhone device to inspect on (here selecting iPhone 14) Click on DevTools to start inspecting. Inspect specific elements to access the HTML code and debug in real time.

  16. How to inspect element on Mac

    Open Safari browser. Click Safari at the top left → select Preferences. Click Advanced. Select the Show Develop menu in menu bar checkbox. Now that you've turned on the Develop menu, here's how to inspect elements on Safari: Open Safari . Right-click the webpage. Click Inspect Element. Optional: You can tap the trackpad with two fingers.

  17. How To Inspect Elements in Safari on iPhone and Mac

    How To Inspect Elements on The Safari Browser. To open the web inspector in Safari, we will first need to enable the developer menu. 1. Open the Safari web browser. Then, navigate to your webpage of choice. 2. In the top navigation bar, click on Safari. A drop-down menu will appear.

  18. How to Use Your Browser's Inspect Element Tool to Edit Webpages

    It's a simple process — one of the reasons why the Inspect Element tool is so valuable and popular with web developers. 2. Emulating a Target Device, Display, and Browser. The Inspect Element also functions as a device emulator of sorts. In other words, you're able to see how a website looks on a specific device. The options are numerous:

  19. How to Inspect Elements on Mac, Windows, and iOS

    Here's how: Run the Safari browser. Visit a website in which you want to inspect web elements. Select Safari from the top menu bar of the Safari browser. Click Preferences from the context menu that opens. On the Preferences screen, select Advanced. Checkmark the Show Develop menu at the bottom of the Advanced Preferences screen.

  20. How To Inspect A Website In Any Browser [Chrome, Safari, Firefox]

    Access Firefox Inspector using the same Inspect Element shortcuts as Chrome: Ctrl+Shift+I (Windows) and Cmd+Opt+I (Mac). You can also use the keyboard shortcut Ctrl+Shift+C (Windows) and Cmd+Opt+C (Mac) to open the inspect element panel, allowing you to click on an element on the page to jump to the code directly. 1.

  21. How to use Devtools for Safari Mobile View?

    Method 2: Using Web Inspector for Debugging on Safari. Furthermore, developers can leverage the Web Inspector to inspect any particular element and debug a specific issue for a specific screen size. One can find the web inspector in the Develop menu. Once the web inspector is active, inspect a particular element using the element selector.

  22. How to inspect HTTP requests in Safari 8 or later

    7. In Safari 12, select the row in the network tab. The response will be displayed in the main area. Above it will be a few tabs. Select the Headers tab and take a look in the request part of the displayed data for some request info. For details on the request data, take a look under "Request Data".

  23. How to Inspect Element on iPhone

    To inspect elements on iPhone with Safari developer tools, follow these steps: On an iPhone, open the Settings and tap Safari. Scroll down and tap Advanced . On the next screen, toggle on Web Inspector . On your Mac device, open the Safari browser. Click Safari in the menu bar and select Preferences.

  24. Inspect WKWebView in Safari inspector over local network

    I need to inspect a WKWebView loaded within a screen saver. However, any interaction causes the program to exit. ... Inspect WKWebView in Safari inspector over local network. Ask Question Asked today. Modified today. Viewed 3 times 0 I need to inspect a WKWebView loaded within a screen saver. ... Safari behavior dependent upon "inspect element ...

  25. How to Inspect Element on iPhone: A Step-by-Step Guide

    Step 3: Open Safari on Mac. Launch the Safari browser on your Mac. Now, with your devices connected, open Safari on your Mac. We'll be using the Safari browser on your Mac as a bridge to inspect elements on your iPhone. Make sure the Develop menu is enabled by going to Safari's Preferences, clicking on the Advanced tab, and checking the box ...