• What to Know: Samsung Galaxy Ring
  • The Samsung Phone Launch

How to Activate the iPhone Debug Console or Web Inspector

Use Safari's web developer tools to study problematic websites

web inspector in safari

  • 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

  • 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
  • The Top 10 Internet Browsers for 2024
  • How to Clear Search History on iPhone
  • How to Disable JavaScript in Safari for iPhone
  • How to Use Web Browser Developer Tools
  • How to View HTML Source in Safari
  • How to Change Your Homepage in Safari
  • How to Clear Private Data, Caches, and Cookies on Mac
  • 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 Manage Cookies in the Safari Browser
  • 10 Hidden Features in macOS Sonoma

By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.

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

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!

web inspector in safari

Free Guide: 25 HTML & CSS Coding Hacks

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

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

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

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]

Wildcard SSL Certificates: What They Are & How They Work

Wildcard SSL Certificates: What They Are & How They Work

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

  • React Native

How to show Safari’s Develop menu and Web Inspector

( 7 Articles )

web inspector in safari

April 25, 2022

web inspector in safari

If you’re a web developer, then there might be cases where you want to debug and improve your website (or web app) on Safari (which takes approximately 19% of browser market share worldwide).

The steps below show you how to show Safari’s Develop menu and its web inspector tool.

1. Click on Safari on the top menu bar, then select Preferences…

web inspector in safari

2. Select the Advanced tab then check the checkbox labeled with “Show Develop menu in menu bar”:

web inspector in safari

3. Now the Develop menu appears. Open a website, click on Develop , and select Show Web Inspector (or Connect Web Inspector ) from the drop-down menu:

web inspector in safari

You can also use shortcuts: Command + Option + I .

Here’re Safari Dev Tools for web developers:

web inspector in safari

That’s it. Further reading:

  • How to Easily Upgrade Node.js in macOS
  • How to install Redis on macOS, Windows, and Ubuntu

Xcode: Change Derived Data and Archives directories

  • VS Code: Opening Multiple Windows/Projects Simultaneously
  • VS Code: Prevent Single-Child Folders from Being Merged

Happy coding and have a nice day!

guest

Related Articles

web inspector in safari

How to Flush DNS Cache in macOS Monterey, Big Sur, and Catalina

May 7, 2022

web inspector in safari

How to check your macOS version from Terminal

web inspector in safari

How to Download and Install an iOS Simulator in Xcode

web inspector in safari

How to check if Homebrew is installed on your Mac

April 20, 2022

web inspector in safari

How to completely uninstall Logitech Options on Mac

How To Use Inspect In Safari

Copy to Clipboard

  • Software & Applications
  • Browsers & Extensions

how-to-use-inspect-in-safari

Introduction

Safari, Apple's widely used web browser, offers a powerful tool known as the Inspector, which allows users to delve into the inner workings of web pages. Whether you're a web developer, designer, or simply a curious user, the Inspector can provide valuable insights into the structure, layout, and functionality of websites. By understanding how to use the Inspector effectively, you can gain a deeper understanding of web development and design, and even troubleshoot issues that may arise while browsing the web.

In this article, we will explore the various features of the Inspector in Safari, guiding you through its different tabs and demonstrating how each can be utilized to analyze and manipulate web content. From inspecting and modifying HTML elements to examining network activity and debugging JavaScript, the Inspector offers a wide array of tools to aid in understanding and enhancing the web browsing experience.

Whether you're looking to customize the appearance of a webpage, optimize its performance, or gain insights into its underlying code, the Inspector in Safari is a versatile and indispensable tool. By the end of this article, you will have a comprehensive understanding of how to leverage the Inspector to gain valuable insights into web development and design, empowering you to make the most of your browsing experience.

Opening the Inspector

To begin exploring the powerful capabilities of the Inspector in Safari, you first need to open it. There are several ways to access the Inspector, each providing quick and convenient access to its robust features.

Using the Menu Bar

One of the simplest methods to open the Inspector is through the Safari menu bar. By navigating to the "Develop" menu and selecting "Show Web Inspector," you can swiftly launch the Inspector, ready to delve into the inner workings of any webpage.

Keyboard Shortcuts

For those who prefer to streamline their workflow with keyboard shortcuts, Safari offers a quick and efficient way to open the Inspector. By pressing "Option + Command + I" on a Mac, or "Ctrl + Option + I" on a Windows PC , you can instantly access the Inspector, saving valuable time and effort.

Right-Click Context Menu

Another convenient way to open the Inspector is by right-clicking on any element within a webpage and selecting "Inspect Element" from the context menu. This method allows for immediate inspection of specific elements, making it ideal for targeted analysis and modification.

Using the Address Bar

Safari also provides a direct method to open the Inspector by entering a special command in the address bar. By typing "inspect" or "inspector://" followed by the Enter key, the Inspector will promptly appear, ready for exploration.

Docked Inspector

Once the Inspector is open, it can be docked to the bottom, right, or left of the browser window, providing a customizable layout that suits your preferences. This feature allows for seamless multitasking, as you can simultaneously view the Inspector and the webpage, making it easier to analyze and modify elements in real-time.

By familiarizing yourself with these various methods to open the Inspector, you can seamlessly integrate its powerful capabilities into your web browsing and development workflow. With the Inspector readily accessible, you are well-equipped to embark on a journey of exploration and discovery within the intricate world of web development and design.

Elements Tab

The Elements tab within the Inspector in Safari serves as a gateway to the underlying structure of a web page. Upon opening the Inspector and navigating to the Elements tab, you are presented with a visual representation of the Document Object Model (DOM) of the current webpage. This hierarchical view allows you to inspect and manipulate various elements, providing valuable insights into the composition and layout of the page.

Understanding the DOM Tree

At the core of the Elements tab lies the DOM tree, which organizes the HTML elements of the webpage in a nested structure. Each HTML element, such as headings, paragraphs, images, and more, is represented as a node within the tree. By expanding and collapsing nodes, you can navigate through the DOM tree to locate specific elements and understand their relationships to one another.

Inspecting Elements

The Inspector empowers you to inspect individual elements within the DOM, revealing a wealth of information about each element. By hovering over elements in the Inspector or on the webpage itself, you can visually highlight the corresponding elements, making it easier to identify and select specific components for further analysis.

Modifying Attributes and Styles

One of the most powerful features of the Elements tab is the ability to modify attributes and styles of HTML elements in real-time. By double-clicking on an element's attributes or styles, you can directly edit them within the Inspector, instantly observing the visual changes on the webpage. This dynamic editing capability is invaluable for experimenting with different design and layout modifications without altering the actual source code.

Event Listeners

In addition to visual and structural inspection, the Elements tab provides insights into event listeners attached to various elements. This feature is particularly useful for understanding the interactivity and functionality of a webpage, as it allows you to view and manage event listeners associated with specific elements.

Accessibility and Validation

Furthermore, the Inspector in Safari includes accessibility and validation tools within the Elements tab, enabling you to assess the accessibility of elements and validate the HTML structure for compliance with web standards. This functionality is essential for ensuring that web content is accessible to all users and adheres to best practices in web development.

By mastering the Elements tab in the Inspector, you gain the ability to dissect and manipulate the building blocks of web pages, fostering a deeper understanding of web development and design. Whether you're fine-tuning the layout, debugging issues, or optimizing accessibility, the Elements tab equips you with the tools to navigate the intricate web of HTML elements with confidence and precision.

The Styles tab, a pivotal component of the Inspector in Safari, serves as a gateway to the visual presentation and styling of a web page. Upon navigating to the Styles tab within the Inspector, you are greeted with a comprehensive overview of the CSS (Cascading Style Sheets) rules that define the appearance and layout of the current webpage. This powerful tool provides invaluable insights into the styling hierarchy, inheritance, and applied styles, empowering you to analyze, modify, and optimize the visual aspects of web content.

Comprehending the Style Rules

At the heart of the Styles tab lies a detailed display of CSS rules that dictate the appearance of elements on the webpage. Each rule encompasses selectors, properties, and values, collectively shaping the visual presentation of the content. By examining these rules, you can gain a profound understanding of how styles are applied and inherited throughout the DOM, unraveling the intricacies of the cascading nature of CSS.

Visualizing Box Model and Layout

The Styles tab offers a visual representation of the box model for selected elements, illustrating the dimensions, padding, borders, and margins that define the layout of each element. This feature provides a clear and intuitive depiction of the spatial attributes of elements, facilitating precise adjustments to the layout and spacing without the need to decipher complex CSS code.

Modifying Styles in Real-Time

One of the most compelling capabilities of the Styles tab is the ability to modify CSS styles directly within the Inspector, observing instantaneous visual updates on the webpage. By clicking on individual style properties, you can alter their values, experiment with different design variations, and witness the immediate impact on the layout and appearance of the content. This dynamic editing functionality empowers you to fine-tune the visual presentation of web pages with unparalleled efficiency and precision.

Understanding Computed Styles

In addition to the explicit CSS rules, the Styles tab provides insights into the computed styles of elements, revealing the final, computed values of all CSS properties. This feature is instrumental in understanding how styles are resolved and applied to elements, shedding light on the intricate process of style computation and inheritance within the DOM.

Optimizing Performance and Responsiveness

Furthermore, the Styles tab includes tools for analyzing and optimizing the performance and responsiveness of web content. By inspecting and managing styles related to layout and rendering, you can identify opportunities to enhance the speed and efficiency of webpage display, ensuring a seamless and responsive user experience across various devices and screen sizes.

By harnessing the capabilities of the Styles tab within the Inspector, you gain a profound understanding of the visual presentation and styling of web content. Whether you're refining the layout, optimizing performance, or experimenting with design variations, the Styles tab equips you with the tools to navigate the intricate realm of CSS with confidence and finesse.

Resources Tab

The Resources tab in Safari's Inspector serves as a comprehensive resource management tool, offering insights into various aspects of web content, including network activity, storage, and more. Upon navigating to the Resources tab within the Inspector, you gain access to a wealth of information that enables you to analyze, monitor , and optimize the resources utilized by web pages.

Resource Overview

The Resources tab provides a holistic overview of the resources loaded by the current webpage, encompassing a wide range of elements such as documents, stylesheets, scripts, images, fonts, and more. This comprehensive view allows you to understand the composition of resources that contribute to the rendering and functionality of the webpage, providing valuable insights into the underlying assets that shape the user experience.

Network Requests

One of the key features of the Resources tab is the network request log, which meticulously records all HTTP requests initiated by the webpage. This log includes details such as request and response headers, timing, and resource size, enabling you to assess the performance and efficiency of network requests. By analyzing the network activity, you can identify potential bottlenecks, optimize resource loading, and ensure swift and seamless delivery of content to users.

Storage and Caching

In addition to network activity, the Resources tab offers visibility into various forms of storage utilized by web pages, including cookies, local and session storage, and application caches. This feature allows you to monitor and manage the storage of data, ensuring compliance with privacy regulations and optimizing the utilization of storage resources for enhanced user experience.

Initiating and Analyzing XHR/Fetch Requests

The Resources tab facilitates the inspection and analysis of XMLHttpRequest (XHR) and Fetch requests made by web pages, providing detailed insights into the data exchanged between the client and server. By monitoring XHR and Fetch requests, you can troubleshoot data retrieval and transmission issues, validate response data, and ensure the seamless operation of dynamic web applications.

Performance Analysis

Furthermore, the Resources tab includes tools for performance analysis, enabling you to assess the loading times of individual resources, identify potential performance bottlenecks, and optimize the delivery of content for enhanced user experience. This functionality is instrumental in fine-tuning the performance of web pages, ensuring swift and efficient resource loading across diverse network conditions and devices.

By leveraging the capabilities of the Resources tab within the Inspector, you gain a comprehensive understanding of the resources utilized by web pages, empowering you to optimize network activity, storage, and performance for an unparalleled user experience. Whether you're analyzing network requests, managing storage, or fine-tuning performance, the Resources tab equips you with the tools to navigate the intricate realm of web resources with precision and efficiency.

Network Tab

The Network tab within Safari's Inspector is a vital tool for analyzing the network activity of web pages, providing valuable insights into the loading and transmission of resources. Upon navigating to the Network tab, you gain access to a comprehensive log of network requests initiated by the webpage, along with detailed information about each request and response.

Monitoring Network Activity

The Network tab meticulously records all network requests, including HTTP requests for documents, stylesheets, scripts, images, and other resources. Each request is accompanied by essential details such as request and response headers, timing, resource size, and the initiator responsible for the request. This comprehensive log allows you to monitor the sequence and performance of network requests, enabling you to identify potential bottlenecks and optimize resource loading.

Request and Response Details

By selecting individual network requests in the log, you can delve into the specifics of each request and response. This includes insights into request headers, response headers, status codes, and response content, providing a granular understanding of the data exchange between the client and server. Analyzing these details allows you to troubleshoot issues related to resource loading, validate response data, and ensure the efficient delivery of content to users.

Performance Analysis and Timing

The Network tab offers tools for performance analysis, allowing you to assess the loading times of individual resources and the overall timeline of network activity. By examining the timing of network requests, you can pinpoint potential performance bottlenecks, optimize resource loading, and ensure swift and efficient delivery of content. This functionality is instrumental in fine-tuning the performance of web pages, ensuring a seamless user experience across diverse network conditions.

Filtering and Sorting Capabilities

To streamline the analysis of network activity, the Network tab provides filtering and sorting capabilities, enabling you to focus on specific types of requests or isolate requests based on various criteria. This feature empowers you to efficiently identify and address issues related to resource loading, network latency, and content delivery, fostering a responsive and optimized web browsing experience.

Initiating XHR/Fetch Requests

In addition to monitoring network requests initiated by the webpage, the Network tab facilitates the inspection and analysis of XMLHttpRequest (XHR) and Fetch requests. This feature provides detailed insights into the data exchanged between the client and server, allowing for thorough validation of response data and troubleshooting of dynamic web application functionality.

By harnessing the capabilities of the Network tab within the Inspector, you gain a comprehensive understanding of the network activity of web pages, empowering you to optimize resource loading, troubleshoot performance issues, and ensure seamless content delivery. Whether you're analyzing network requests, fine-tuning performance, or validating response data, the Network tab equips you with the tools to navigate the intricate realm of network activity with precision and efficiency.

Console Tab

The Console tab within Safari's Inspector serves as a dynamic interface for interacting with the JavaScript console of web pages, offering a powerful set of tools for debugging, logging, and executing JavaScript code. Upon navigating to the Console tab, you gain access to a versatile environment that enables you to monitor runtime errors, log messages, inspect JavaScript objects, and execute ad-hoc scripts, providing invaluable insights into the behavior and functionality of web applications.

Error Logging and Debugging

One of the primary functions of the Console tab is to capture and display runtime errors and exceptions encountered by JavaScript code within the webpage. By monitoring the console output, you can swiftly identify and address errors, ensuring the smooth operation of web applications. Additionally, the console provides detailed stack traces and contextual information for each error, facilitating thorough debugging and troubleshooting of JavaScript code.

Logging Messages and Variables

The Console tab allows for the logging of custom messages, variables, and objects, providing a means to track the execution flow and state of JavaScript code. By utilizing the console.log() method, you can output informative messages and inspect the values of variables and objects at specific points in the code, enabling you to gain visibility into the internal workings of web applications and pinpoint potential issues.

Interactive JavaScript Execution

In addition to logging and debugging, the Console tab offers an interactive environment for executing JavaScript code directly within the Inspector. This feature allows you to experiment with JavaScript expressions, test functions, and manipulate objects in real-time, fostering a dynamic and exploratory approach to understanding and modifying the behavior of web applications.

Network Request Monitoring

Furthermore, the Console tab provides visibility into network requests and responses, allowing you to monitor the exchange of data between the client and server. By capturing network-related messages and errors, you can assess the performance and integrity of data transmission, troubleshoot connectivity issues, and validate the handling of network requests within web applications.

Performance Profiling

Moreover, the Console tab includes tools for performance profiling, enabling you to analyze the execution time and memory usage of JavaScript code. By leveraging the built-in profiling capabilities, you can identify performance bottlenecks, optimize code efficiency, and ensure the responsive and efficient operation of web applications.

By harnessing the capabilities of the Console tab within the Inspector, you gain a comprehensive understanding of JavaScript runtime behavior, empowering you to debug, log, and execute JavaScript code with precision and agility. Whether you're troubleshooting errors, monitoring network activity, or profiling performance, the Console tab equips you with the tools to navigate the intricate realm of JavaScript development with confidence and insight.

In conclusion, the Inspector in Safari is a multifaceted and indispensable tool that empowers users to delve into the inner workings of web pages, gaining valuable insights into web development and design. By exploring the various tabs of the Inspector, including Elements, Styles, Resources, Network, and Console, users can unravel the complexities of web content, optimize performance, troubleshoot issues, and gain a deeper understanding of the technologies that drive the modern web.

The Elements tab provides a window into the hierarchical structure of web pages, allowing users to inspect, manipulate, and validate HTML elements with precision. From understanding the Document Object Model (DOM) to modifying attributes and styles in real-time, the Elements tab equips users with the tools to dissect and fine-tune the building blocks of web content.

Moving on to the Styles tab, users can gain a comprehensive understanding of the visual presentation and styling of web pages. By analyzing CSS rules, visualizing the box model, and modifying styles on the fly, the Styles tab facilitates the optimization of layout, performance, and design, empowering users to craft visually compelling and responsive web experiences.

The Resources and Network tabs offer invaluable insights into the resources utilized by web pages and the network activity that drives content delivery. From monitoring network requests and performance analysis to managing storage and optimizing resource loading, these tabs provide the tools to ensure swift, efficient, and seamless delivery of web content to users across diverse network conditions and devices.

Finally, the Console tab serves as a dynamic interface for interacting with the JavaScript console, enabling users to log messages, debug errors, execute scripts, and profile performance. This feature-rich environment empowers users to troubleshoot JavaScript code, monitor network activity, and validate the behavior of web applications, fostering a deeper understanding of client-side development and interactivity.

In essence, the Inspector in Safari transcends its role as a mere debugging tool, evolving into a comprehensive suite of features that cater to the diverse needs of web developers, designers, and enthusiasts. By mastering the capabilities of the Inspector, users can navigate the intricate realm of web development and design with confidence, creativity, and precision, ultimately enhancing the quality and user experience of web content across the digital landscape.

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

When Did Halo 3 Come Out

When did first halo come out, related post, what year does halo 1 take place, what year did halo 2 come out, what was the last halo game, what order to play halo games in, what is the first halo game, related posts.

How To Download Videos On Browser

How To Download Videos On Browser

How To View Page Source On Tablet

How To View Page Source On Tablet

How To Download Video From Inspect Element

How To Download Video From Inspect Element

What Is Browser Console

What Is Browser Console

How To Get Your Discord Token

How To Get Your Discord Token

What Is A Browser?

What Is A Browser?

How To Download Videos From Jwplayer

How To Download Videos From Jwplayer

What Is Internet Browser

What Is Internet Browser

Recent stories.

When Did Halo 3 Come Out

Why Is Safari Taking Up So Much Storage

Why Does Safari Use So Much Battery

Why Does Safari Use So Much Battery

What Is A Tab In Safari

What Is A Tab In Safari

How To Use Grammarly On Safari

How To Use Grammarly On Safari

How To Remove Safari From Dock

How To Remove Safari From Dock

How To Turn On Autocorrect In Safari IPhone

How To Turn On Autocorrect In Safari IPhone

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.

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

4 Easy Ways to Inspect Element on an iPhone

Last Updated: August 8, 2023 Fact Checked

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

This article was co-authored by wikiHow staff writer, Nicole Levine, MFA . Nicole Levine is a Technology Writer and Editor for wikiHow. She has more than 20 years of experience creating technical documentation and leading support teams at major web hosting and software companies. Nicole also holds an MFA in Creative Writing from Portland State University and teaches composition, fiction-writing, and zine-making at various institutions. This article has been fact-checked, ensuring the accuracy of any cited facts and confirming the authority of its sources. This article has been viewed 29,306 times. Learn more...

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

Things You Should Know

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

Using Safari Developer Tools

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

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

Step 2 Enable Web Inspector on your iPhone.

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

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

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

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

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

Using the Web Inspector Extension

Step 1 Install Web Inspector from the App Store.

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

Step 2 Enable the Web Inspector extension in Safari.

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

Step 3 Go to the webpage you want to inspect.

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

Step 5 Tap

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

Using a JavaScript Bookmark

Inspect Element on iPhone Step 12

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

Step 2  Create a...

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

Step 3 Edit the bookmark to replace the URL.

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

Step 5 Replace the bookmark contents with code.

Using the Edit Webpage Shortcut

Step 1 Open the Shortcuts app on your iPhone.

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

Step 2 Tap Gallery.

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

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

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

Expert Q&A

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

web inspector in safari

You Might Also Like

Open BIN Files

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

About This Article

Nicole Levine, MFA

  • Send fan mail to authors

Is this article up to date?

Am I a Narcissist or an Empath Quiz

Featured Articles

Cut Your Own Long Hair

Trending Articles

200+ First Grade Sight Words for Young Readers

Watch Articles

How to Get Air Moving in a Closed or Stuffy Room

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

wikiHow Tech Help Pro:

Level up your tech skills and stay ahead of the curve

GeekChamp

How to Enable and Use Safari Web Inspector on iPhone in iOS 17

If you are a developer or a website manager, we are sure you know the importance of inspecting websites to analyze website issues or debug web pages. On iOS, Safari used to have a built-in Debug Console for inspecting web page issues. However, since iOS 6, Safari on iPhones has been relying on the Web Inspector tool to show to debug and analyze websites.

So, if you are looking for a way to enable the Web Inspector tool on iOS or iPadOS and use it to debug websites on your Mac, we have prepared this simple guide for you. In this article, we are going to provide step-by-step ways to enable and use the Web Inspector tool on your iOS and macOS devices. This way you will be able to easily track down issues in iOS and iPadOS websites on your macOS devices.

Enable and Use Safari Web Inspector on iPhone

Now, below we have provided the ways to enable the Web Inspector tool for Safari on iOS and macOS devices. Hence, you must already know by now that the Web Inspector tool for Safari will work only if you have a Mac or a MacBook with which you can connect your iOS device.

With the method provided here, you will be able to use the Web Inspector tool to analyze all the resources of web pages, debug, and fix underlying issues of the pages. This method can also be used with the iOS Simulator, which comes free with XCode from the Mac App Store, to view and scale web pages for different screen sizes.

Enable Web Inspector on iPhone

Before you can view the websites from the iOS Safari on your Mac using Web Inspector, you will need to enable the tool on your iOS device. You can do that using the steps right below.

1. Open the Settings app on your iPhoned.

2. Go to Safari .

Web inspector on iOS ss 2

3. Scroll down to the bottom and tap the Advanced button.

Web inspector on iOS ss 1

4. On the Advanced settings page, enable the toggle for Web Inspector .

word inspector on ios ss collage

This is all you have to do to enable the Web Inspector tool on iOS. With this advanced setting enabled on your iPhone, you will be able to view and edit the websites opened on your iOS Safari right inside the Safari browser on your Mac.

However, before that, you will need to tweak a few settings in Safari on your Mac. Read on to find out how you can use the Web Inspector tool in Safari on your Mac.

Use Web Inspector for iOS Safari on Mac

Now, to use the Web Inspector tool for iOS/ iPadOS Safari on Mac, you need to connect your iPhone or iPad with the tool enabled to your Mac via a USB connection. Once both devices are connected, follow the steps below:

1. Open the Safari browser on your Mac.

2. Click the Safari option on the top navigation bar and select the Preferences option from the menu.

3. Now, go to the Advanced tab and check the box for the “Show Develop menu in menu bar” option.

Web inspector macos ss 1

4. Exit the Settings window and you will see the new Develop menu on your Safari menu bar at the top.

5. Click the Develop option and you will see your iPhone or iPad listed.

6. Move your cursor on your device and you will see the websites opened on your iOS or iPadOS Safari appear on the drop-down list.

Web inspector macos ss 2

7. From here, you can click the website that you want to open in the Web Inspector console on your Mac for optimization and debugging.

So, this way, you can easily enable and use the Web Inspector tool for Safari on your iPhone or iPad and analyze websites on your Mac. The Web Inspector is especially useful if you are a macOS developer who also develops or manages iOS websites. With this, you can easily view the web pages from iPhones or iPads on your Mac and tinker with them to improve their quality and fix other issues.

How can I enable Web Inspector on my iPad?

The process of enabling the Web Inspector tool on iPhones and iPads is pretty much the same. Hence, you can use the method provided in this article to easily enable Web Inspector in Safari on your iPad and your iPhone.

Can I inspect web pages on my iPhone or iPad?

Although you can enable the Web Inspector tool in Safari on your iPhone or iPad, you will require a macOS device and a USB-Lightning cable to actually use the tool for inspecting web pages.

How can I bring up the Web Inspector console on Mac?

After enabling the Develop menu in the menu bar in Safari on your Mac (steps provided above), you can click the Develop option in Safari and select your connected iPhone or iPad to view the web pages. From here, you can click a web page and the Web Inspector console will open up the resources.

Final Words

So, this was all about enabling and using the Web Inspector tool in Safari on iPhones and iPads. It is a great tool for website developers to prototype, optimize, and debug web content on iOS, iPadOS, and macOS devices. And if this guide added value to your work or helped you in any way, do let us know in the comments below.

' src=

Dwaipayan Sengupta

After graduating with a Bachelor's in Business Administration, Dwaipayan has worked for reputable media firms such as Beebom and Pinkvilla. He has written over 1500 articles in his 3+ years of writing career and specializes in How-tos about Windows issues and features, flash news, and custom mechanical keyboards. When he is not writing or customizing mechanical keyboards, you can find him playing an intense Valorant match or browsing through his Reddit feed.

You may also like

How to Enable and Use Stolen Device Protection on iPhone copy

How to Enable and Use Stolen Device Protection on iPhone

Delete One Image from Instagram Carousel Post

How to Delete One Photo From Instagram Carousel Posts and Stories

Fix AirPods not working in Windows 11

How to Fix AirPods Not Working on Windows 11

How to Fix Amazon Music App Not Working on Windows 11

How to Fix Amazon Music App Not Working on Windows 11

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.

web inspector in safari

Using Safari Web Inspector

The Safari Web Inspector is an open source web development tool built into Safari that makes it easy to proof your content on OS X. The Web Inspector can be enabled within Apple Books on OS X 10.9 (or later). During book development, using this tool allows you to more easily modify, debug, and optimize your book.

To enable the inspector from the Terminal, execute:

defaults write com.apple.iBooksX WebKitDeveloperExtras -bool YES

In the EPUB, select any text and right-click (Control-click on Mac) and choose Show Inspector from the shortcut menu.

Note that this will only work on DRM-free books.

WebKit Features in Safari 17.3

Jan 22, 2024

by Jen Simmons

Last month, Safari 17.2 brought our biggest December release of web technology ever — with 39 new features and 169 bug fixes . Now, in January, Safari 17.3 brings bits of polish to that release.

  • Fixed nested @supports queries with declarations. (113652033)
  • Fixed the caret color on iOS following an explicitly-set CSS color attribute. (118401826)
  • Fixed cookies not always working as expected with Samesite=Lax . (119362503)
  • Fixed an issue causing sign in to fail on Delta.com. (120431796)
  • Fixed to not loop if current time or duration is zero. (118902468)
  • Fixed in-band captions wrapping unnecessarily. (119138261)
  • Fixed unauthenticated cross-site Fetch requests to not use the global HSTS cache. (119047103)

Web Animations

  • Fixed: Prevent scheduling for an effect targeting an element with display: none . (119191813)

Updating to Safari 17.3

Safari 17.3 is available for iOS 17 , iPadOS 17 , macOS Sonoma , macOS Ventura and macOS Monterey.

If you are running macOS Ventura or macOS Monterey, you can update Safari by itself by going to Software Update, and clicking “More info”. On macOS Ventura, that’s  > System Settings > General > Software Update > More info.

To get the latest version of Safari on your iPhone or iPad, go to Settings > General > Software Update, and tap to update.

We love hearing from you. To share your thoughts on Safari 17.3, find us on Mastodon at @[email protected] and @[email protected] . Or send a reply on X to @webkit . If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technologies or Web Inspector. Filing issues really does make a difference.

Download the latest Safari Technology Preview to stay at the forefront of the web platform and to use the latest Web Inspector features.

You can also find this information in the Safari 17.3 release notes .

Web Inspector 4+

Developer console for safari, and a dinosaur.

  • #38 in Developer Tools
  • 4.3 • 84 Ratings

Screenshots

Description.

### Please refresh the page if you tap the "i" button and nothing happens ### Web Inspector expands Mobile Safari with a set of web development tools: DOM: View, inspect, edit, and search the elements that make up the DOM of a webpage. Elements: See the details about the webpage’s nodes and styles. Console: Type JavaScript commands in the console to debug, modify, and get information about your webpage. You can also see logs, errors, and warnings emitted from a webpage. Network: See a detailed list of network requests and responses made from a webpage. Resource: Find details about the data stored by a webpage such as cookies, local storage, and session storage.

Version 1.2.4

- Turn off Inspect mode after selecting an element because it confuses people.

Ratings and Reviews

It's so close to being exceptional.

This really is impressive. It's extremely intuitive, very appealing to look at, and integrates directly with safari. It feels very reminiscent of Chrome DevTools, so you feel right at home using it. Now, the things that are missing are quite noteworthy. There's no way to edit CSS without editing the html and applying inline styles. You also cannot see all the possible styles that are inherited from the classes applied to the element. Only the computed styles. That's a pretty big deal. Furthermore, I haven't found a way to resize the panel as its much too large. I saw somewhere the dev saying you could tap and hold and drag it down, but I haven't been able to figure it out and neither have some other people, so that could be a little bit more intuitive. It also is a little buggy where the nav bar of the panel doesn't always show up. Have to close safari completely and reopen it to fix that. Frankly, the CSS and resize things are the most important. With those two things fixed, this app would be worth $$$ and I could see this being worth every penny. Safari is always a pain to debug without a mac and this helps you inspect what a lot of your clients are probably seeing. First person I've seen use safari extensions for this and it's about time.

Exactly what I wanted

In the past 10 or so years I have been using IOS apps I have probably only left 4 or 5 reviews because most of the time I do not feel strongly enough about the performance of a product that I feel it is worth the effort. This app is an exception. I was just looking for a way to use networking tools, similar to the likes of which you would find in chrome, while on mobile. Not only did it let me get the information I needed with no hassle/troubleshooting but I see that it has a whole suite of tools you can use with a simple, yet effective and intuitive UI. Although I have seen other complaints about not being able to edit CSS, I think those complaints are somewhat irrelevant because I can’t imagine being in a situation where you would ever want to edit css on a mobile device instead of using an emulator/vm on your primary system. I also see other complaints about not being able to access images although from my experience it seems as though that is not the fault of this extension and is instead the fault of the user, because I have had no errors or trouble doing that on my end. Good job devs behind this, this is a perfect example of how safari extensions on IOS should be executed <3

Can’t edit CSS

It’s fine for as far as it goes. Editing HTML is nice. But not being able to edit the CSS is kind of a dealbreaker, because that is what’s most important for me. You can see the CSS fine, like on the desktop Inspector, but you can’t edit the values or add/remove declarations. Also, there doesn’t seem to be any way to minimize or dismiss the panel to see whatever changes you made or to screenshot the changes. You have to tap an Apply button to apply the HTML changes you make. Seems like that should be automatic, like the desktop experience. It’s got potential though, if those could be fixed.

App Privacy

The developer, And a Dinosaur , indicated that the app’s privacy practices may include handling of data as described below. For more information, see the developer’s privacy policy .

Data Not Collected

The developer does not collect any data from this app.

Privacy practices may vary, for example, based on the features you use or your age. Learn More

Information

  • Developer Website
  • App Support
  • Privacy Policy

Featured In

More by this developer.

Vinegar - Tube Cleaner

Baking Soda - Tube Cleaner

Sideways - Rotate Webpages

AMP Shockwave

Makeover - Custom CSS

History Book - Browse & Search

You Might Also Like

Debug Anywhere

DevTools Extension

Userscripts

Working Copy - Git client

Blink Shell, Build & Code

About the security content of Safari 17.3

This document describes the security content of Safari 17.3.

About Apple security updates

For our customers' protection, Apple doesn't disclose, discuss, or confirm security issues until an investigation has occurred and patches or releases are available. Recent releases are listed on the  Apple security releases page.

Apple security documents reference vulnerabilities by  CVE-ID  when possible.

For more information about security, see the  Apple Product Security  page.

web inspector in safari

Safari 17.3

Released January 22, 2024

Available for: macOS Monterey and macOS Ventura

Impact: A user's private browsing activity may be visible in Settings

Description: A privacy issue was addressed with improved handling of user preferences.

CVE-2024-23211: Mark Bowers

Impact: A maliciously crafted webpage may be able to fingerprint the user

Description: An access issue was addressed with improved access restrictions.

WebKit Bugzilla: 262699 CVE-2024-23206: an anonymous researcher

Impact: Processing web content may lead to arbitrary code execution

Description: The issue was addressed with improved memory handling.

WebKit Bugzilla: 266619 CVE-2024-23213: Wangtaiyu of Zhongfu info

Impact: Processing maliciously crafted web content may lead to arbitrary code execution. Apple is aware of a report that this issue may have been exploited.

Description: A type confusion issue was addressed with improved checks.

WebKit Bugzilla: 267134 CVE-2024-23222

Information about products not manufactured by Apple, or independent websites not controlled or tested by Apple, is provided without recommendation or endorsement. Apple assumes no responsibility with regard to the selection, performance, or use of third-party websites or products. Apple makes no representations regarding third-party website accuracy or reliability. Contact the vendor for additional information.

Start a discussion in Apple Support Communities

IMAGES

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

    web inspector in safari

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

    web inspector in safari

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

    web inspector in safari

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

    web inspector in safari

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

    web inspector in safari

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

    web inspector in safari

VIDEO

  1. Sublime Web Inspector Screencast

  2. MIHTool

  3. Using the Safari 4 Web Inspector

  4. Kiara Web Inspection for FIBC

  5. New Look Safari Browser #shorts

  6. Inspector Avinash Web series Part .1💔💔💔🌹🌹🌹🌹🌹🌹🌹💔

COMMENTS

  1. Tools

    Web Inspector is your command center, giving you quick and easy access to the richest set of development tools ever included in a web browser. It helps you inspect all of the resources and activity on a web page, making development more efficient across Apple platforms.

  2. How to Inspect Element using Safari Browser

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

  4. Web Inspector

    An unknown error occurred. Use Web Inspector to inspect and debug your HTML, CSS, and JavaScript.

  5. Enabling Web Inspector

    Revision History Very helpful Somewhat helpful Not helpful Fix typos or links Fix incorrect information Add or update code samples Add or update illustrations Add information about... This new document explores the many features and capabilities of Web Inspector in a step-by-step tutorial.

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

    Web Inspector allows web and mobile app developers to use macOS and OS X Safari Developer Tools to remotely debug web content or hybrid apps in mobile Safari on iPad or iPhone. It's an easy and practical way to debug, optimize and modify your web pages or hybrid apps on iOS.

  7. Enabling Web Inspector

    Show Web Inspector (or pressing ⌥ ⌘ I) in the Develop menu or by right-clicking on any page in Safari (or Safari Technology Preview) and selecting Inspect Element. Once Web Inspector is enabled, the name of the current the macOS machine will appear as a submenu in the Develop menu of Safari (or Safari Technology Preview ), allowing for ...

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

    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.

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

  10. How to show Safari's Develop menu and Web Inspector

    The steps below show you how to show Safari's Develop menu and its web inspector tool. 1. Click on Safari on the top menu bar, then select Preferences…. 2. Select the Advanced tab then check the checkbox labeled with "Show Develop menu in menu bar": 3. Now the Develop menu appears.

  11. MacOS: Enable Web Inspector In Safari

    What Is Safari Web Inspector? Learn what is Safari Web Inspector (Photo: Courtesy of Apple) Web Inspector is a part of the bundle of development tools that Apple offers to website and app developers around the world. The tool is available for both macOS and iOS devices.

  12. WebKit Features in Safari 16.0

    Web Inspector. Following last year's addition of Grid Inspector, Safari 16.0 adds Flexbox Inspector. It pairs perfectly with the addition of Alignment Editor in Safari 15.4. Overlays for Flexbox containers make it easier to visualize the effects your CSS. Safari's Flexbox Inspector visually distinguishes between excess free space and Flex gaps.

  13. About Safari Web Inspector

    About Safari Web Inspector Safari Web Inspector Guide Table of Contents Introduction Get Oriented Resources and the DOM Timelines Debugger The Console Appendix A: The Develop Menu Appendix B: Keyboard Shortcuts Revision History Describes the developer tool built into Safari that helps you prototype, optimize, and debug web content.

  14. How to use the Web Inspector on Safari for iOS

    Open System Preferences. Go to Apple ID (take note of the ID that is in use). Select iCloud in the column on the left, and make sure Safari is enabled in the pane on the right. Open Safari. Click Safari in the menu bar and select Preferences. On Safari's preferences, go to the Advanced tab. Enable the 'Show Develop menu in menu bar'.

  15. How To Use Inspect In Safari

    With the Inspector readily accessible, you are well-equipped to embark on a journey of exploration and discovery within the intricate world of web development and design. Elements Tab. The Elements tab within the Inspector in Safari serves as a gateway to the underlying structure of a web page.

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

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

  17. How to Enable and Use Safari Web Inspector on iPhone in iOS 17

    1. Open the Settings app on your iPhoned. 2. Go to Safari. 3. Scroll down to the bottom and tap the Advanced button. 4. On the Advanced settings page, enable the toggle for Web Inspector. This is all you have to do to enable the Web Inspector tool on iOS.

  18. Using Safari Web Inspector

    The Safari Web Inspector is an open source web development tool built into Safari that makes it easy to proof your content on OS X. The Web Inspector can be enabled within Apple Books on OS X 10.9 (or later). During book development, using this tool allows you to more easily modify, debug, and optimize your book. In the EPUB, select any text ...

  19. Safari Developer Features

    Features like Web Inspector in Safari on macOS let you inspect and experiment with the layout of your webpage, including trying changes to styles, visualizing grid and flex contain layouts, adjusting typography, including custom variation axes, and emulating user preferences like color scheme or reduced motion to help ensure your content looks g...

  20. web inspector

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

  21. WebKit Features in Safari 17.3

    We love hearing from you. To share your thoughts on Safari 17.3, find us on Mastodon at @[email protected] and @[email protected]. Or send a reply on X to @webkit. If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technologies or Web Inspector. Filing issues really does make ...

  22. Adding a web development tool to Safari Web Inspector

    Safari provides Web Inspector, a set of tools that web developers use to inspect and debug their webpages. These built-in development tools are useful for analyzing basic issues in HTML, CSS, and JavaScript. In Safari 16 or later, you can create a custom web development tool that can inspect and interact with a webpage in a target window.

  23. ‎Web Inspector on the App Store

    Web Inspector expands Mobile Safari with a set of web development tools: DOM: View, inspect, edit, and search the elements that make up the DOM of a webpage. Elements: See the details about the webpage's nodes and styles. Console: Type JavaScript commands in the console to debug, modify, and get information about your webpage.

  24. About the security content of Safari 17.3

    WebKit. Available for: macOS Monterey and macOS Ventura. Impact: Processing maliciously crafted web content may lead to arbitrary code execution. Apple is aware of a report that this issue may have been exploited. Description: A type confusion issue was addressed with improved checks. WebKit Bugzilla: 267134. CVE-2024-23222.

  25. Inspecting iOS and iPadOS

    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 Develop menu. Important You may need to trust the Mac you connect your device to when the device prompts you before it appears in the Develop menu on your Mac.