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. 

Android apps that open Chrome just got a new picture-in-picture feature

Gotta collect 'em all — Opera adds Gemini AI to its browser

Score! Get 5 months of Amazon Music Unlimited for free ahead of Prime Day

Most Popular

  • 2 iOS 18 Photos — Apple explains the biggest redesign in years
  • 3 Forget OLED TVs — this new laser projector beams a 100-inch picture for hundreds less
  • 4 Google Pixel Watch 3 key specs just leaked by FCC listing
  • 5 Massive internet outage — things are back to normal

element safari

  • Amazon Prime Day Early Deals
  • Summer Sales: Waterproof Bluetooth Speakers

How to Inspect an Element on a Mac

Learn more about the sites you view

element safari

  • Swansea University, Staffordshire University

element safari

  • 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
  • How to Turn Off AdBlock on Mac
  • How to Turn on Location Services on a Mac
  • Add More Features by Turning on Safari's Develop Menu
  • How to Clear Cache and Cookies in Every Major Browser
  • How to Activate the iPhone Debug Console or Web Inspector
  • How to Get a Full Screen on iPad
  • How to Allow Pop-Ups on a Mac
  • What Is a Home Page?
  • What Is Safari?
  • How to View HTML Source in Safari
  • How to View the HTML Source in Google Chrome
  • How to Turn Off a Pop-Up Blocker on a Mac
  • How to Enable and Allow Cookies on Mac
  • How to Turn Off Private Browsing on iPad
  • How to Activate and Use Responsive Design Mode in Safari

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.

element safari

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

element safari

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

element safari

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.

element safari

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?

element safari

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

Hero image of a woman talking on the phone while walking with headphones in

How to join a Zoom meeting by phone—and why you should

How to join a Zoom meeting by phone—and why...

Hero image with an icon representing AI and job searching

AI job search tips: 10 AI tools to help you land your next job

AI job search tips: 10 AI tools to help you...

The Gmail icon.

How to schedule an email in Gmail

A hero image for Google Calendar app tips with the Google Calendar logo on a blue background

How to add focus time in Google Calendar—and why you should

How to add focus time in Google Calendar—and...

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'

  • 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

how to inspect element on mac dt safari

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.

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

  • MacOS 15 will completely change how you use your iPhone
  • 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
  • How to forget a network on a Mac
  • How-To Guides

Sandy Writtenhouse

For most new Mac users -- especially if they're coming from Windows -- one of the first questions they need to ask is how to take a screenshot on a Mac? There's no dedicated Print Screen key like there is on Windows, but there is keyboard shortcut, and if you want something more akin to Microsoft's Windows Snipping tool, there are some great screenshot apps you can use, too.

Here's how to take a screenshot on a Mac in a few different ways. How to take a screenshot using keyboard shortcuts MacOS keyboard shortcuts are the quickest ways to take screenshots, whether you're capturing the entire screen or just a portion. By default, Apple's methods save your screenshot to the desktop, but if you want to copy the screenshot to the clipboard, there's a keyboard shortcut you can use instead. How to capture a selected area

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.

How to Inspect Element on a Mac on Any Browser

4

Your changes have been saved

Email Is sent

Please verify your email address.

You’ve reached your account maximum for followed topics.

5 Things a Mac Can Do That Your iPad Can't

How to move windows to another drive: this is the easiest method, why windows tablets are finally back in 2024.

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.

  • Browsing Tips

Inspect element (Mac)

Martina Nikolova

Hey there! If you’re a budding front-end developer or working on debugging web applications, you’ve probably been using Safari as one of your go-to browsers. And for a good reason, too! Safari comes with a fantastic tool called Inspect Element that allows you to dig deep into the nitty-gritty of a webpage. Let us walk you through how to use this fantastic tool on your Mac.

How to enable Inspect Element on Mac

Before diving in, you’ll need to enable Inspect Element on your Mac’s Safari. Just follow these simple steps:

  • Fire up Safari, click the browser’s menu from the menu bar on the top, and go to Preferences.
  • Jump over to the Advanced tab in the Safari Preferences window.

show developer menu safari

Voila! Inspect Element is now enabled and ready to roll in Safari on your Mac.

To access this powerful tool, you have a couple of options:

  • Either click on Develop > Show Web Inspector in the menu bar.
  • Or right-click the page and choose Inspect Element from the context menu that appears.

Mac Inspect Element shortcut

You can also use the Inspect Element shortcut on your Mac’s Safari to access the feature more quickly. Simply select/highlight the element on a webpage that you wish to inspect and press together Command, Option, and i keys and the interface of the feature will appear.

Inspect Element on Mac Overview

Once you’ve got Inspect Element up and running on your Mac’s Safari, you’ll be able to dissect every single component of the webpage you’re working on. Here’s a quick primer on using this awesome tool:

  • Adjust the position and size of the Inspect Element interface to suit your needs. Possible ways you can do hat are by docking it to the side or bottom of the page or even popping it out into a separate window.
  • Customize each of the tabs in the toolbar to your liking. You’ll find tabs like Elements, Storage, and Timelines, and you’ll be able to choose which ones to be shown.
  • If you’re searching for a particular item on the page, just click the search icon on the right side of the toolbar and type your search term in the box that appears.

That’s the lowdown on using Inspect Element in Safari for Mac! This incredible tool is an invaluable resource for web developers or anyone curious about how websites tick. So, go ahead and dive into code inspection, testing, and debugging like a boss. Good luck!

How to use Inspect Element (Safari)

We’ll now show you ways you can use the Inspect Elements feature in Safari and how to customize in accordance with your preferences.

First up, let’s optimize the Inspect Element interface to suit your preferences. You have the freedom to situate the tool at the bottom, along the side of the page, or even detach it into a standalone window. To achieve this, simply interact with the icons nestled in the top left corner of the toolbar. And if you desire more or less visual space, effortlessly drag the border to resize it to your liking.

With the layout tailored to your needs, it’s time to customize the tabs. Inspect Element boasts an array of nine tabs, encompassing Elements, Storage, Layers, and Timelines, among others. Feel empowered to conceal the ones you deem unnecessary by right-clicking a tab and cherry-picking the ones you’d like to keep in plain sight. This action will place checkmarks beside your elected tabs and exhibit them in the toolbar.

customize inspect elements tabs safari

Eager to scrutinize an element on the page? Activate the compass icon within the toolbar, then either glide through or click the element that piques your curiosity. Alternatively, you can cherry-pick the code or item inside the tool, and it’ll materialize on the page for your convenience.

Suppose you’re on a quest to locate a specific item on the page, such as a text string. Fear not! Merely click the search icon on the right extremity of the toolbar, input your search term, and behold! Your results will materialize beneath the search box.

inspect element search safari

During your creative process, you might observe warning or error icons emerging in the toolbar. These notifications are invaluable for pinpointing issues. To delve deeper, just click on the corresponding icon.

Should you feel inspired to modify Inspect Element’s aesthetics, enable page rulers, or make use of additional features like zooming and source maps, venture to the gear icon on the toolbar’s far right. This action will unveil the settings menu, where you can make a plethora of adjustments to mold the tool to your unique preferences.

Upon completing your work with Inspect Element in Safari, simply tap the X icon in the top left corner to bid the tool farewell. And there you have it! Armed with Inspect Element, you’re now poised to elevate your code inspection, application testing, and debugging prowess to unparalleled heights. Revel in the thrill of uncovering the hidden depths of web pages on your Mac using Safari’s exceptional Inspect Element tool!

element safari

Martina likes to get into nitty-gritty of tomorrow’s tech, from product design across to security based solutions. A long time mac user and developer, she has the expertise and strives to give new insight

Leave a Reply Cancel reply

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

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

This page requires JavaScript.

Please turn on JavaScript in your browser and refresh the page to view its content.

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.

element safari

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

Download Free

All fields are required.

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.

XML Files: What They Are & How to Open Them

XML Files: What They Are & How to Open Them

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]

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

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.

Macos Sonoma Screensaver Hidden Feature

Logo top

How to Inspect Element in Safari

element safari

You can use the Inspect Element feature to view and manipulate a website’s front-end. Web developers, designers, or marketers often need to inspect web elements to debug elements, conduct layout tests, or do CSS editing like fonts, colors, etc. This article explains how to inspect web elements on the Safari browser on your Mac.

The Inspect Element feature is a handy tool that enables you to see a website’s inner workings so that you can see what’s really happening in the background.

Enable Inspect Element in Safari

Open inspect element, use inspect element.

The first step is to enable Inspect Element. Here is how:

  • In Safari, click Safari and Preferences.
  • Click the Advanced tab.
  • Select the “Show Develop menu in menu bar” box.

Show develop menu in menu bar

There are a few ways to access Inspect Element so that you can start changing, adding, and removing page elements:

1. Using your mouse or trackpad, right-click (control-click) anywhere on the webpage and select “Inspect Element”

Inspect Element

2. You can use the Develop menu. In Safari, click Develop and choose “Show Web Inspector”.

Web Inspector

3. You can also use keyboard shortcuts. Simply press these keys together: Option-Command-i.

4. And lastly, you can customize the Safari toolbar to add the Web Inspector icon for easy access. Here is how:

  • In Safari, click View > Customize Toolbar.
  • Using your mouse or trackpad, drag the Web Inspector icon into the toolbar.

Inspector Toolbar

Safari’s Inspect Element will open in a pane at the bottom of the screen.

Inspect Element

You have a few options:

  • Click the “Dock to side of window” icon to move the pane to the right side of the window.
  • Click the “Detach into separate window” icon to open the pane in a separate window.
  • To close the Inspect Element page, click the close (X) icon.

Move Inspect Element sidebar or window

Along the top of the panel, you will see tabs:

  • Elements: This is the main screen. This shows all of the page code (HTML, CSS, Javascript etc) and other details such as the page’s grid system.
  • Console: This shows error messages. It is a warning log.
  • Sources: This shows the page’s HTML code.
  • Network: This shows a detailed list of the requests made to and from the server.
  • Timelines: This shows a visual analyzer that includes all of the activity such as network requests, Javascript, or memory.

If you click the gear settings icon, you can customize the pane. For example, you can select a dark or light theme.

  • How to Zoom In and Out in Safari on Your Mac
  • How to Troubleshoot Safari if It’s Running Slow on Mac
  • How to Create, View, Edit, and Restore Bookmarks in Safari on Mac
  • Safari Can’t Open The Page Because Safari Can’t Establish A Secure Connection To The Server, Fix

element safari

Dr. Serhat Kurt worked as a Senior Technology Director specializing in Apple solutions for small and medium-sized educational institutions. He holds a doctoral degree (or doctorate) from the University of Illinois at Urbana / Champaign and a master’s degree from Purdue University. He is a former faculty member. Here is his LinkedIn profile and Google Scholar profile . Email Serhat Kurt .

Similar Posts

How to change color of visited links in safari (macos).

In this tutorial, I explain how you can easily change the color of clicked links on Mac Safari. You can create and use a custom style sheet to specify exactly what color you want…

How to Get Apple Support to Call You

If you are having issues with your Apple device or service, you can have Apple call you. There are a few different ways to contact Apple Support. Some people may prefer talking to…

How to Add Music to Apple Watch from Spotify

How to Add Music to Apple Watch from Spotify

It is always possible to control your iPhone’s Spotify music from your Apple Watch. However, there are times keeping your iPhone with you is not convenient, such as while working out. For these…

How to Clear the Browser Cache in Safari on Mac

This article explains how you can clear cache in the Apple Safari browser on your Mac. Safari temporarily stores Internet files (images, web site pages and files, etc.) when you visit websites to reduce…

Mac Catalina Wi-Fi Problems, Fix

Several users said that wireless internet is not working properly after updating to macOS Catalina. More specifically, users stated that their browsers (Safari, Chrome etc) stopped loading websites even though the Wi-Fi seems…

How to Check Your Cellular Data Usage on iPhone and iPad

How to Check Your Cellular Data Usage on iPhone and iPad

It is easy to use a lot of data on your iPhone or iPad. Unless you are connected to a Wi-Fi network, your iPhone or iPad will use cellular data to access the…

Leave a Reply Cancel reply

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

Categories:

  • 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 47,145 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

element safari

You Might Also Like

Open BIN Files

  • ↑ 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?

element safari

Featured Articles

Have an Attractive Personality

Trending Articles

How to Do Fourth of July Nails: 40+ Nail Art Ideas

Watch Articles

Make Stamped Metal Jewelry

  • 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

  • Accessories
  • Meet the team
  • Advertise with us

iGeeksBlog

  • Editorial Guidelines

How to inspect element on Mac

Darryl

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.

  • 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.

LEAVE A REPLY Cancel reply

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

Related Articles

How to lock your facebook profile on your iphone or pc, how to fix the “no airprint printers found” error on an iphone (ios 17 updated), how to log out of facebook messenger on iphone and ipad (2024 guide), how to fix an iphone stuck on “home would like to send you critical alerts”.

How To Enable Inspect In Safari

Copy to Clipboard

  • Software & Applications
  • Browsers & Extensions

how-to-enable-inspect-in-safari

Introduction

Safari, the sleek and innovative web browser developed by Apple, offers a range of powerful features that cater to the needs of both casual users and web developers. One such feature is the ability to inspect and manipulate the elements of a webpage using the built-in developer tools. This functionality, commonly referred to as "Inspect Element," provides a comprehensive set of tools for analyzing and modifying the structure and style of web pages.

Enabling the Inspect Element feature in Safari allows users to delve into the underlying code and design of a webpage, providing valuable insights for developers, designers, and curious individuals alike. Whether you're a seasoned web developer seeking to fine-tune the layout of a website or an inquisitive user eager to explore the building blocks of your favorite web pages, enabling Inspect Element in Safari opens up a world of possibilities.

In this guide, we will walk you through the simple yet powerful process of enabling and utilizing the Inspect Element feature in Safari. By following the steps outlined in this tutorial, you will gain the ability to inspect, analyze, and modify the elements of any webpage, empowering you to deepen your understanding of web development and design.

Let's embark on this enlightening journey to unlock the potential of Safari's developer tools and harness the capabilities of Inspect Element. Whether you're a novice or an experienced user, this guide will equip you with the knowledge and skills to leverage this feature effectively. So, without further ado, let's dive into the world of web exploration and discovery with Safari's Inspect Element feature.

Step 1: Open Safari Developer Tools

To begin our journey into the realm of web exploration and development, the first step is to access the powerful Safari Developer Tools. These tools provide a gateway to a plethora of functionalities designed to aid in web development, debugging, and optimization. Whether you're a seasoned developer or an enthusiastic beginner, Safari Developer Tools offer a rich set of features to enhance your browsing and development experience.

To open Safari Developer Tools, follow these simple steps:

Launch Safari : Start by opening the Safari web browser on your Mac or iOS device. Safari's intuitive interface and seamless user experience make it a popular choice for users across the globe.

Navigate to the Menu Bar : Once Safari is open, navigate to the menu bar located at the top of the screen. Here, you will find a range of options and settings to customize your browsing experience.

Access the Develop Menu : In the menu bar, locate the "Develop" option. If you do not see the Develop menu in the menu bar, you may need to enable it in Safari's preferences. To do this, go to Safari > Preferences > Advanced, and check the box next to "Show Develop menu in menu bar."

Select "Show Web Inspector" : After accessing the Develop menu, hover over the "Show Web Inspector" option. Clicking on this option will open the Safari Developer Tools, revealing a wealth of features and functionalities to explore.

By following these straightforward steps, you can easily access the Safari Developer Tools, setting the stage for an immersive and enlightening web development journey. With the Developer Tools at your fingertips, you are now ready to delve deeper into the world of web exploration and leverage the full potential of Safari's capabilities.

Opening Safari Developer Tools marks the first step in our quest to enable and utilize the Inspect Element feature, laying the foundation for a seamless and enriching experience. As we proceed to the next step, we will unlock the potential of Inspect Element, empowering you to analyze and manipulate the elements of web pages with ease and precision.

Step 2: Enable Inspect Element

Enabling the Inspect Element feature in Safari is a pivotal step that grants you access to a powerful set of tools for analyzing and modifying the elements of a webpage. This feature empowers users to delve into the underlying structure and style of web pages, providing valuable insights for developers, designers, and curious individuals alike. By enabling Inspect Element, you gain the ability to inspect, analyze, and modify various elements of a webpage, fostering a deeper understanding of web development and design.

To enable Inspect Element in Safari, follow these simple steps:

Access Safari Developer Tools : As outlined in Step 1, open Safari Developer Tools by navigating to the Develop menu and selecting "Show Web Inspector." This action reveals the comprehensive set of developer tools, including the coveted Inspect Element feature.

Right-Click and Select "Inspect Element" : Once Safari Developer Tools are open, navigate to the webpage you wish to inspect. Right-click on any element within the webpage, such as text, images, or buttons. From the context menu that appears, select "Inspect Element." This action triggers the activation of the Inspect Element feature, opening a panel within Safari Developer Tools that displays the underlying code and structure of the selected webpage element.

Keyboard Shortcut : Alternatively, you can use a keyboard shortcut to enable Inspect Element. With the webpage open, press "Option + Command + I" on your Mac or "Control + Shift + I" on your Windows keyboard. This shortcut swiftly activates the Inspect Element feature, allowing you to seamlessly analyze and modify the elements of the webpage.

Enabling Inspect Element in Safari unlocks a world of possibilities, empowering you to explore and manipulate the building blocks of web pages with precision and insight. Whether you seek to fine-tune the layout of a website, troubleshoot design issues, or simply satisfy your curiosity about the inner workings of web pages, the Inspect Element feature in Safari equips you with the tools to accomplish these tasks effectively.

With Inspect Element enabled, you are poised to embark on a journey of discovery and innovation, leveraging the capabilities of Safari's developer tools to gain a deeper understanding of web development and design. As we proceed to the next step, you will harness the power of Inspect Element to start inspecting and analyzing the elements of a webpage, unlocking a wealth of knowledge and insights along the way.

Step 3: Start Inspecting Elements on a Webpage

Now that you have successfully enabled the Inspect Element feature in Safari, you are ready to embark on an enlightening journey of exploring and analyzing the elements of a webpage. The Inspect Element feature empowers you to delve into the underlying code and structure of web pages, providing valuable insights and opportunities for modification. By following the steps outlined in this guide, you have gained the ability to inspect, analyze, and modify various elements of a webpage with precision and ease.

To start inspecting elements on a webpage using Safari's Inspect Element feature, follow these simple yet powerful steps:

Navigate to the Webpage : Begin by navigating to the webpage you wish to inspect. Whether it's a personal blog, a professional website, or a popular online platform, Safari's Inspect Element feature allows you to analyze and manipulate the elements of any webpage.

Activate Inspect Element : With the webpage open, right-click on any element within the page, such as text, images, or buttons. From the context menu that appears, select "Inspect Element." Alternatively, you can use the keyboard shortcut "Option + Command + I" on your Mac or "Control + Shift + I" on your Windows keyboard to swiftly activate the Inspect Element feature. Upon activation, Safari Developer Tools will reveal a panel displaying the underlying code and structure of the selected webpage element.

Explore the Elements : Once the Inspect Element panel is open, you can explore the elements of the webpage with ease. The panel provides a comprehensive view of the HTML and CSS code associated with the selected element, allowing you to gain insights into its structure, styling, and positioning within the webpage.

Modify and Experiment : With the ability to inspect and analyze webpage elements, you can experiment with modifications to observe real-time changes on the webpage. Whether it's adjusting the text content, modifying the styling, or repositioning elements, Safari's Inspect Element feature enables you to experiment and visualize the impact of your changes instantly.

Gain Insights and Learn : As you delve into the elements of the webpage, take the opportunity to gain valuable insights into web development and design. By analyzing the code and structure of various elements, you can enhance your understanding of HTML, CSS, and the intricate components that contribute to the visual and functional aspects of web pages.

By following these steps, you can harness the power of Safari's Inspect Element feature to gain a deeper understanding of web development and design. Whether you are a developer seeking to troubleshoot design issues or a curious individual eager to explore the building blocks of web pages, the Inspect Element feature in Safari equips you with the tools to accomplish these tasks effectively. Embrace the opportunity to immerse yourself in the world of web exploration and innovation, leveraging the capabilities of Safari's developer tools to unlock a wealth of knowledge and insights along the way.

In conclusion, the ability to enable and utilize the Inspect Element feature in Safari opens up a world of possibilities for web developers, designers, and curious individuals alike. By following the simple yet powerful steps outlined in this guide, you have gained the capability to delve into the underlying code and structure of web pages, empowering you to analyze, modify, and gain valuable insights into the elements that constitute the digital landscape.

Enabling Inspect Element in Safari marks the beginning of an enlightening journey, offering a gateway to a deeper understanding of web development and design. With the Inspect Element feature at your fingertips, you have the power to troubleshoot design issues, experiment with modifications, and enhance your knowledge of HTML, CSS, and the intricate components that shape the visual and functional aspects of web pages.

As you navigate through the elements of webpages using Safari's Inspect Element feature, you gain the opportunity to refine your skills, gain practical insights, and foster a deeper appreciation for the art and science of web development. Whether you are a seasoned developer seeking to fine-tune the layout of a website or an inquisitive user eager to explore the building blocks of your favorite web pages, the Inspect Element feature equips you with the tools to accomplish these tasks effectively.

Furthermore, the seamless integration of Inspect Element within Safari's developer tools enhances the browsing and development experience, fostering a dynamic environment for exploration and innovation. The ability to analyze and modify webpage elements with precision and ease empowers you to elevate your understanding of web technologies and contribute to the creation of compelling digital experiences.

In essence, the journey to enable and utilize Inspect Element in Safari transcends mere technical proficiency; it embodies a spirit of curiosity, creativity, and continuous learning. By embracing the capabilities of Safari's developer tools, you embark on a path of discovery, where each interaction with webpage elements unveils new insights and sparks inspiration.

As you reflect on the knowledge and skills acquired through this guide, may you approach web development and design with renewed enthusiasm and confidence. The journey does not end here; it extends into the boundless realms of web exploration and innovation, where the Inspect Element feature in Safari serves as a steadfast companion in your quest for mastery and creativity in the digital domain.

Leave a Reply Cancel reply

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

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

  • Crowdfunding
  • Cryptocurrency
  • Digital Banking
  • Digital Payments
  • Investments
  • Console Gaming
  • Mobile Gaming
  • VR/AR Gaming
  • Gadget Usage
  • Gaming Tips
  • Online Safety
  • Software Tutorials
  • Tech Setup & Troubleshooting
  • Buyer’s Guides
  • Comparative Analysis
  • Gadget Reviews
  • Service Reviews
  • Software Reviews
  • Mobile Devices
  • PCs & Laptops
  • Smart Home Gadgets
  • Content Creation Tools
  • Digital Photography
  • Video & Music Streaming
  • Online Security
  • Online Services
  • Web Hosting
  • WiFi & Ethernet
  • Browsers & Extensions
  • Communication Platforms
  • Operating Systems
  • Productivity Tools
  • AI & Machine Learning
  • Cybersecurity
  • Emerging Tech
  • IoT & Smart Devices
  • Virtual & Augmented Reality
  • Latest News
  • AI Developments
  • Fintech Updates
  • Gaming News
  • New Product Launches

Close Icon

5 Ways to Improve IT Automation

  • What is Building Information Modelling

Related Post

Sla network: benefits, advantages, satisfaction of both parties to the contract, what is minecraft coded in, how much hp does a diablo tuner add, what is halo-fi, what is halo lock iphone, related posts.

How To Inspect On IPhone Safari

How To Inspect On IPhone Safari

How To Inspect In Safari On IPad

How To Inspect In Safari On IPad

How To Get Developer Tools In Safari

How To Get Developer Tools In Safari

How To Debug In Safari

How To Debug In Safari

How To Inspect Page On Safari

How To Inspect Page On Safari

How To Open Developer Tools In Safari

How To Open Developer Tools In Safari

How To Open Developer Tools On Safari

How To Open Developer Tools On Safari

What Is Web Inspector In Safari

What Is Web Inspector In Safari

Recent stories.

5 Ways to Improve IT Automation

What is Building Information Modelling?

How to Use Email Blasts Marketing To Take Control of Your Market

How to Use Email Blasts Marketing To Take Control of Your Market

Learn To Convert Scanned Documents Into Editable Text With OCR

Learn To Convert Scanned Documents Into Editable Text With OCR

Top Mini Split Air Conditioner For Summer

Top Mini Split Air Conditioner For Summer

Comfortable and Luxurious Family Life | Zero Gravity Massage Chair

Comfortable and Luxurious Family Life | Zero Gravity Massage Chair

Fintechs and Traditional Banks: Navigating the Future of Financial Services

Fintechs and Traditional Banks: Navigating the Future of Financial Services

AI Writing: How It’s Changing the Way We Create Content

AI Writing: How It’s Changing the Way We Create Content

Robots.net

  • Privacy Overview
  • Strictly Necessary Cookies

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

  • Skip to primary navigation
  • Skip to main content
  • Skip to footer

Elbongurk Design  || Branding & Package Design  || Stevens Point, WI

Elbongurk Design || Branding & Package Design || Stevens Point, WI

Stevens point design & branding services, using inspect element in safari.

February 12, 2016 by Jillian Noble 1 Comment

Most browsers have a special built-in tool for web designers and developers to use to help troubleshoot code. It’s a panel that reveals the live HTML, CSS, and any other code (like JavaScript) that is used to create a web page.

Designers and developers can use this panel to figure out exactly what HTML was used to create the page and what CSS is being applied to style any of the elements contained within it. The inspect element tool can also be used to turn off and on specific CSS properties and to try out new CSS properties (only local to your computer, and only till your refresh) to help make decisions about styling and help determine specific code that may be causing problems on your site.

This tool is available in almost all common browsers, but will look and work slightly differently in each. For example, in Firefox and Chrome, there aren’t any special setup steps to make this panel available, however, in Safari you’ll have to adjust the preferences to access it. I’ll be walking you through the steps for setting up and using this tool in Safari.

Setting Safari Preferences

In Safari, you’ll need to make sure your Develop menu is turned on to use the Inspect Element tool. By default the Develop menu is hidden and your Safari menu looks like (fig. 1).

Default Safari Menu

If you happen to have the Develop menu already turned on, your top menu will look like (fig. 2) and you can move on to the next section: Accessing Inspect Element .

Accessing and Using Inspect Element in Safari

Safari Menu with Develop

To turn on the Develop menu, you’ll need to access Safari’s preferences.

From the top menu, Click Safari and from the dropdown, choose  Preferences  (fig. 3) .

Safari Presferences

Note: There is no  Save  or  Save Changes . All changes you make are automatically saved, so you can simply close out once you’ve made your selection.

Safari Close Preferences

Once the Preferences panel has been closed, you should now see Develop in the top menu  (fig. 7) . If you see this, then you are set. You won’t actually need to use the dropdown menu here, but will need to make sure this is present in order to access the Inspect Element tool we’ll be discussing in the next step.

Accessing Inspect Element

Once you’ve made sure that the Develop menu is showing in your top navigation for Safari  (see Setting Safari Preferences  in the section above) , you’ll be able to use the Inspect Element tool on any webpage.

Since many websites will have some very complicated HTML and CSS styling that will make my demo difficult to follow, I’ve made a sample HTML page of my own that we can inspect together if you’d like to follow along with me.

Click here to launch the page. It should open up in a new window or tab. You’ll probably notice right away that my page doesn’t have any real CSS styling applied to it, just the browser defaults. This is just fine for now, the clean slate can help us see what is really happening behind the scenes.

Scroll down the page until some of the text comes into view  (fig. 8) .

Safari-Reveal Text on Page

Using you cursor, highlight a bit of the text  (fig. 9) .

Safari Highlight Text

Right click (or control click if your mouse isn’t setup for right click) to reveal the dropdown menu  (fig. 10) .

Safari Right Click to Expose Menu

From the menu, choose  Inspect Element  (fig. 11) .

Safari Inspect Element

This will reveal the Inspect Element panel  (fig. 12) .

Safari Inspect Element Panel

The panel is typically docked to the bottom of your window, but may also be floating in a window all it’s own. The grouping of icons on the top left of the panel allow you to customize where this panel will live  (fig. 13) .

safari inspect element panel dock settings

It’ll take some experimentation to discover which of the placements you’ll prefer, but for now, it’s probably fine wherever it is. You just want to make sure you can see both it and the text you’ve selected at the same time.

Inspecting the HTML Elements

Now that we have the panel up, we can start to dissect what is happening inside of it. You’ll want to make sure have the Elements tab selected. This tab allows you to see the HTML code used to generate the site ( fig. 14) .

Safari Inspect Element Elements Tab Location

The site HTML should now be in view. Move your mouse over any of the HTML in the panel and click to select any bit of the code to have it highlight the corresponding content on the live site.

Fig 15 shows the result of selecting the first <h2>. As you can see it highlights the code in the inspector panel as well as the code in the live site above. It uses color coding to show the content of the element in blue as well as any other margin or padding applied to that same element. In this case we can see the default browser margin in orange.

Safari Inspect Element with first h2 selected

Let’s try another one. Let’s use our Inspect Element panel to select the first paragraph in the HTML.

Not surprisingly, we get the same result (fig. 16) . The paragraph tags in the HTML are highlighted and so is the paragraph above running in the live site. We can see the paragraph content in blue and the default browser margin in orange.

Safari Inspect Element with first p selected

You can do this same “inspect” for any element in the HTML and it will display the content in the live site using these colored highlights. This is useful for determining not only what content is what, but is also useful for finding out what type of spacing, default margin or otherwise is acting on our elements.

You may have already noticed that the paragraphs in the Inspect panel are different than the other elements. In the images and headings we can see the content as well as the markup. For longer bits of content, like paragraphs, the panel collapses the content to make more information visible. You can use the tiny triangle to expand the tags and reveal the content inside  (fig. 17) . You can click the triangle again to collapse the content.

It’s helpful to keep a look out for these triangles as sometimes nested (HTML tag pairs inside of other HTML tag pairs) get collapsed. Any element that holds other elements will have a tiny triangle in front of the opening tag allowing your to collapse or reveal what’s inside for inspection.

safari-inspect-06

Inspecting the CSS

The Inspect Element panel is great for seeing the HTML for any site, but is is also great at revealing the CSS as well. The CSS part of the Inspector is located on the right side of the panel and is shown in  (fig. 18) .

Safari Inspect Element showing CSS

If your Inspect Element panel doesn’t have this section visible, it might be collapsed. You’ll need to expand it by clicking the expand icon  (fig. 19) .

Safari Inspect Element showing CSS expand icon

You’ll want to make sure you have Styles and Rules selected from the top options  (fig. 20) .

Safari Inspect Element showing CSS options Styles and Rules Selected

Making sure the first <p></p> is still selected in the HTML, scroll the CSS sub-panel down  (fig. 21) .

Safari Inspect Element showing CSS scrolling

You’ll eventually see the actual styles that have been applied to that paragraph. We know that I haven’t used a custom stylesheet for this demo page, so what we see if the User Agent Stylesheet  (Safari’s browser default styles)  (fig. 22) .

Safari Inspect Element showing CSS with User Agent Styles shown

Let’s take a look at another element. Inspect the first <h2> by selecting from the HTML in the panel and scroll the CSS sub-panel down till you see the User Agent Stylesheet CSS styles applied to it  (fig. 23) .

Safari Inspect Element showing CSS with User Agent Styles shown

As you can see, the browser by default displays an h2 as a 1.5em font with the font-weight set to bold. Like the paragraph, we can see the default margin applied and that the element is set to be block.

Edit the CSS

Inspect Element panel also gives us the ability to edit, remove, or add to the CSS already on the page. These edits are only changing the website on your computer, and only temporarily, so don’t worry that this feature might be interfering with other viewers’ experience. It’s a private showing.

Let’s say we want to edit the CSS applied to the first <h2>. We need to scroll our CSS sub-panel back up to the top  (fig. 24) .

Safari Inspect Element showing CSS scrolling up

Once you’ve scrolled all the way back up, you’ll see a section that says something along the lines of “ h2 – Style Attribute, click to edit “.  (fig. 25)

Safari Inspect Element showing CSS h2 click to edit

This is the place where we get to experiment with styles. To test this out, let’s add a CSS property to change the text color of the h2 to red. We write this just like we would in a stylesheet, we write: color: red; .

When we’re finished, we hit  Enter to apply the new style  (fig. 26) .

Safari Inspect Element showing CSS with color set to red applied

Pretty cool, right? If everything worked according to plan, the h2 in the live site should now be red.

We’ll do another example. Let’s tell the h2 to have the font-size set to 3em  (fig. 27) .

Safari Inspect Element showing CSS with color set to font size 3 em

We should now be seeing the h2 in the live site both red and much larger than it was before. If you take a look at the HTML in the panel, you’ll see that the CSS is being applied as an inline style  (that it is being directly put into the HTML rather than into a separate stylesheet)   (fit. 28) . This doesn’t impact our actual code, but it is good to see what’s happening under the hood here.

Safari Inspect Element showing inline style

Now that we know how to add new styles to an element on our page, let’s take a look at removing a style that has been applied. This can either be one I’ve just added or any that are coming from an external stylesheet, it doesn’t really matter, all applied styles are fair game.

You’ll notice if you click inside the box where you wrote the new CSS styles, that some tiny blue checkboxes appear.  (fig. 29) .

Safari Inspect Element showing CSS checkboxes

These guys are used for turning certain styles on and off. Go ahead and uncheck the box in font of the the color: red; to see what happens  (fig. 30) .

Safari Inspect Element showing CSS checkboxes with red unchecked

Once the box is unchecked, you’ll see right away that the h2 is no longer red. Let’s do the same for the font-size we applied a little bit ago. Go ahead and uncheck that box as well  (fig. 31) .

Safari Inspect Element showing CSS checkboxes with both red and font size unchecked

As you probably expected, our h2 returned to its default size. We have now turned off both of these styles. We can also turn either or both of them on again by rechecking the boxes.

Go ahead, let’s recheck the box in front of color: red; .  (fig. 32) .

Safari Inspect Element showing CSS with color set to red applied

Just like before, the h2 is red again. The panel remembers all the styles we’e written in this session and allows us to check, uncheck, and edit any applied style. This is great for testing out ideas and also for trouble shooting issues like unexpected spacing.

Refresh to Reset

All of these styles will remain editable until we refresh the page. Let’s go ahead and refresh the page to see what happens  (fig. 33) .

Safari browser refresh

Once the page refreshes, you’ll see that all of our styling is now gone and we’re left with only the original styling (browser defaults, in this case) once again  (fig. 34) .

Safari Inspect Element panel after a refresh

Make sure to keep in mind that this page only has browser defaults now because there isn’t any attached stylesheet. If it did have one, those styles would be back as well as any defaults. Only the edits we made are gone, not anything that is actually part of the original page. We were the only one who was able to see our edits, so nothing that is actually a part of that page really got tampered with in real life.

Closing Down

Once we’re finished Inspecting, we can use the  “X” in the top left corner to close the Inspect Element panel  (fig. 35) .

Close Inspect Element

Now we’re right back to the beginning again  (fig. 36) .

Safari running our original web page again

Whether you want to Inspect your own page for troubleshooting reasons or you want to look under the hood of somebody else’s page to see how it works, the Inspect Element tool is a great way to do it. You can not only see the HTML, but also reveal edit, add, and remove any CSS applied to the page for your own testing and information.

For those of you who landed here because you are interested in learning web design and writing code, you might want to check out my free web course,  Web Design for Graphic Designers , where I walk you through the steps for creating a modern, responsive website from scratch!

Best of luck!

Web Design For Graphic Designers Book Cover

Web Design for Graphic Designers

A step-by-step guide for creating a modern, responsive website from scratch.

Co-authored by Jillian Noble and Ryan Krug

Published by EMSPACE

Read Online for Free

element safari

About Jillian Noble

Creative Director & Brand Strategist - focused almost exclusively on the craft food and beverage industry since 2018.

Before launching Elbongurk, I worked as a creative director and senior designer for Pottery Barn, Target, and West Elm. I also spent nine years teaching branding and package design classes in the graphic design program at the University of Wisconsin-Stevens Point. Now, Elbongürk is my sole focus.

Emails Newsletter

Receive updates and hear what's recently been going on!

{{#message}}{{{message}}}{{/message}}{{^message}}Your submission failed. The server responded with {{status_text}} (code {{status_code}}). Please contact the developer of this form processor to improve this message. Learn More {{/message}}

{{#message}}{{{message}}}{{/message}}{{^message}}It appears your submission was successful. Even though the server responded OK, it is possible the submission was not processed. Please contact the developer of this form processor to improve this message. Learn More {{/message}}

Submitting…

No charge. Unsubscribe anytime.

Reader Interactions

element safari

March 16, 2016 at 1:42 am

I couldn’t resist commenting. Very well written!

Leave a Reply Cancel reply

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

Notify me of new posts by email.

Our Location

Helping craft food & beverage brands level up their packaging & design since 2009.

3116 Vine Street Stevens Point, WI 54481

Start a Project

Interested in working with us? The best way to get in touch is to fill out our contact form .

You could also shoot us an email at [email protected]

Let’s Connect

Subscribe to our newsletter.

Be notified about upcoming webinars, products, and more!

Email Address

How to Inspect Web Page Elements

See the HTML and CSS markup of any web page

  • PHP Programming
  • Java Programming
  • Javascript Programming
  • Delphi Programming
  • C & C++ Programming
  • Ruby Programming
  • Visual Basic
  • Franciscan University of Steubenville

element safari

What to Know

  • In Chrome, Firefox, or Safari: Right-click an element and select Inspect .
  • In Internet Explorer or Edge, enable inspections, right-click an element, and select Inspect Element .

This article explains how to inspect elements in Chrome, Firefox, Safari, Internet Explorer, and Microsoft Edge, including how to enable inspections in IE and Edge.

How to Inspect Web Elements With Your Browser

Websites are built from lines of code, but the results are pages with images, videos, fonts, and other features. To change one of those elements or see what it consists of, find the line of code that controls it. To do that, use an element inspection tool. You don't have to download an inspection tool or install an add-on for your favorite web browser. Instead, right-click the page element, then select Inspect or Inspect Element . How you access this tool varies by browser, however.

This article uses right - click to refer to the mouse device action on a Windows PC and the Control + click action on a Mac.

Inspect Elements in Google Chrome

In Google Chrome , there are two ways to inspect a web page using the browser's built-in Chrome DevTools :

  • Right-click an element on the page or in a blank area, then select Inspect .
  • Go to the Chrome menu, then select More Tools > Developer Tools .

Use the Chrome DevTools to copy or edit the Hypertext Markup Language (HTML) markup and hide or delete elements until the page reloads.

When Chrome DevTools opens at the side of the page, change its position, pop it out of the page, search for page files, select elements from the page for a closer look, copy files and URLs, and customize the settings.

Inspect Elements in Mozilla Firefox

Mozilla Firefox has two ways to open its inspection tool, called Inspector:

  • Right-click an element on the web page, then select Inspect Element .
  • From the Firefox menu bar, select Tools > Web Developer > Inspector ​.

As you move the pointer over elements in Firefox, Inspector automatically finds the element's source code information. When you select an element, the on-the-fly search stops, and you can examine the element from the Inspector window.

Right-click an element to find the supported controls. Use the controls to edit the page as HTML markup, copy or paste inner or outer HTML markup, show Document Object Model (DOM) properties, take a screenshot of or delete the node, apply new attributes, see the Cascading Style Sheets (CSS), and more.

Inspect Elements in Safari

There are a couple of ways to examine web elements in Safari :

  • Right-click any item or space on a web page, then select Inspect Element .
  • Go to the Develop menu, then select Show Web Inspector .

If you don't see the Develop menu, go to the Safari menu, and select Preferences . On the Advanced tab, select the Show Develop menu in menu bar checkbox.

Select individual elements on the web page to see the markup devoted to that section.

Inspect Elements in Internet Explorer

A similar inspect element tool, which is accessed by enabling the Developer Tools, is available in Internet Explorer. To enable Developer Tools, press F12 . Or, go to the Tools menu and select Developer Tools .

To display the Tools menu, press Alt+X .

To inspect elements on a web page, right-click the page, then select Inspect Element . From the Internet Explorer Select element tool, select any page element to see the HTML or CSS markup. You can also disable or enable element highlighting while browsing through the DOM Explorer.

Like the other element inspector tools, use Internet Explorer to cut, copy, and paste elements and edit the HTML markup, add attributes, copy elements with styles attached, and more.

Inspect Elements in Microsoft Edge

Before you can inspect elements in Microsoft Edge, you must enable inspection. There are two ways to enable inspection:

  • Go to the address bar and enter about:flags . In the dialog box, select the Show View Source and Inspect Element in the context menu checkbox.
  • Press F12 , then select DOM Explorer .

To inspect an element, right-click an element on a web page, then select Inspect Element .

  • How to Copy Code From a Website
  • How to Use CSS to Change Fonts on Web Pages
  • How to Stretch a Background Image to Fit a Web Page
  • How to View the HTML Source Code in Internet Explorer
  • What Is CSS and Where Is It Used?
  • How to View Websites in Spanish Automatically
  • Marquee in Web Design
  • Using Links to Create Vertical Navigation Menus
  • Convert Your Website to HTML
  • Using HTML5 to Display Video in Current Browsers
  • What Is a User Style Sheet?
  • How to Use CSS to Zero Out Your Margins and Borders
  • How to Find the Codes or URLs for Web Images
  • What Is the Difference Between DIV and SECTION?
  • Disabling (or Enabling) the Java Plugin in a Browser
  • Basic Tools for Web Design

IMAGES

  1. How to Inspect Element on Safari Mac Computer? Safari Assistant Help

    element safari

  2. How to Inspect Element on Mac using Safari ?

    element safari

  3. Element SAFARI FÜR

    element safari

  4. How to inspect element in Safari

    element safari

  5. How to Inspect Element on Mac using Safari ?

    element safari

  6. Short cargo enfant Element Safari

    element safari

VIDEO

  1. Safari ka element karne Ka Tarika

  2. Ulve i sneen

  3. Massive nile crocodile tries to steal from three lionesses

  4. Leopard lunching in a tree

  5. Как в Safari на iPhone открыть ссылку не покидая страницы. iPhone ссылки Safari фоновый режим

  6. Spacegoat Safari

COMMENTS

  1. 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 ...

  2. How to Inspect Element on Mac using Safari ?

    1. To enable the Developer Menu open the Safari browser and click Safari > Settings. 2. Click on Advanced. Check the Show Develop menu in Menu bar checkbox. Doing this also allows you to Inspect Elements on iPhones by connecting them. 3. The Inspect Element Safari feature is now enabled.

  3. 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 ...

  4. 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.

  5. 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.

  6. 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.

  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 Edit Webpages on Safari Using Inspect Element

    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 .

  9. How to use Inspect Element on Mac using the 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. Step 3 ...

  10. 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 ...

  11. How to inspect element in Mac Safari

    Fire up Safari, click the browser's menu from the menu bar on the top, and go to Preferences. Jump over to the Advanced tab in the Safari Preferences window. Check the box that labelled " Show Develop menu in menu ba r". Voila! Inspect Element is now enabled and ready to roll in Safari on your Mac. To access this powerful tool, you have a ...

  12. Web Inspector

    View and inspect the elements that make up the DOM of a webpage. Clicking elements from the fully editable markup tree on the left reveals the node's styles in the middle sidebar, with more details in the right sidebar. ... Access tools for debugging webpages in Safari, as well as tools for debugging web content in other apps and on other ...

  13. 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.

  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. web inspector

    58. Just enable Show Developer Menu in Safari's Preferences, Advanced tab. It will enable the option Inspect Element when you right click the page. You can also start it with Command + Option + I. You can get more info about this option in Safari for Developers - Tools and Safari Web Inspector Guide: The Develop Menu. Share. Improve this answer.

  16. How to Inspect Element in Safari • macReports

    Using your mouse or trackpad, right-click (control-click) anywhere on the webpage and select "Inspect Element". 2. You can use the Develop menu. In Safari, click Develop and choose "Show Web Inspector". 3. You can also use keyboard shortcuts. Simply press these keys together: Option-Command-i. 4.

  17. 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.

  18. 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.

  19. 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.

  20. How To Enable Inspect In Safari

    Enabling the Inspect Element feature in Safari is a pivotal step that grants you access to a powerful set of tools for analyzing and modifying the elements of a webpage. This feature empowers users to delve into the underlying structure and style of web pages, providing valuable insights for developers, designers, and curious individuals alike.

  21. Using Inspect Element in Safari

    From the top menu, Click Safari and from the dropdown, choose Preferences (fig. 3). The preferences panel will appear. From the top set of icons, click Advanced (fig. 4). In the Advanced panel, you'll notice a checkbox at the very bottom labeled Show Develop in Menu Bar. Click that box to turn on the option (fig. 5).

  22. How do you apply style rule in Safari Web Inspector?

    Safari 8.0.8 on OS X. Right-click any element and select Inspect Element from the pop-up menu; Ensure Styles and Rules are selected on the right hand side of the inspector; You can then either add individual rules by clicking + New Rule, or simply click and start typing rules where Click to Edit appears (refer to image below); Enter your new rules and these will be applied to the element being ...

  23. How to Inspect Web Elements With Your Browser

    Mozilla Firefox has two ways to open its inspection tool, called Inspector: Right-click an element on the web page, then select Inspect Element. From the Firefox menu bar, select Tools > Web Developer > Inspector . As you move the pointer over elements in Firefox, Inspector automatically finds the element's source code information.