• iPhone 15 Plus vs. Pro Max
  • 3 Key Tech Trends to Watch in 2024

How to Activate the iPhone Debug Console or Web Inspector

Use Safari's web developer tools to study problematic websites

safari browser code inspector

  • Saint Mary-of-the-Woods College
  • Switching from Android

What to Know

  • Activate Web Inspector on iOS: Go to Settings > Safari > Advanced and move the Web Inspector toggle switch to the On position.
  • Use Web Inspector on macOS: Connect your iOS device to a Mac and choose the URL to inspect from the Develop menu.

If you run into a bug or another issue with a website on Safari mobile, use the Web Inspector tool to investigate. This article explains how to use the Safari console for iPhone to debug errors with the help of your Mac computer. Instructions apply to iPhones with iOS 14, iOS 12, or iOS 11, and well as Macs with macOS Big Sur (11.0), macOS Catalina (10.15), or macOS Mojave (10.14).

Activate Web Inspector on Your iPhone or Other iOS Device

The Web Inspector is disabled by default since most iPhone users have no use for it. However, if you're a developer or you're curious, you can activate it in a few short steps. Here's how:

Open the iPhone  Settings  menu.

On an iPhone with an early version of iOS, access the Debug Console through Settings > Safari > Developer > Debug Console . When Safari on the iPhone detects CSS, HTML, and JavaScript errors, details of each display in the debugger.

Scroll down and tap  Safari  to open the screen that contains everything related to the Safari web browser on your iPhone, iPad, or iPod touch.

Scroll to the bottom of the page and select Advanced .

Move the Web Inspector toggle switch to the On position.

Connect Your iOS Device to Safari on a Mac

To use the Web Inspector, connect your iPhone or another iOS device to a Mac that has the Safari web browser and enable the Develop menu .

With Safari open, select Safari from the menu bar and choose  Preferences .

Select the  Advanced  tab.

Select the Show Develop menu in menu bar check box and close the settings window.

From the Safari menu bar, select Develop and choose the name of your attached iOS device, then select the URL that appears under Safari to open the debug console for that site.

After you connect your device, use your Mac to inspect the website you want to debug and have it open in the Safari mobile browser.

What Is Web Inspector?

Web developers use Web Inspector to modify, debug, and optimize websites on Macs and iOS devices. With Web Inspector open, developers can inspect the resources on a web page. The Web Inspector window contains editable HTML and notes regarding the styles and layers of the web page in a separate panel.

Before iOS 6, the iPhone Safari web browser had a built-in Debug Console that developers used to find web page defects. Recent versions of iOS use Web Inspector instead.

With Safari 9 and OS X Mavericks (10.9), Apple introduced Responsive Design Mode in Web Inspector. Developers use this built-in simulator to preview how web pages scale to different screen sizes, resolutions, and orientations.

To set up Web Inspector on your iPad, open your iPad's Settings and select Safari > Advanced , then turn Web Inspector On . Connect the iPad to a Mac computer, then open Safari on the Mac and select Safari > Preferences > Advanced , then turn on Show Develop menu in menu bar .

You cannot just connect your iPhone to a Windows PC and start using Web Inspector through Chrome like you can with a Mac. Installing package manager software can provide you a sort of workaround, but it's not recommended unless you're familiar with the package management app you intend to use.

Get the Latest Tech News Delivered Every Day

  • 4 Ways to Play Fortnite on iPhone
  • How to Use Web Browser Developer Tools
  • Add More Features by Turning on Safari's Develop Menu
  • How to Inspect an Element on a Mac
  • How to Activate and Use Responsive Design Mode in Safari
  • 10 Hidden Features in macOS Sonoma
  • How to Clear Search History on iPhone
  • How to Disable JavaScript in Safari for iPhone
  • How to View HTML Source in Safari
  • How to Clear Private Data, Caches, and Cookies on Mac
  • How to Change Your Homepage in Safari
  • How to Manage Cookies in the Safari Browser
  • How to Reset Safari to Default Settings
  • How to Clear Internet Cache in Every Major Browser
  • How to Manage History and Browsing Data on iPhone
  • How to Manage Your Browsing History in Safari

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

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

2. Under Advanced, enable the Develop menu

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

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

4. Inspect the page code

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 .

Get the BEST of Tom’s Guide daily right in your inbox: Sign up now!

Upgrade your life with the Tom’s Guide newsletter. Subscribe now for a daily dose of the biggest tech news, lifestyle hacks and hottest deals. Elevate your everyday with our curated analysis and be the first to know about cutting-edge gadgets.

Peter Wolinski

Peter is Editor of the How To and Camera sections 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, obsessively detailing his car, squeezing as many FPS as possible out of PC games, and perfecting his espresso shots. 

Google Chrome just got 3 big upgrades to make browsing easier — here's what you can do now

This sneaky Microsoft Edge setting could let it steal your Chrome tabs — how to turn it off

OpenAI dropped new Sora videos — and they have to be seen to be believed

Most Popular

By Camilla Sharman March 01, 2024

By John Velasco February 29, 2024

By Philip Michaels February 29, 2024

By Ryan Morrison February 29, 2024

By Claire Davies February 28, 2024

By Grace Dean February 28, 2024

By Cynthia Lawrence February 27, 2024

By Peter Wolinski February 27, 2024

By Nicola Appleton February 26, 2024

By Peter Wolinski February 26, 2024

By Peter Wolinski February 25, 2024

  • 2 No, the iOS 17 Journal app isn't a privacy risk — what you need to know
  • 3 This is the only reason why I’d wear a bendable phone on my wrist
  • 4 I tried the Amazon Basics Dutch Oven — here's what I've learned
  • 5 Forget playing with power — I just want to see Nintendo experiment more with the Switch 2
  • GTA 5 Cheats
  • What is Discord?
  • Find a Lost Phone
  • Upcoming Movies
  • Nintendo Switch 2
  • Best YouTube TV Alternatives
  • How to Recall an Email in Outlook

How to use Inspect Element on Mac using the Safari browser

Sandy Writtenhouse

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.

  • How to choose between a MacBook and a Windows laptop
  • How to use a blue light filter on your PC or Mac
  • Spinning wheel? How to stop your Mac from freezing

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

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

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

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

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

Step 1: Move and resize Inspect Element.

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

Step 2: Customize the tabs.

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

Step 3: Inspect an element.

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

Step 4: Search for an element.

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

Step 5: View warnings or errors.

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

Step 6: Adjust the settings.

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

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

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

Editors' Recommendations

  • How to share an external hard drive between Mac and Windows
  • How to delete a user on your Mac and free up disk space
  • Here’s why I finally gave up on using Safari on my Mac
  • How to password protect a folder in Windows and macOS
  • How to make a zip file on a Mac
  • How-To Guides

Sandy Writtenhouse

Do you clear your browser cache regularly? If not, you should. Your browser cache is responsible for storing the data of previously viewed websites. While the purpose behind the cache is for quicker loading times of the sites you frequent, it can work against you over time.

Not only can it slow down your browser, but it makes your private info more vulnerable to breaches. For whichever browser you use, here’s how to clear your cache.

One of the best parts of the Apple ecosystem is how neatly everything works together. Apple often gets flak for its "walled garden" approach, but when it works well, it enables the kind of productivity features that Android and PC rivals can only dream about. For example, you can use your iPad as a second screen for your Mac with minimal effort, and there's no need to fiddle with annoying cables and questionable software hacks.

Every time I sit down and use my Mac, I’m reminded that it’s full of advanced features and clever extras. Yet there’s one place that absolutely does not apply: the clipboard. Copying and pasting in 2023 feels like it’s stuck in the past with no prospect of salvation.

At least, it did feel that way until I came across an app called Paste. This superb utility has taken a knife to copying and pasting and made it… fun? I never thought I’d say that about such a mundane task, but here we are -- it’s true. Stacked with features

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

Jamie Juviler

Published: June 20, 2023

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

woman learning how to inspect a webpage on her laptop

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

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

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

What does ‘inspect element’ mean?

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

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

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

safari browser code inspector

Free Guide: 25 HTML & CSS Coding Hacks

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

  • Coding to Convention
  • Being Browser-Friendly
  • Minimizing Bugs
  • Optimizing Performance

You're all set!

Click this link to access this resource at any time.

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

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

How to Inspect Elements

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

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

How To Inspect Elements in Chrome

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

Here's how to get started: 

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

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

2. Open up the Inspect panel.

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

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

3. Change the location of the inspect panel.

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

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

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

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

the hubspot homepage with the chrome inspect element tool open

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

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

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

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

5. Select a specific element to inspect. 

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

the element select icon in the chrome inspect element tool

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

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

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

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

the hubspot homepage with the chrome inspect element tool open

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

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

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

7. Hide and edit elements on the page. 

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

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

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

8. Edit the page's CSS code. 

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

9. View the page's mobile version. 

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

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

the toggle device button in the chrome inspect element tool

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

the mobile device view in google chrome inspect element tool

How to Inspect Element on Mac

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

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

How To Inspect Elements in Safari

Safari includes a tool, just like Google Chrome, that allows you to inspect a web page. Here's how to use it. 

1. Enable Safari's developer tools. 

To use Safari’s inspect tool, Web Inspector, we first need to enable Safari's developer tools. Here's how: 

  • On the top menu, select Safari > Preferences .
  • Tap Advanced.  
  • Check the box next to Show Develop menu in menu bar .
  • You’ll see a Develop option added to the menu above.

2. Go to your desired web page. 

Next, go to the web page you'd like to inspect. For this example, I'll be using HubSpot.com again. 

3. Open up Web Inspector.

There are three ways to open Web Inspector in Safari:

  • Option 1 : 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: Choose Develop > Show Web Inspector from the top menu bar.
  • Option 3: Use the shortcut command-option-I .

Safari’s inspector opens at the bottom of the window by default.

To change this configuration, click the icon to dock the display on the right side or pop out in a separate window.

Both are located next to the X icon in the top left corner of the display.

the inspect element tool in safari

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

Safari’s inspector panel has two columns. The first shows the source HTML, and the second shows the page CSS.

Use your cursor to explore the source HTML and see which lines of code correspond to each page region. Blue highlights the contents, green highlights the padding, and orange highlights the margins. 

We can also inspect the page directly. Click the element selection icon at the top of the panel:

the safari inspect element button

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

6. Edit, add, or delete page elements. 

Like Chrome’s inspector, Safari lets us modify, add, and remove page elements. To edit the page, right-click an HTML element in the inspect panel, then choose an option from the Edit menu. Web Inspector will prompt you for new text input, then display your changes in real-time:

the hubspot homepage with the heading text changed in safari inspect element tool

Or, add a new element to the page by right-clicking a line of code and choosing an option from the Add menu. In this example, I’ve added a new <h1> child element to an existing <div> :

a new piece of text added to the hubspot homepage

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

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

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

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

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

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

the mobile view in the safari inspect element tool

How To Inspect Elements in Firefox

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, you have several options: 

  • Option 1: 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: Select Tools > Web Developer > Inspector from the top menu bar.
  • Option 3: Use the shortcut control-shift-C in Windows or command-option-C in macOS.

Next, go to the web page you'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, 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:

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

the select element button in the firefox inspect element tool

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, select its code in the inspector. Then, either double-click to change the text, or right-click and choose Edit as HTML or Create New Node to add code. Or 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, use the Filter Styles region at the bottom of the inspect panel. Uncheck the box next to a CSS declaration to deactivate it (or write in new code yourself):

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

the mobile view button in firefox devloper tools

Responsive Design Mode lets you choose from several preset screen resolutions or set your own, and you can also toggle connection speed and device pixel ratio:

the responsive design editor in firefox inspect element tool

Get a Closer Look With Inspect

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.

Don't forget to share this post!

Related articles.

How to Code a Website for Free in 6 Easy Steps

How to Code a Website for Free in 6 Easy Steps

Software Toolchains: Streamline Your Workflow

Software Toolchains: Streamline Your Workflow

How Long Does it Take to Build a Website?

How Long Does it Take to Build a Website?

How to Start Coding: The Ultimate Guide for Beginner Programmers

How to Start Coding: The Ultimate Guide for Beginner Programmers

20 Best WYSIWYG HTML Editors for 2024: Streamlining Web Development

20 Best WYSIWYG HTML Editors for 2024: Streamlining Web Development

The Beginner's Guide to Website Development

The Beginner's Guide to Website Development

Static Versus Dynamic Linking: When to Use Each

Static Versus Dynamic Linking: When to Use Each

6 Foolproof Methods for Promoting Your New Website in 2022

6 Foolproof Methods for Promoting Your New Website in 2022

25 Things to Consider Before, During, and After Buying a Website, According to HubSpotters Who Did It

25 Things to Consider Before, During, and After Buying a Website, According to HubSpotters Who Did It

How to Convert Your Website Into an App [+ 5 Brands That Did It]

How to Convert Your Website Into an App [+ 5 Brands That Did It]

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

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

  • Website Design

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

Think of the internet as a giant iceberg. The average user only sees the tip of the surface: the website interfaces shown on our screens, but every webpage rests on massive foundations of code.

Lines and lines of HTML , CSS , and JavaScript synthesize to construct the experiences we mindlessly scroll and tap through daily.

What if you could peek behind the curtain?

The ability to inspect website code lives directly inside your browser. Today’s popular browsers like Chrome, Firefox, and Safari contain built-in developer tools with the Inspect Element feature that helps you play around with the front-end technologies of any web page.

This guide will teach you how to access and use the Inspect Element feature in all three browsers. We’ll also discuss what we can achieve using these browsers’ developer tools and how Inspect Element helps.

Let’s dive right in!

What Is Inspect Element?

Why inspect websites, how browser developer tools work, inspecting elements in google chrome, inspecting elements in firefox, inspecting elements in safari, ways to use inspect element, don’t just view websites, interact with the code.

Inspect Element is a utility, usually found within your browser’s developer tools, that lets you view and manipulate the code — HTML, CSS, and JavaScript — that constructs any webpage.

When you open Inspect Element, it shows you various code segments that build the website.

You can highlight page sections to reveal the corresponding source code. Alternatively, clicking on a line of the original source code will highlight its matching visual element on the rendered page. This linking of front-end code and design lets you understand how websites are built.

Inspect Element is a utility, usually found within your browser’s developer tools, that lets you view and manipulate the code — HTML, CSS, and JavaScript — that constructs any webpage.

Nerd Note : Inspect Element allows digital marketers to see how specific changes will affect the appearance of a web page without making any changes to the live site. This can help test new CTA buttons, drop-down menus, color schemes, and other design elements. You can even see if your website is responsive on different devices.

You can tweak text content, colors, fonts, layouts, animations, and more, to preview changes. The webpage remains unaltered externally, and refreshing returns your local view to the original state.

Who Is It For?

While Inspect Element is primarily considered a web developer tool, its practical uses span beyond coding. Here’s how various roles can benefit:

  • Developers : Debug layout issues, test code edit, and improve site performance.
  • Designers : Visualize new style ideas and preview designs across devices.
  • Marketers : Check SEO data, export icons/images, and modify text locally.
  • Writers : Anonymize screenshots and locally edit articles.
  • Support : Identify problems for documentation.
  • Students : Learn the implementation of web technologies.

Essentially, anyone involved with websites whether it’s building, designing, running, writing about, or just using them, can discover new perspectives through inspection.

Let’s look at exactly why you should start inspecting elements on the web.

Let’s explore the key functions of the Inspect Element feature to understand how websites are constructed.

1. Debug And Fix Problems

Finding and fixing bugs is a massive use case for inspection tools. Developers can dive into the code to troubleshoot when a website appears broken to determine if it’s an issue with styling, layout, responsiveness, etc.

Elements causing errors on the page are visually displayed in the inspector, allowing developers to narrow down the issue code quickly.

DreamHost webpage with h1 highlighted and the corresponding code highlighted on the right in the inspect tool

Since values can be tweaked live to non-destructively test fixes, it becomes easy to find the fix.

Inspection tools also provide access to the Console panel. This allows for more advanced debugging and running custom JavaScript to see how the page reacts.

So when tackling front-end and back-end website bugs, Inspect Element gives the power to unravel where problems originate.

2. Understand Web Development

For new developers still learning HTML, CSS, or JavaScript, inspector tools greatly assist the learning process. Inspect Element lets you see professional implementations of what you’re trying to achieve on your website. Ultimately, helping improve your implementation.

You can also test how changing elements and content in HTML impacts the page.

the same DreamHost page pointing towards the h1 and the page code called "font-weight"

For example, adjusting margin values to observe spacing shifts or targeted nested elements using CSS descendant selectors. The real-world context also sticks better than reading through textbook examples.

Plus, seeing how expert web developers structure and optimize sites provides a blueprint for coding your pages. The ability to experiment coupled with viewable source code from popular sites facilitates rapid growth.

3. Test Designs and Content

Web designers frequently use inspector tools to mock up style changes quickly. Testing variations — like new fonts, resized elements, color palettes, etc. — can be done instantly without affecting production code.

the same DreamHost webpage with the h1 highlighted and the inspect code showing "font-family" changed to times new roman reflected in the h1

For example, compare typefaces to determine ideal readability or change the button colors to see what they look like. With Inspect Element tools, you can do that right within your browser instead of making the changes in an external device like Photoshop or Figma.

Similarly, for writers and marketers, modifying text locally helps preview content and layout adjustments. From testing paragraph widths to inspecting metadata, easy editing without needing access to Content Management System (CMS) backends is valuable.

Content Management System (CMS)

A Content Management System (CMS) is a software or application that provides a user-friendly interface for you to design, create, manage, and publish content.

4. View SEO Data

Browser developer tools provide vital insights when considering a web page’s SEO and social meta. Examining meta tags — descriptions, titles, open graph tags — most crucially influences how links appear in SERPs and when shared.

long inspect element field pointing out "meta data" fields, one for DreamHost and one for twitter with og:titles

For example, most social networks read the og:title og:description . All this information is in a website’s <head> elements.

5. Check Performance

Inspect Element tools also cater to web performance audits for improving overall site speed and loading behavior. In Chrome, the Network tab will give you a load timeline, which includes how long each element took.

the same DreamHost web page showing the performance audits within Inspect Element on Chrome

When inspecting pages, you can view total download times and resource requests and break this data into individual elements. Find out which images, fonts, or JavaScript files drag down performance. Then, address the issues directly: compress assets, implement caches, and defer nonessential scripts.

Network inspection also allows throttling to mimic slow connections on mobile or poor wifi. Discover usability flaws by measuring loading times across simulated connections. Are pages still functional on 3G? Do some files block rendering? This information can help you improve your overall website page speed .

6. And More

This just scratches the surface of what’s possible through Inspect Element. We’ve mainly focused on use cases for developers, but designers, writers, and marketers can accomplish many goals discussed prior without coding expertise. You’ll also find analyzing accessibility and security vulnerabilities often leverages inspection capabilities.

Now that you hopefully better understand all you can achieve by inspecting web pages, let’s quickly look at how these tools work before jumping into practical walkthroughs.

The core of all major browser Inspect Element interfaces revolves around the Document Object Model (DOM).

When a web page loads, the browser processes markup (HTML), presentation (CSS), and logic (JavaScript) to construct a DOM instance.

The DOM essentially represents the page structure as a tree of parent-child node elements. Developers can instantly interact with this live representation using inspector tools to read, edit, and visualize corresponding changes.

So when you toggle CSS declarations on and off while inspecting, rewrite conditional logic, or hide specific HTML nodes, for example, the matching DOM nodes update in real-time. This is how alterations display live without actually changing any source files externally.

Behind the scenes, browsers apply changes made through inspection tools by temporarily overriding the default CSS and HTML. These modifications only exist for your browser and revert to normal once you refresh the page (or just close the tab and come back later).

As one of the world’s most popular browsers today , Google Chrome, accounting for over 70% of the browser market share, is equipped for nearly any inspection needed out of the box.

Pressing Ctrl+Shift+I (Windows) or Command+Option+I (Mac) instantly launches Chrome’s DevTools interface to analyze any available webpage or web app. You can also inspect specific elements on the page.

same DreamHost web page showing the inspect element pages in dark mode

Let’s break down how to access Chrome’s Inspector, navigate page elements efficiently, and test joint manipulations – from editing text to simulating mobile devices, touchscreen devices, and more. You can use the phone icon on the top-left corner of the console window.

1. Open Developer Tools

Start by navigating Chrome (or any Chromium-based browser) to any webpage you want to inspect. Right-click anywhere on the page and select Inspect from the context menu.

Alternatively, use the above keyboard shortcut.

DevTools appears docked at the bottom of your browser window on larger screens as default. You can open it as a separate window or change docking locations, too — click on the three vertical dots in the upper-right corner of the Inspect Element window.

Wherever it renders, the first thing you’ll see is the main elements panel which shows all the HTML code.

inspect element window devtools view in html starting with <html class> into the <head>

Various other analysis tabs can be accessed across the top: Console, Sources, Network , etc.

Depending on where the Inspect element window opens, one portion will show the page source code starting with <html> . As you click on different things in the code, the right (or lower) side shows the styles, including fonts, colors, margins, paddings, etc.

This linking between code and appearance facilitates understanding and experimenting with changes. But before manipulating anything, let’s see how to target elements for inspection efficiently.

2. Find Elements To Inspect

As pages grow long and complex, scanning visually for the element you want and locating its code in dev tools can become tedious. Instead, use the node selection tool.

In Chrome DevTools, click the icon on the top-left corner (of the inspector window) that resembles the selector crossed with the cursor (or press Ctrl/Cmd+Shift+C ).

same dreamhost page with company logo highlighted and the corresponding code highlighted in the inspect element box

Your mouse now toggles element selection mode. Hover over any visual entity on the page and notice how the inspector code automatically highlights its DOM node.

Now, clicking any element on the page will directly highlight the code that makes the element appear on the page. You can also see the styles right or below the HTML code. You can also use the search box or search tab to find elements. Alternatively, Ctrl+F (Windows) and Cmd+F (Mac) work too!

Let’s see what we can edit with the elements selected.

3. Interact With The DOM

The inspect element feature also provides a way of interacting with the Document Object Model (DOM) — the structured representation of page elements visible in the editor.

Developers can leverage the DOM to reshape content, style, and interactivity directly within Chrome DevTools.

Some common ways to manipulate elements include:

  • Editing text by making content fields directly editable.
  • Toggling CSS styles like colors and fonts to visually test styling changes in the CSS panel.
  • Modifying component attributes like links and buttons to reshape functionality.
  • Rearranging structural elements to prototype alternative layouts.

The DOM updates live with changes made in the inspector view. So any tweaks preview instantly in the browser, then reset upon refresh, making experiments low risk during development.

4. Test Responsiveness

Beyond editing individual elements, inspector tools also provide environments to test responsiveness across a variety of devices and viewports.

Chrome DevTools includes device mode simulation. You can select presets to emulate standard phone or tablet resolutions and touch capabilities. Or use the more advanced options to manually configure exact dimensions, pixel ratios, CPU throttling, and other metrics.

This allows rapid validation of aspects like:

  • Layouts at various breakpoints.
  • Touch target spacing for mobile users.
  • Site performance on low-powered devices.
  • Accessibility on different hardware.

The ability to preview pages on simulated mobile screens during development helps perfect responsiveness and progressive enhancement delivery. Testing across a wide spectrum of emulated devices ensures broad browser and device support.

Firefox provides its webpage inspection tools rivaling the functionality of Chrome DevTools. Access Firefox Inspector using the same Inspect Element shortcuts as Chrome: Ctrl+Shift+I (Windows) and Cmd+Opt+I (Mac) .

You can also use the keyboard shortcut Ctrl+Shift+C (Windows) and Cmd+Opt+C (Mac) to open the inspect element panel, allowing you to click on an element on the page to jump to the code directly.

same dreamhost page showing the inspect element box in firefox

1. View DOM Attributes

When analyzing complex interfaces, focus states and dynamic effects rely on HTML attributes instead of CSS. Right-click any element within Inspector views and choose Show DOM Properties .

right-click menu from inspector box highlighting the "Show DOM Properties" option

This displays all native attributes associated with the node. You can directly edit values here to modify component behavior through the Inspector rather than requiring code changes.

For example, adjusting the range slider min/max and step increments visually sets bounds, changing the checkbox/radio button names groups toggles, overwriting dataset properties hooks different remote data, and the list goes on and on.

2. Work Visually With Box Model Diagrams

Firefox eases inspection by showing the padding, borders, and margins right as you move your cursor around the website.

same dreamhost webpage showing different elements (image, h1) within and overlapping grids

When clicking any node, the Inspector panel cycles between three states: geometry off, box model overlay only, and both overlay plus markup outlines.

This can be useful when you want to test if your spacing, padding, and margins have been appropriately applied to the elements.

It also makes it more straightforward to fix any issues since you can click through specific elements and see precisely what CSS styling is affecting them. Geometric analysis here can help beginners grasp spatial relationships faster.

3. Edit Colors With A Color Picker

Within Inspector, click any color swatch next to any property accepting colors like background, border, etc. It’ll show you a color slider, alpha setting, and a color picker to pull colors from your open page.

Within Inspector, click any color swatch next to any property accepting colors like background, border, etc. It’ll show you a color slider, alpha setting, and a color picker to pull colors from your open page.

You no longer need to spend time guessing color codes or checking your design assets for the code being used. Pick it from existing elements or even images on the page.

Safari offers the Webkit Inspector for inspecting pages on macOS systems primarily. However, you need to enable the development menu before accessing it.

Open Safari and click Safari from the Menu > Settings > Advanced . Check the box for “ Show features for web developers. ”

show features for web developers shown at the bottom page of the advanced options

Now you can visit any website and right-click to see the “ Inspect element ” option available,

right-click menu showing the "Inspect Element" option

You can also use the keyboard shortcut, Cmd+Opt+C, to access the Inspect Element feature.

Timelines And Network Speed

Similar to most other browsers, Safari offers powerful timelines within the Safari Inspector. The resources list helps you instantly identify which files are causing rendering delays and what the reason could be. You can also see what scripts are blocking the page load.

3D View Of Website Layers

right-click menu showing the "Inspect Element" option

If you want to analyze the layers that make up the website, simply go to the Layers tab and you’ll be presented with a full 3D model of all the layers

Now that we’ve set up inspector tools let’s discuss some practical ways they can be used. Here are just a few common usage examples:

Change Text Or Images

One helpful capability is modifying textual content or image assets directly within the editor. You can tweak headlines, swap logos, anonymize details, and more.

To edit any text or images, inspect the element you want to change first, then double-click within its bounds in the code editor to make the content editable.

Input anything you want, and press enter to make the changes live (temporarily).

Change Colors, Fonts, And Styling

When inspecting various elements like links, buttons, menus, or galleries — you’ll notice attributes that define associated behavior like href destination URLs, carousel view box data sources, and more.

Much like editing textual content and CSS properties and style sheets, these HTML-level traits can be manipulated directly within Inspector.

The DOM updates these changes on the spot. So you can immediately see how the changes reshape component functionality without coding:

  • Modify the href of links and buttons to redirect clicks elsewhere temporarily.
  • Adjust tab role and aria tags to test accessibility improvements.
  • Swap thumbnail image src attributes while building galleries.

Change Element State

Beyond basic styling, Inspector tools also allow modifying interactive element states like hover, focus, and active. Right-click elements and use the Force state options (Google Chrome) to visualize how components appear during usage.

right click menu opened over inspect element with "Force state" option highlighted

For example, toggle a button’s active state to ensure the pushed effect is visible to users. Check disabled field borders to see if they offer proper contrast. Validate menu links highlight appropriately on focus during keyboard navigation testing.

Hide Or Delete Items

Finally, bulk hiding or deletion of page elements is possible, too. It can help identify unnecessary code bloating page size, block elements from rendering correctly, or unexpectedly hide desired content from users.

close up of dreamhost webpage with inspect element highlighting a <p class> code

To try this, simply highlight any element in the code and press delete to remove it from the rendered view instantly.

In the screenshot, we have deleted the DreamHost’s homepage heading from our view. You can do much more with Inspect Element as you explore it.

Can you use Inspect Element on any website?

Yes, Inspect Element works universally across all modern websites. However, some websites render code on the server side and only push JavaScript objects to the front end. This is generally done to prevent web scrapers from pulling data, and it can become difficult for you to understand the site structure using Inspect Element.

Do changes made in Inspect Element save permanently?

No. Any edits made via inspector tools only temporarily render locally within your browser view. Refreshing reverts to the default external page content. Changes will not impact actual source files whatsoever.

Can other users see tweaks when inspecting websites?

Inspect Element edits cannot be viewed by other users browsing websites, even while signing into the same browser profile across multiple devices. Think of changes as exclusive to your machine only.

Are there other developer tools beyond Inspect Element?

Absolutely. As mentioned earlier, Console, Sources, Network, and other analysis tabs also prove invaluable during development. Plus, browser extensions extend DevTools capabilities even further.

Playing around with the Inspect Element feature peels back the curtain on how websites work. Letting you peek at the HTML, CSS, and JavaScript underneath any page you click can easily help you understand why something looks and feels the way it does.

So, as you surf around, keep that Inspect Element tool handy. Let curiosity guide you as you click around to see what makes things appear as they do. Who knows, you might just pick up new methods to help the web become an even more accessible and fun place!

Photo of Matt Stamp

About the Author : Matt Stamp

Matt is a DevOps Engineer at DreamHost. He is responsible for infrastructure automation, system monitoring and documentation. In his free time he enjoys 3D printing and camping. Follow Matt on LinkedIn: Lhttps://www.linkedin.com/in/matt-stamp-7a8b3a10a

Get Content Delivered Straight to Your Inbox

Subscribe to our blog and receive great content just like this delivered straight to your inbox.

How to Edit Webpages on Safari Using Inspect Element

Here's how you can tinker with text and images on a website through Safari's nifty Inspect Element developer tool.

With its Inspect Element tool, Safari lets you tinker with the front-end code of any webpage. If you want to test what a page would look like with different text or images, you can do so by altering its code with Inspect Element.

This is a simple guide aimed at beginners to explain how you can begin experimenting with Inspect Element in Safari to edit a website's text and images with minimal coding knowledge.

What Is Inspect Element?

Inspect Element is a developer tool. It's available on Safari, though also on other web browsers like Chrome, Firefox, and Edge. With Inspect Element, you can peek behind the curtain of a website to reveal its front-end code, like the HTML and CSS. However, it doesn't grant you visibility of the back-end, like its databases.

Not only can you see this code, but you can tweak it too. This means that you can change the appearance of a website. You can replace an image, rephrase some text, use a different font, switch its color scheme, and more. However, these edits are local. They won't appear to anyone else except you; they disappear once you refresh or move away from the page.

Why Should You Use Inspect Element?

Inspect Element is a great tool if you're a budding web developer. You can literally see the code that powers your favorite website, tweaking it as you wish in a real-world environment. There are many fun insights you can gain from using Inspect Element .

For example, business owners can look at keywords included in a competitor's website, or designers can use Inspect Element to identify a font that they find attractive or to quickly test a different color scheme on their website .

For now, we're going to focus on editing the basics of a webpage using Inspect Element.

How to Access Inspect Element on Safari

You can open Inspect Element on Safari using the developer menu:

  • Open Safari.
  • Click Safari in the top menu bar.
  • From the dropdown menu, select Preferences .
  • Select the Advanced option.
  • Check the box that says Show Develop menu in menu bar .

Safari advanced menu

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 .

How to Find Web Elements in Inspect Element

screenshot of inspect element showing element selection button

To begin editing an element, right-click what you wish to edit and click Inspect Element . This will open the developer window, with the relevant section highlighted. You might find that the particular element you wish to element (the image or the text, say) is hidden; to locate it, use the arrows on the left to expand the nested sections.

Screenshot showing highlighted element of webpage using inspect element.

To help narrow your selection down, click the target icon from the Inspect Element toolbar. Now, as you navigate through the code, it highlights that section on the website. Or you can use your cursor to pinpoint a section on the site. This is handy for when you want to hone in on something particular in a crowded area of a webpage.

How to Edit a Website's Text Using Inspect Element

To make a piece of text editable after finding it in a site’s source code, double-click it. You can type new text directly into the code, or delete existing text. When editing is complete for a given string of text, hit Enter , and the text on the webpage will change.

It's really as simple as that! The only times this won't work are when the text is actually part of an image, like a logo.

How to Edit a Website's Images Using Inspect Element

While images appear visually to you on the front-end, in the website code they appear as links. You can right-click and image and choose Inspect Element to jump to where that image is in the code. Website images typically have JPG, GIF, or PNG file extensions, though not exclusively.

website_image_code.jpeg

Double-click these image strings and you can edit them, or just save them to your system if desired. If you want to replace the image, switch it out for a replacement image URL. Or you can delete the code string entirely to remove the image from view.

Dig Into Websites Using Safari

Safari's Inspect Element tool lets you easily find and change the code corresponding to text and images, which is as easy as switching out a text or URL string. Once you're done editing a website with Inspect Element, simply refresh the page and everything will be back to normal.

How to use Safari Web Inspector on Mac, iPad, and iPhone

If you’re a web developer, then you likely already know about Safari’s Web Inspector. But if you’re just starting to use Safari for development or have just begun your Web Development career, this guide will show you the basics for getting started with the Safari Web Inspector on iOS and Mac.

Safari web inspector on Mac

What is the Safari Web Inspector?

For those not yet familiar with the tool, you can use the Safari Web Inspector for help with your web development. It allows you to review page elements, make changes, troubleshoot problems, and review page performance. Apple sums it up with:

Web Inspector is the primary web development tool in Safari. Web Inspector allows you to inspect, tweak, debug, and analyze the performance of your web content in a Safari tab.

Enable and open Safari Web Inspector

You can use the Safari Web Inspector for development on your iPhone, iPad, or Mac. Here’s how to enable and open it on iOS and macOS so you’re ready to use it when you need it.

If you’re going to use the Web Inspector frequently, whether for iOS or Mac, you might as well add the Develop tab to your menu bar so you can access it easily.

  • Open Safari on your computer and click Safari > Settings or Preferences from the menu bar.
  • Choose the Advanced tab.
  • Check the box at the bottom for “ Show features for web developers ” or Show Develop menu in menu bar .

Enable 'Show features for web developers' in Safari Advanced settings

Now when you want to enable the Web Inspector, click Develop > Show Web Inspector from your menu bar.

Show Web Inspector in Safari Develop menu

If you prefer to forgo adding the Develop button to your menu bar, you can access the Web Inspector on Mac with a shortcut. Navigate to the page you want to inspect, right-click on it, and pick Inspect Element from the context menu.

Inspect Element Shortcut in Safari on Mac

Just keep in mind that if you plan to use Web Inspector for Safari on your iOS device, you’ll need the Develop button in the menu bar on your Mac.

For iPhone and iPad

To use the Web Inspector for iOS on your Mac, grab your USB cable and connect your iPhone or iPad to your computer. Then, follow these steps to enable the tool:

  • Open the Settings app on your iPhone or iPad and tap Safari .
  • Scroll to the bottom and tap Advanced .
  • Enable the toggle for Web Inspector .

Enable Safari Web Inspector on iPhone

Next, make sure Safari is open on your iOS device and your Mac. After that, follow these steps:

1) Click Develop from the Safari menu bar on Mac, and you’ll see your iPhone or iPad listed here.

iPhone and iPad appearing in Safari Develop menu on Mac

2) Mouse over the device, and you’ll then see the websites open in Safari on your mobile device.

3) Select the one you want, and the Web Inspector will pop open in a new window for you to use.

Develop Menu for iPhone in Safari on Mac

Note: If this is the first time you’re using your iPhone or iPad for this work, take your mouse cursor over that iPhone or iPad and click Use for Development . Next, tap Trust on your iPhone or iPad and enter the device passcode. Now, this iOS or iPadOS device is ready to be used for web inspection. If it still shows a correction error, simply unplug the USB cable and plug it in again.

Use iPhone or iPad for Development from Safari Develop menu

Position the Safari Web Inspector

If you’re using the Web Inspector for iOS, it will remain in its own floating window.

If you’re using it for Safari on your Mac, you can change its position. By default, Web Inspector displays at the bottom of your Safari window. To detach it and place it in a separate window or dock it to the left or right side of Safari, select one of the buttons from the top left of the Inspector window.

Position the Safari Web Inspector on Mac

Get to know the Web Inspector

The Safari Web Inspector has a handy toolbar and tabs with some options that you can adjust to fit your needs.

Web Inspector toolbar

  • “X” to close the Inspector
  • Positioning buttons
  • Reload button
  • Download web archive button
  • Activity viewer (resource count, resource size, load time, logs, errors, warnings)
  • Element selector button

Web Inspector tabs

You can use all tabs or just a few. You can right-click or hold Control and click the tabs and then check and uncheck those you want to see. Rearrange the tabs by holding and dragging them to their new positions. And all the way to the right of the tabs bar, you’ll see a Settings button. This lets you adjust settings for tabs, indents, source maps, zoom, and more.

Right-click to manage Web Inspector tabs in Safari

  • Elements : Current state of the page’s Document Object Model
  • Network : Resources loaded by the current page
  • Debugger : View the JavaScript execution, variables, and control flow
  • Resources : Resources being used by the current page’s content
  • Timelines : A view of what the page’s content is doing
  • Storage : State that is available to the page’s content
  • Canvas : Contexts created from CSS
  • Console : Shows logged messages and lets you evaluate JavaScript code

For in-depth help on a specific tab, you can head to the Apple Developer Support site . Select Table of Contents > Get started in Safari Developer Tools > Web Inspector .

Safari Web Inspector Developer Site

Good luck with your inspection!

Hopefully, this guide will help you as you start working with the Safari Web Inspector for your iPhone, iPad, or Mac web development.

If you currently use the Web Inspector and have tips and tricks you’d like to share with others who are just starting, please feel free to comment below!

Check out next: How to view the source code of a webpage in Safari

What Is Web Inspector In Safari

Copy to Clipboard

  • Software & Applications
  • Browsers & Extensions

what-is-web-inspector-in-safari

Introduction

Web Inspector is a powerful tool that allows developers to delve into the inner workings of websites and web applications. It provides a comprehensive set of features for inspecting, debugging, and optimizing web content, making it an indispensable asset for web developers and designers. Whether you're a seasoned professional or just starting out in web development, understanding how to leverage Web Inspector can significantly enhance your workflow and productivity.

With Web Inspector, you can peek behind the curtain of a webpage to analyze its structure, styles, and scripts. This tool empowers you to identify and rectify issues, optimize performance, and gain valuable insights into the behavior of web elements. It's like having x-ray vision for the web, allowing you to see the underlying code, network activity, and performance metrics.

In this article, we'll explore the ins and outs of Web Inspector in Safari, shedding light on its features, functionalities, and practical applications. Whether you're a web development enthusiast, a curious explorer, or a seasoned professional seeking to expand your knowledge, this guide will equip you with the essential know-how to harness the full potential of Web Inspector. So, let's embark on this journey to unravel the mysteries of web development and discover the wonders of Web Inspector in Safari.

Overview of Web Inspector

Web Inspector is a robust and multifaceted tool integrated into the Safari web browser , designed to facilitate the inspection, debugging, and optimization of web content. It provides a comprehensive suite of features that empower developers to dissect and analyze the various components of a webpage, including its structure, styles, and scripts. With Web Inspector, users can gain deep insights into the inner workings of web elements, enabling them to identify issues, enhance performance, and refine the user experience.

At its core, Web Inspector serves as a window into the underlying code and resources that constitute a webpage. It offers a detailed view of the Document Object Model (DOM), allowing developers to visualize the hierarchical structure of HTML elements and their relationships. This feature is invaluable for understanding the composition of a webpage and diagnosing layout issues, as it provides a real-time representation of how the browser interprets the HTML document.

Furthermore, Web Inspector provides comprehensive support for inspecting and manipulating Cascading Style Sheets (CSS). Developers can effortlessly examine the styles applied to individual elements, diagnose layout inconsistencies, and experiment with live style changes to observe their immediate impact on the webpage's appearance. This capability streamlines the process of fine-tuning the visual presentation of web content, fostering a more efficient and iterative approach to front-end development.

In addition to its prowess in dissecting the structure and styles of webpages, Web Inspector offers robust debugging capabilities for JavaScript and other web technologies. Developers can set breakpoints, inspect variables, and trace the execution flow of scripts, empowering them to identify and rectify logic errors, performance bottlenecks, and unexpected behaviors within their web applications.

Moreover, Web Inspector provides comprehensive network analysis tools, allowing developers to monitor network requests, examine response data, and diagnose performance issues related to resource loading. This feature enables users to optimize the loading times of web content, identify potential bottlenecks, and ensure a seamless and responsive user experience.

In essence, Web Inspector serves as a Swiss army knife for web developers, offering a rich set of tools and functionalities to streamline the development and optimization of web content. Its comprehensive suite of features empowers developers to gain deep insights, diagnose issues, and optimize the performance of web applications, making it an indispensable companion in the realm of web development.

How to Access Web Inspector in Safari

Accessing Web Inspector in Safari is a straightforward process that grants developers direct access to the inner workings of web content. Whether you're keen on inspecting the structure of a webpage, analyzing its styles, debugging JavaScript, or monitoring network activity, Web Inspector provides a comprehensive toolkit for these tasks. To access Web Inspector in Safari, follow these simple steps:

Open Safari Browser : Launch the Safari web browser on your Mac or iOS device.

Navigate to the Webpage : Visit the webpage that you intend to inspect and analyze. This could be a live website, a locally hosted web application, or any web content accessible through Safari.

Access the Develop Menu : In the Safari menu bar, navigate to "Develop." If the Develop menu is not visible, you can enable it by going to Safari Preferences > Advanced and checking the "Show Develop menu in menu bar" option.

Select "Show Web Inspector" : Once the Develop menu is accessible, hover over the "Develop" option to reveal a dropdown menu. From the dropdown menu, select "Show Web Inspector." Alternatively, you can use the keyboard shortcut "Option + Command + I" to open Web Inspector swiftly.

Explore Web Inspector : Upon selecting "Show Web Inspector," the Web Inspector panel will appear, providing a comprehensive view of the webpage's structure, styles, scripts, and network activity. You can navigate through the various tabs and panels within Web Inspector to inspect and analyze different aspects of the webpage.

By following these steps, you can seamlessly access Web Inspector in Safari and unlock its powerful capabilities for web development and debugging. Whether you're a seasoned developer or a curious enthusiast, delving into the inner workings of web content through Web Inspector can provide valuable insights and facilitate the optimization of web applications and websites.

In summary, accessing Web Inspector in Safari is a fundamental step in leveraging its robust features for web development, debugging, and optimization. By mastering the art of accessing and utilizing Web Inspector, developers can gain a deeper understanding of web content and enhance their ability to create compelling and performant web experiences.

Features of Web Inspector

Web Inspector in Safari boasts a rich array of features that empower developers to dissect, analyze, and optimize web content with precision and efficiency. From inspecting the structure and styles of web elements to debugging JavaScript and monitoring network activity, Web Inspector offers a comprehensive toolkit for enhancing the development and performance of web applications and websites.

Document Object Model (DOM) Inspection

Web Inspector provides a detailed view of the Document Object Model (DOM), allowing developers to visualize the hierarchical structure of HTML elements and their relationships. This feature enables users to inspect, modify, and understand the composition of a webpage in real time, facilitating the diagnosis of layout issues and the manipulation of web elements with ease.

Cascading Style Sheets (CSS) Analysis

With Web Inspector, developers can delve into the styles applied to individual elements, diagnose layout inconsistencies, and experiment with live style changes to observe their immediate impact on the webpage's appearance. This capability streamlines the process of fine-tuning the visual presentation of web content, fostering a more efficient and iterative approach to front-end development.

JavaScript Debugging

Web Inspector offers robust debugging capabilities for JavaScript and other web technologies. Developers can set breakpoints, inspect variables, and trace the execution flow of scripts, empowering them to identify and rectify logic errors, performance bottlenecks, and unexpected behaviors within their web applications.

Network Analysis

Web Inspector provides comprehensive network analysis tools, allowing developers to monitor network requests, examine response data, and diagnose performance issues related to resource loading. This feature enables users to optimize the loading times of web content, identify potential bottlenecks, and ensure a seamless and responsive user experience.

Resource Inspection

Developers can inspect and analyze various resources loaded by a webpage, including images, scripts, stylesheets, and other assets. This feature provides valuable insights into resource loading times, sizes, and dependencies, enabling developers to optimize the performance and efficiency of web content.

Timeline Recording

Web Inspector offers a timeline recording feature that allows developers to capture and analyze the timeline of events, including JavaScript execution, rendering performance, and network activity. This capability is instrumental in identifying performance bottlenecks and optimizing the responsiveness of web applications.

Memory and Performance Analysis

Developers can leverage Web Inspector to analyze memory usage, performance profiles, and runtime behaviors of web applications. This feature facilitates the identification of memory leaks, performance optimizations, and overall improvements in the efficiency of web content.

In essence, the features of Web Inspector in Safari collectively form a comprehensive toolkit for web development, debugging, and optimization. By harnessing these capabilities, developers can gain deep insights, diagnose issues, and optimize the performance of web applications, making Web Inspector an indispensable asset in the realm of web development.

Using Web Inspector for Web Development

Web Inspector serves as an invaluable companion for web developers, offering a robust set of tools and functionalities to streamline the development, debugging, and optimization of web content. By leveraging the capabilities of Web Inspector, developers can gain deep insights, diagnose issues, and enhance the performance and user experience of web applications and websites.

Real-time Inspection and Debugging

One of the primary benefits of using Web Inspector for web development is the ability to inspect and manipulate web elements in real time. Developers can navigate through the Document Object Model (DOM) to understand the structure of a webpage, modify elements, and observe the immediate impact on the layout and presentation. This real-time inspection capability facilitates the diagnosis and resolution of layout issues, ensuring a seamless and visually appealing user experience.

Furthermore, Web Inspector empowers developers to debug JavaScript and other web technologies with precision. By setting breakpoints, inspecting variables, and tracing the execution flow of scripts, developers can identify and rectify logic errors, performance bottlenecks, and unexpected behaviors within their web applications. This debugging prowess is instrumental in ensuring the reliability and functionality of web content.

Optimizing Styles and Layout

Web Inspector provides comprehensive support for inspecting and manipulating Cascading Style Sheets (CSS), enabling developers to fine-tune the visual presentation of web content. By analyzing the styles applied to individual elements, diagnosing layout inconsistencies, and experimenting with live style changes, developers can refine the aesthetic appeal and responsiveness of web applications. This iterative approach to optimizing styles and layout fosters a more efficient and visually compelling web development process.

Performance Analysis and Optimization

Developers can harness the network analysis tools within Web Inspector to monitor network requests, examine response data, and diagnose performance issues related to resource loading. By optimizing the loading times of web content, identifying potential bottlenecks, and ensuring a seamless user experience, developers can elevate the performance and responsiveness of web applications. Additionally, the timeline recording and memory analysis features enable developers to identify performance bottlenecks, memory leaks, and runtime behaviors, facilitating the optimization of web applications for enhanced efficiency.

In essence, using Web Inspector for web development empowers developers to gain deep insights, diagnose issues, and optimize the performance and user experience of web applications and websites. By seamlessly integrating Web Inspector into the development workflow, developers can leverage its rich set of tools and functionalities to create compelling, performant, and visually appealing web experiences.

In conclusion, Web Inspector in Safari stands as a formidable ally for web developers, offering a comprehensive suite of features and functionalities to dissect, analyze, and optimize web content. From its prowess in inspecting the Document Object Model (DOM) to its robust debugging capabilities for JavaScript and network analysis tools, Web Inspector equips developers with the tools they need to elevate the quality and performance of web applications and websites.

By providing real-time insights into the structure, styles, and scripts of web elements, Web Inspector empowers developers to diagnose layout issues, optimize styles, and ensure a visually compelling user experience. The ability to manipulate and experiment with web elements in real time streamlines the development process, fostering an iterative approach to refining the presentation and functionality of web content.

Moreover, the debugging capabilities of Web Inspector enable developers to identify and rectify logic errors, performance bottlenecks, and unexpected behaviors within their web applications. This ensures the reliability and functionality of web content, contributing to a seamless and intuitive user experience.

Additionally, the network analysis tools and timeline recording features within Web Inspector facilitate the optimization of resource loading times, the identification of performance bottlenecks, and the enhancement of the responsiveness of web applications. By monitoring network requests, examining response data, and capturing the timeline of events, developers can fine-tune the performance and efficiency of web content, ensuring a seamless user experience across various devices and network conditions.

In essence, Web Inspector serves as a catalyst for innovation and excellence in web development, providing developers with the insights and tools they need to create compelling, performant, and visually appealing web experiences. Whether you're delving into the intricacies of web elements, debugging JavaScript, or optimizing network performance, Web Inspector empowers you to unlock the full potential of web content.

As the digital landscape continues to evolve, Web Inspector remains a steadfast companion for developers, offering a dynamic toolkit to navigate the complexities of web development and deliver exceptional user experiences. Embracing the capabilities of Web Inspector is not just a choice; it's a strategic advantage in the pursuit of crafting immersive and impactful web experiences for users around the globe.

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

Who Are The Best Midfielders In FIFA 22

How to change graphics fifa 22 pc, related post, how to hack in fifa 22, why does my fifa 22 keep crashing, which is better fifa 22 or 23, how to get infinite money in fifa 22 career mode, what does sporadic mean in fifa 22, related posts.

How To Inspect On Safari IPhone

How To Inspect On Safari IPhone

How To Debug In Safari

How To Debug In Safari

How To Inspect In Safari On IPad

How To Inspect In Safari On IPad

How To Use Inspect In Safari

How To Use Inspect In Safari

How To Hard Reload Safari

How To Hard Reload Safari

How To Post On Instagram From Mac Safari

How To Post On Instagram From Mac Safari

How To Mute A Tab In Safari

How To Mute A Tab In Safari

How To See Source Code In Safari

How To See Source Code In Safari

Recent stories.

Who Are The Best Midfielders In FIFA 22

406140541709582227

Why Does My FIFA 22 Keep Crashing

Fixing Storage Issues On Redmi Note 3

Freeing Up Space On Redmi: Deleting Files From Memory

Freeing Up Space On Redmi: Deleting Files From Memory

Choosing The Best: Oppo, Vivo, Or Redmi?

Choosing The Best: Oppo, Vivo, Or Redmi?

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.

Freelance iOS, macOS, Apple Watch, and Apple TV Developer

Web inspector on ios devices and simulators.

Want to keep up to date? Sign up to my free newsletter which will give you exclusive updates on all of my projects along with early access to future apps.

Over the past few weeks I’ve worked on a number of projects that have necessitated me working with HTML and JavaScript be that via Safari on iOS, an SFSafariViewController, or in an embedded WKWebView. In all of these cases, I’ve needed to dive into the DOM to see what styles are being applied to certain elements or dig into a JavaScript Console to work out why some code isn’t working. On desktop, this is trivial as Safari has a Web Inspector panel built in similar to other browsers. It turns out it is also trivial on mobile as the exact same tool can be used with both iOS simulators and physical devices.

safari browser code inspector

If you select the ‘Develop’ tab from the menu bar of Safari on macOS, you’ll see a list of all of your connected devices and actively running simulators 1 . Drilling into this will then show all of the active web instances you can interact with; notice how the content within Safari has highlighted blue within the Simulator as I’ve moused over the twitter.com web instance above. When you click, a web inspector panel is then produced which allows you to make all the usual interrogations and changes you can within desktop Safari such as interacting with the console or changing CSS values of elements to see how they would look in realtime.

Here’s an example using a WKWebView within one of my client projects, Yabla Spanish :

safari browser code inspector

Discovering that simulators and devices could be interacted with in this way has been a huge timesaver for me. Whilst developing Browser Note , I was constantly needing to tweak CSS values and investigate the current state of the DOM as websites have various tricks to try and make ads or cookie notices appear on top of all content (and the note needed to be on top at all times - you should totally take a look at Browser Note whilst you’re here). In doing this, I was then able to put this knowledge to use on no less than 3 client projects in the past month; this validates my theory that by working on your own side projects you can improve your efficiency when it comes to work projects.

There are a few caveats to be aware of when using the Web Inspector with an iOS device or simulator:

  • If you want to use this on an actual device you’ll first need to enable the Web Inspector on iOS. To do this, go to the Settings app and then Safari > Advanced and toggle the Web Inspector on.
  • Whilst the Web Inspector can interrogate WKWebView, it can only do this for apps you are running via Xcode. You cannot look at the WKWebView of apps you did not create nor of your own apps from TestFlight / the App Store. However, you can inspect debug builds installed via Xcode even if the debugger is not active (i.e. you build to the device then quit Xcode).
  • Conversely, you can use the Web Inspector with any SFSafariViewController even if it is not in your own app.
  • Whilst it is still possible to submit apps that use UIWebView, the web inspector will not work with them; it needs to be WKWebView .
  • This also works for AppKit, SwiftUI, and Catalyst apps on macOS.

I use an “iDod” naming prefix for all of my devices; a throwback pun to my first Apple product, the iPod.  ↩︎

IMAGES

  1. How to use Safari Web Inspector on Mac, iPad, and iPhone

    safari browser code inspector

  2. How to Use Web Inspector to Debug Mobile Safari (iPhone or iPad

    safari browser code inspector

  3. Getting started with the Safari Web Inspector on iOS and Mac

    safari browser code inspector

  4. How to use Safari Web Inspector on Mac, iPad, and iPhone

    safari browser code inspector

  5. How to Inspect Elements in Safari Mac Computer

    safari browser code inspector

  6. MacOS: Enable Web Inspector In Safari

    safari browser code inspector

VIDEO

  1. Safari Web Content quit unexpectedly

  2. New Look Safari Browser #shorts

  3. how to inspect element in safari on mac

  4. iOS SAFARI BROWSER FOR ANY ANDROID ❗ #ios #ytshorts #safari

  5. How To Clear Safari Browser Search History On iPhone ( safari browser ) 2024

  6. Safari Shortcuts in Mac

COMMENTS

  1. Web Inspector

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

  2. How to Inspect Element using Safari Browser

    Sorted by: 228. 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".

  3. Tools

    Web development tools. Apple has brought its expertise in development tools to the web. Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize websites for peak performance and compatibility on both platforms. And with Responsive Design Mode, you can preview your web pages in various screen sizes ...

  4. How to Activate the iPhone Debug Console or Web Inspector

    Activate Web Inspector on iOS: Go to Settings > Safari > Advanced and move the Web Inspector toggle switch to the On position. Use Web Inspector on macOS: Connect your iOS device to a Mac and choose the URL to inspect from the Develop menu. If you run into a bug or another issue with a website on Safari mobile, use the Web Inspector tool to ...

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

  6. Enabling Web Inspector

    Enabling Web Inspector. To start using Web Inspector, you must first enable the Develop menu. Enable the Develop Menu. Choose Safari > Preferences, and click Advanced. At the bottom of the pane, select the "Show Develop menu in menu bar" checkbox. Choose Develop > Show Web Inspector.

  7. 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. How to ...

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

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

  9. How to Inspect Element on Mac using Safari ?

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

  10. Complete Guide to Safari Developer Tools

    Enter a test URL, select the Safari browser, and choose VERSION, OS, and RESOLUTION. Then, click START. It will route you to the selected cloud-based real macOS machine. To open the Safari Developer Tools, right-click on Inspect and start debugging.

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

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

  12. MacOS: Enable Web Inspector In Safari

    Right-click > Inspect Element. To use the first one, head over to the Mac toolbar for the Safari browser and click the Develop menu. How to use Safari Web Inspector on macOS Monterey. In the context menu that pops up, click Show Web Inspector. The hotkey for this action is Option + Command + I.

  13. How to Use Web Inspector to Debug Mobile Safari (iPhone or iPad)

    Enable Web Inspector on iOS : Open the Settings app on your iPhone or iPad. Scroll down and tap Safari. Scroll to the bottom of the page and tap Advanced. Tap the toggle next to Web Inspector to the On position. Enable Safari Developer Mode on Mac : Open Safari on your Mac. Click Safari in the top left corner of your Menu Bar.

  14. Safari Developer Features

    Overview. Safari includes features and tools to help you inspect, debug, and test web content in Safari, in other apps, and on other devices including iPhone, iPad, Apple Vision Pro, as well as Apple TV for inspecting JavaScript and TVML. Features like Web Inspector in Safari on macOS let you inspect and experiment with the layout of your ...

  15. How to Edit Webpages on Safari Using Inspect Element

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

  16. How To Inspect On Safari iPhone

    Step 1: Open Safari on iPhone. To begin the process of inspecting a website on Safari for iPhone, the first step is to launch the Safari browser on your device. Locate the Safari icon on your home screen or within your app library, and tap to open the browser. As the familiar compass icon comes into view, you are greeted by the gateway to the ...

  17. How to use Safari Web Inspector on Mac, iPad, and iPhone

    Enable the toggle for Web Inspector. Next, make sure Safari is open on your iOS device and your Mac. After that, follow these steps: 1) Click Develop from the Safari menu bar on Mac, and you'll see your iPhone or iPad listed here. 2) Mouse over the device, and you'll then see the websites open in Safari on your mobile device.

  18. What Is Web Inspector In Safari

    Web Inspector is a robust and multifaceted tool integrated into the Safari web browser, designed to facilitate the inspection, debugging, and optimization of web content. It provides a comprehensive suite of features that empower developers to dissect and analyze the various components of a webpage, including its structure, styles, and scripts.

  19. Adding a web development tool to Safari Web Inspector

    To tell Safari to add your tool as a tab in Web Inspector, you must create the inspector tab in your extension using browser.devtools.panel.create (). Don't conditionally create the inspector tab after you check permissions; if you do, Safari won't add a tab for your tool. Let Safari handle permissions with its dialogs; then update your ...

  20. Web Inspector on iOS devices and Simulators

    There are a few caveats to be aware of when using the Web Inspector with an iOS device or simulator: If you want to use this on an actual device you'll first need to enable the Web Inspector on iOS. To do this, go to the Settings app and then Safari > Advanced and toggle the Web Inspector on. Whilst the Web Inspector can interrogate WKWebView ...

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

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

  22. About Safari Web Inspector

    Web Inspector shows you the structure of your DOM as perceived by Safari's rendering engine, WebKit. But the DOM isn't all you can inspect. External resources and locally stored data—such as scripts, stylesheets, and offline storage—can be inspected, providing insight to the data available to your web content.

  23. Inspecting iOS and iPadOS

    Enabling inspecting your device from a connected Mac. Before you can connect your device to a Mac to inspect it, you must allow the device to be inspected. Open the Settings app. Go to Safari. Scroll down to Advanced. Enable the Web Inspector toggle. Now, connect the device to your Mac using a cable. In Safari, the device will appear in the ...