ipad safari inspector

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.

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 .

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

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.

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 .

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.

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

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.

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.

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.

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

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 Copilot In Word
• Traveling? Get These Gadgets!

How to Activate the iPhone Debug Console or Web Inspector

Use Safari's web developer tools to study problematic websites

• 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
• 4 Ways to Play Fortnite on iPhone
• How to Activate and Use Responsive Design Mode in Safari
• How to Inspect an Element on a Mac
• What Is Safari?
• How to Clear Search History on iPhone
• How to Use Web Browser Developer Tools
• How to Disable JavaScript in Safari for iPhone
• 10 Hidden Features in macOS Sonoma
• How to Manage History and Browsing Data on iPhone
• How to View HTML Source in Safari
• How to Manage Cookies in the Safari Browser
• 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 Manage Your Browsing History in Safari

How To Inspect In Safari On IPad

• Software & Applications
• Browsers & Extensions

Introduction

Safari Inspector is a powerful tool that allows you to inspect, debug, and modify webpages directly from your iPad. Whether you're a web developer, designer, or simply curious about how websites are built, Safari Inspector provides a window into the inner workings of the web.

With the increasing use of iPads for web browsing and content creation, having the ability to inspect and modify webpages directly on the device is invaluable. Safari Inspector empowers users to delve into the structure and behavior of web content, making it an essential tool for anyone involved in web development or design.

In this article, we will explore the ins and outs of using Safari Inspector on iPad. From opening the Inspector to utilizing its powerful tools for inspecting and modifying elements, we will guide you through the process of harnessing the full potential of this feature. Whether you're a seasoned developer or a novice enthusiast, understanding how to leverage Safari Inspector on iPad can enhance your web experience and deepen your understanding of web technologies.

So, grab your iPad, launch Safari, and let's embark on a journey to uncover the hidden layers of the web with Safari Inspector.

Opening Safari Inspector on iPad

To begin our exploration of Safari Inspector on iPad, let's first uncover how to open this powerful tool. Safari Inspector is seamlessly integrated into the Safari browser , allowing users to access it with just a few taps. Here's how to open Safari Inspector on your iPad:

Launch Safari : Start by opening the Safari browser on your iPad. Safari Inspector is a built-in feature, so there's no need to download or install anything extra.

Navigate to the Webpage : Once Safari is open, navigate to the webpage you want to inspect. Whether it's a personal blog, a news site, or an e-commerce platform, Safari Inspector allows you to peek behind the curtain of any webpage.

Access the Inspector : With the webpage loaded, tap the address bar at the top of the Safari browser. Next, select the "Share" icon, which resembles a square with an arrow pointing upwards. This action will reveal a menu of options.

Select "Inspect" : From the menu, scroll to the right until you see the "Inspect" option. Tap on "Inspect," and voila! Safari Inspector will open, presenting you with a wealth of tools and information to delve into the webpage's structure and functionality.

By following these simple steps, you can easily open Safari Inspector on your iPad and begin your journey into the world of web development and design. The ability to inspect and modify webpages directly on your iPad empowers you to gain a deeper understanding of how websites are built and how they function. Now that we've opened Safari Inspector, let's dive into the array of tools and features it offers for inspecting and modifying elements on a webpage.

Using Safari Inspector Tools

Safari Inspector equips you with a robust set of tools designed to facilitate the inspection, debugging, and modification of web content directly from your iPad. Let's delve into the diverse array of tools at your disposal and explore how each one empowers you to gain insights into the inner workings of webpages.

Elements Tab

The Elements tab serves as your window into the structure of the webpage. It presents a hierarchical view of the HTML elements that compose the page, allowing you to inspect and manipulate individual elements. By tapping on specific elements within the Elements tab, you can view and modify their attributes, styles, and content, providing a comprehensive understanding of the webpage's structure.

Console Tab

The Console tab is a powerful tool for debugging JavaScript, logging messages, and executing JavaScript commands directly within the context of the webpage. It enables you to identify errors, test scripts, and interact with the webpage's functionality in real time. The Console tab serves as a valuable resource for diagnosing and resolving issues related to JavaScript execution and behavior.

Sources Tab

The Sources tab provides access to the underlying sources of the webpage, including HTML, CSS, and JavaScript files. It allows you to inspect, debug, and modify these sources, providing a comprehensive view of the webpage's codebase. With the ability to set breakpoints, step through code, and analyze network activity, the Sources tab empowers you to gain deep insights into the inner workings of the webpage's code.

Network Tab

The Network tab offers visibility into the network activity associated with the webpage, including requests, responses, and loading times for various resources. It enables you to analyze network performance, identify potential bottlenecks, and optimize the loading speed of the webpage. By examining network requests and responses, you can gain a comprehensive understanding of the webpage's resource utilization and enhance its overall performance.

Application Tab

The Application tab provides access to various aspects of the webpage's application functionality, including local storage, session storage, cookies, and cache data. It allows you to inspect and modify these application resources, providing insights into how the webpage manages and stores data locally. The Application tab is instrumental in understanding and manipulating the application-specific aspects of the webpage.

By leveraging these powerful tools within Safari Inspector, you can gain a comprehensive understanding of the structure, behavior, and performance of webpages directly from your iPad. Whether you're debugging JavaScript, optimizing network performance, or inspecting the underlying codebase, Safari Inspector equips you with the tools needed to unravel the intricacies of web development and design.

Inspecting Elements on a Webpage

Inspecting elements on a webpage is a fundamental aspect of web development and design, and Safari Inspector on iPad provides a seamless and intuitive interface for this essential task. By delving into the Elements tab within Safari Inspector, you gain the ability to explore the underlying structure of a webpage, inspect individual elements, and modify their attributes and styles. This process not only facilitates debugging and troubleshooting but also offers valuable insights into the composition and layout of web content.

Upon accessing the Elements tab, you are presented with a hierarchical view of the HTML elements that constitute the webpage. Each element, such as headings, paragraphs, images, and buttons, is displayed within a structured tree, reflecting its position and relationships within the document object model (DOM). By tapping on specific elements within this tree, you can inspect a wealth of information, including the element's attributes, styles, dimensions, and content.

Inspecting individual elements unveils a treasure trove of details that empower you to understand how the webpage is constructed. You can view and modify attributes such as IDs, classes, data attributes, and event listeners, providing the flexibility to manipulate the behavior and appearance of elements. Additionally, the Styles pane within the Elements tab allows you to explore the CSS styles applied to each element, including properties such as color, font size, margins, and positioning. This insight into the styling of elements enables you to diagnose layout issues, experiment with design modifications, and ensure visual consistency across the webpage.

Furthermore, Safari Inspector facilitates the inspection of the box model, which illustrates the dimensions and spacing of elements within the layout. By examining the content, padding, borders, and margins of elements, you can gain a comprehensive understanding of their spatial relationships and fine-tune the visual presentation of the webpage.

In essence, inspecting elements on a webpage using Safari Inspector empowers you to unravel the intricacies of web content, from its structural composition to its visual styling. Whether you're troubleshooting layout inconsistencies, experimenting with design variations, or gaining insights into the underlying HTML and CSS, Safari Inspector provides a user-friendly and powerful platform for inspecting and modifying elements directly from your iPad. This capability not only enhances your proficiency in web development and design but also fosters a deeper appreciation for the craftsmanship behind every webpage you encounter.

Modifying and Debugging CSS and JavaScript

Modifying and debugging CSS and JavaScript directly from your iPad is a game-changer, and Safari Inspector empowers you to seamlessly delve into the styles and scripts that shape the visual and interactive aspects of webpages. By leveraging the powerful tools within Safari Inspector, you can not only inspect but also modify and debug CSS and JavaScript, providing a comprehensive platform for refining the visual presentation and functionality of web content.

Modifying CSS

The Styles pane within the Elements tab of Safari Inspector allows you to directly modify CSS styles applied to individual elements. By tapping on specific style properties, such as color, font size, margins, or positioning, you can experiment with real-time modifications and witness their immediate impact on the webpage's appearance. This dynamic approach to modifying CSS empowers you to fine-tune the visual presentation, troubleshoot layout issues, and iterate on design variations directly from your iPad.

Debugging JavaScript

The Console tab within Safari Inspector serves as a robust environment for debugging JavaScript directly within the context of the webpage. By logging messages, executing JavaScript commands, and identifying errors, you can gain insights into the behavior and execution of JavaScript scripts. Additionally, the ability to set breakpoints, step through code, and inspect variables provides a comprehensive toolkit for diagnosing and resolving JavaScript-related issues. Whether you're troubleshooting interactive features, testing script functionality, or analyzing runtime behavior, Safari Inspector equips you with the tools needed to debug JavaScript with precision and efficiency.

Real-time Experimentation

One of the most compelling aspects of modifying and debugging CSS and JavaScript within Safari Inspector is the real-time nature of the process. As you make adjustments to CSS styles or diagnose JavaScript behavior, the changes are immediately reflected on the webpage, allowing you to experiment, iterate, and refine with unparalleled immediacy. This real-time experimentation fosters a dynamic and iterative approach to web development and design, enabling you to fine-tune the visual and interactive aspects of web content with agility and precision.

In essence, Safari Inspector on iPad provides a comprehensive platform for modifying and debugging CSS and JavaScript, empowering you to refine the visual presentation and interactive behavior of webpages directly from your device. Whether you're fine-tuning styles, diagnosing script errors, or experimenting with design enhancements, Safari Inspector offers a seamless and powerful environment for shaping the digital experiences that define the web.

In conclusion, Safari Inspector on iPad serves as a gateway to the inner workings of the web, offering a wealth of tools and features that empower users to inspect, debug, and modify web content with precision and agility. By seamlessly integrating into the Safari browser, Safari Inspector provides a user-friendly and intuitive platform for delving into the structure, behavior, and performance of webpages directly from the iPad.

The ability to open Safari Inspector with just a few taps, navigate through the Elements, Console, Sources, Network, and Application tabs, and leverage the diverse array of tools within each tab underscores the accessibility and power of this feature. Whether you're a seasoned web developer, a budding designer, or simply curious about the mechanics of the web, Safari Inspector offers a window into the craftsmanship and complexity that underpin every webpage.

Inspecting elements on a webpage using Safari Inspector unveils the hierarchical structure of HTML elements, the intricacies of CSS styling, and the spatial relationships defined by the box model. This process not only facilitates troubleshooting and debugging but also fosters a deeper understanding of how web content is constructed and presented.

Furthermore, the ability to modify and debug CSS and JavaScript directly from the iPad elevates the Safari Inspector experience to a dynamic and iterative endeavor. Real-time experimentation with CSS styles and JavaScript behavior empowers users to refine the visual presentation and interactive features of web content with unparalleled immediacy and precision.

In essence, Safari Inspector on iPad transcends the traditional boundaries of web development and design, bringing the power of inspection, debugging, and modification to the fingertips of users. Whether you're refining the layout of a personal blog, diagnosing JavaScript errors on an e-commerce platform, or optimizing the performance of a news site, Safari Inspector equips you with the tools and insights needed to unravel the intricacies of web content.

As the landscape of web technologies continues to evolve, Safari Inspector remains a steadfast companion for those seeking to gain a deeper understanding of the web. By embracing the capabilities of Safari Inspector on iPad, users can embark on a journey of exploration, experimentation, and refinement, shaping the digital experiences that define the modern web.

In the ever-evolving ecosystem of web development and design, Safari Inspector stands as a testament to the power of accessibility, innovation, and empowerment, offering a glimpse into the boundless possibilities that await those who dare to inspect, modify, and create on the canvas of the web.

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

• Fintechs and Traditional Banks Navigating the Future of Financial Services
• AI Writing How Its Changing the Way We Create Content

Related Post

How to find the best midjourney alternative in 2024: a guide to ai anime generators, unleashing young geniuses: how lingokids makes learning a blast, 10 best ai math solvers for instant homework solutions, 10 best ai homework helper tools to get instant homework help, 10 best ai humanizers to humanize ai text with ease, sla network: benefits, advantages, satisfaction of both parties to the contract, related posts.

How To Open Developer Tools In Safari

How To Hard Reload Safari

How To View Page Source On Tablet

Where Is My Safari App

Why Does My IPad Keep Shutting Down Safari

How Do You Update Safari On IPad

How To Clear Safari Cache On IPad

How To Exit Safari On IPad

Recent stories.

Fintechs and Traditional Banks: Navigating the Future of Financial Services

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

How to Know When it’s the Right Time to Buy Bitcoin

How to Sell Counter-Strike 2 Skins Instantly? A Comprehensive Guide

10 Proven Ways For Online Gamers To Avoid Cyber Attacks And Scams

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

How to debug mobile websites on iOS devices with Inspect

Inspect allows you to debug Safari on iOS devices from macOS, Linux, and Windows

Here are the simple steps to follow whether you're testing or debugging an iOS Safari web page or app with Inspect:

• Connect your iOS device to your PC via USB cable or Wi-Fi . You can use any device with a macOS, Linux, or Windows operating system.
• Start Inspect and follow the instructions on how to setup your computer.
• You are good to go!

Happy Inspecting!

How to Use Web Inspector to Debug iOS device

Prerequisites:.

• Please note that a Mac computer is required for this process as Safari's Web Developer is only compatible with Macs
• Make sure Safari on your Mac is the same version as Safari on your iDevice. You may need to update your iOS version or your version of Safari running on your Mac.

Use Web Inspector to debug mobile Safari

• On your iPad, iPhone or iPod touch, tap  Settings | Safari | Advanced  and toggle on  Web Inspector.  And enable JavaScript if it isn’t already enabled.
• On your Mac, launch Safari and go to  Safari menu | Preferences | Advanced  then check 'Show Develop menu in menu bar' if not already enabled.
• Connect your iOS device to your Mac with the USB cable. This is critical, you must connect the devices manually, using a cable. This does not work via WiFi.
• On your iOS device, open the website that you want to debug. Then, on your Mac, open Safari and go to the 'Develop' menu. You should now see your iOS device that is connected to your Mac. (Note: If you do not have any page open on your iDevice, you see a message saying “No Inspectable Applications.”)
• Now debug the page that is open on your mobile Safari using the same methods you would for debugging on Mac.
• Within the developer tools window, navigate to the 'Network' tab and export the .har file if requested.
• https://support.apple.com/guide/safari-developer/welcome/mac
• https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/
• https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html 

Cookie Consent Manager

General information, required cookies, functional cookies, advertising cookies.

We use three kinds of cookies on our websites: required, functional, and advertising. You can choose whether functional and advertising cookies apply. Click on the different cookie categories to find out more about each category and to change the default settings. Privacy Statement

Required cookies are necessary for basic website functionality. Some examples include: session cookies needed to transmit the website, authentication cookies, and security cookies.

Functional cookies enhance functions, performance, and services on the website. Some examples include: cookies used to analyze site traffic, cookies used for market research, and cookies used to display advertising that is not directed to a particular individual.

Advertising cookies track activity across websites in order to understand a viewer’s interests, and direct them specific marketing. Some examples include: cookies used for remarketing, or interest-based advertising.

Cookie List

How to use Inspect Element on iPhone , iPad

Inspect Element is a handy tool in the web developer’s arsenal to test and debug application behavior in various web browsers. Nearly all desktop-based web browsers, like Chrome, Safari, Edge, Firefox, and others, have a web/element inspector utility built into them, known usually as Developer Tools, or Dev Tools in short. Some users also prefer to call it the Web Inspector.

But when it comes to the iPhone or iPad, the Dev Tools utility is not available natively within mobile browsers like Safari or Chrome. And though the desktop utility has the option to mimic different screen sizes and user agents, including mobile devices, sometimes developers might prefer to inspect an element that is actually rendered on the device.

Well, there are a few workarounds that allow you to use the Dev Tools utility to inspect an element directly from the iPhone and iPad. In this article, we’ll explore a few of them.

Copy   How to use Web Inspector on iPhone, iPad with a computer (Mac)

You can use Safari Dev Tools available on Mac to inspect an element on iPhone or iPad, by plugging in your iPhone or iPad to your Mac. Once the iPhone or iPad is plugged in and authorized to connect to your Mac, the Safari Developer Tools on Mac will be able to inspect the web elements rendered in Safari on your iPhone or iPad.

Note: This method only works for iOS, iPadOS devices connected to Safari on a Mac. If you have a Windows or Linux PC, no Developer Tools (from any browser) would be able to inspect elements from the iPhone or iPad.

The below steps will guide you to use the Safari Web Inspector on your Mac to inspect an element in Safari on the iPhone or iPad.

Step #1: Enable Web Inspector in Safari on iPhone, iPad

• Connect your iPhone or iPad to a Mac via USB.
• Tap on “Trust this computer” when prompted on the iPhone or iPad.
• If you’re using the latest version of iOS (or iPadOS), you may need to enable the Web Inspector in Safari. To do so, open the Settings app on your iPhone or iPad, and go to Safari .
• Scroll down to the bottom and tap on Advanced .
• Turn on the toggle for Web Inspector .

Step #2: Enable the Develop menu in Safari on Mac

• On your Mac, open the Safari web browser.
• Go to the Safari menu from the top-left corner, and click on Preferences…
• Click on the Advanced tab.
• Select the checkbox labeled Show Develop menu in the menu bar .

The Develop menu should now be enabled in the Safari menu bar.

Step #3: Use Web Inspector with iPhone, iPad

• With the iPhone or iPad still connected to your Mac, open a webpage that you want to inspect in Safari on your iPhone or iPad. Ensure the device stays unlocked.
• On your Mac, go to the Safari Develop menu, and hover over iPhone or iPad’s device name.
• You should be able to see a list of inspectable applications, including the individual web pages open in Safari. Select the web page that you want to inspect.

The Safari Web Inspector on Mac will now show the details of the webpage from your iPhone or iPad. You can use it just as you would use it for any website opened in Safari on Mac.

Copy   How to use Web Inspector on iOS, iPadOS without a computer (Mac)

If you wish to inspect an element on an iPhone or iPad without a computer, you can do so now on iOS 15, with the help of third-party Safari Extensions.

Here, we’ll be using an extension called Web Inspector. But you may also try other similar extensions available from the App Store. The below steps will guide you to enable and use the Web Inspector extension on the iPhone or iPad.

• Download and install Web Inspector from the App Store, on your iPhone or iPad.
• Open the Settings app, and go to Safari >> Extensions .
• Tap on Web Inspector .
• Turn on the Web Inspector toggle to enable it.
• Go to Safari , and visit a web page that you’d like to inspect.
• Tap on the Double-A icon from the left side of the Safari Address bar.
• Tap on Web Inspector from the menu.
• You may get a pop-up asking you to allow Web Inspector to access the website data. Tap on Allow for One Day or Always Allow… depending on your preference.

The Web Inspector will now open a familiar developer console in the bottom part of the screen. Although it’s not the full-featured Developer Tools found in the desktop version, it does contain the essential elements, such as DOM, Elements, Console, Network, and Resources.

To close the Web Inspector, simply tap on the Double-A icon from the left of the Safari Address bar, and tap on Web Inspector again from the menu. Alternatively, you may also refresh the page to close the inspector.

Note: You may enable or disable extensions directly from Safari by tapping on the Double-A icon from the left side of the Safari Address bar, and then tapping on Manage Extensions. Here, you can turn on or turn off any and all the Safari extensions installed from the App Store.

This is how you can use the native or third-party web inspector tool to inspect an element in Safari on the iPhone or iPad. If you’re interested to know how to inspect an element on Android, check out our dedicated article.

How to Inspect Element on iPhone or iPad

Often, when attempting to save a small image, it will degrade in clarity and sharpness. Using inspect element to save an image will preserve its original size and clarity even if it looks very small on the website. This is a really cool feature, so don’t be scared to check out something a bit more advanced!

Related: How to Get a Refund on the App Store

How to Use Inspect Element on iPhone

How to save an image with safari on iphone using inspect element.

In order to use the developer tools and enable this option on your iPhone, you will need to have a Mac computer and a cable that will connect your phone to your computer. For more cool tips and tricks about how to use your Apple devices, be sure to sign up for our Tip of the Day . Let’s get started!

• Once you’ve gotten to this step, you will need to connect your phone to your Mac with a cable.

To save an image using Inspect Element

And that’s how you do it! Be sure to save the images under a name you'll remember. Developer tools and inspect element are quite advanced tools, but this information could prove very useful in the future. It’s also super cool to see the way that these devices connect and work with each other and how we may be able to take advantage of Apple’s integrated devices.

Author Details

Rachel Needell

Featured Products

Most Popular

How to Tell If Someone Blocked Your Number on iPhone

iPhone Alarm Volume Low? How to Make an iPhone Alarm Louder

10 Simple Tips To Fix iPhone Battery Drain

How to Schedule a Text Message on iPhone

How to Tell If a Dead iPhone Is Charging

How To Put Two Pictures Together on iPhone

How to Get Automatic Birthday Reminders on iPhone

How to Hide an App on Your iPhone

How to Transfer Call from Apple Watch to iPhone

How To Turn Off Flashlight on iPhone (Without Swiping Up!)

Can iPhones Get Viruses? How to Detect & Remove Malware (iOS 17)

Find Out Which App Is Using Your Camera or Microphone

Featured articles, why is my iphone battery draining so fast 13 easy fixes.

Identify Mystery Numbers: How to Find No Caller ID on iPhone

Apple ID Not Active? Here’s the Fix!

How to Cast Apple TV to Chromecast for Easy Viewing

Fix Photos Not Uploading to iCloud Once & for All (iOS 17)

There Was an Error Connecting to the Apple ID Server: Fixed

CarPlay Not Working? 4 Ways to Fix Apple CarPlay Today

Check out our sponsors.

• Each email reveals new things you can do with your phone (and other devices) with easy-to-follow screenshots.
• Enter your email to get your first tip immediately!

Web Inspector 4+

Developer console for safari, and a dinosaur.

• #33 in Developer Tools
• 4.2 • 92 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

Rewinder - Time Travel the Web

You Might Also Like

Debug Anywhere

DevTools Extension

Userscripts

Working Copy - Git client

Spliteb for Safari

• a. Send us an email
• b. Anonymous form
• Buyer's Guide
• Upcoming Products
• Tips / Contact Us
• Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

Apple Releases Safari Technology Preview 193 With Bug Fixes and Performance Improvements

Apple today released a new update for Safari Technology Preview , the experimental browser Apple first introduced in March 2016. Apple designed the ‌Safari Technology Preview‌ to test features that may be introduced into future release versions of Safari.

The current ‌Safari Technology Preview‌ release is compatible with machines running macOS Ventura and macOS Sonoma , the latest version of macOS that Apple released in September 2023.

The ‌Safari Technology Preview‌ update is available through the Software Update mechanism in System Preferences or System Settings to anyone who has downloaded the browser . Full release notes for the update are available on the Safari Technology Preview website .

Apple's aim with ‌Safari Technology Preview‌ is to gather feedback from developers and users on its browser development process. ‌Safari Technology Preview‌ can run side-by-side with the existing Safari browser and while designed for developers, it does not require a developer account to download.

Get weekly top MacRumors stories in your inbox.

Popular Stories

Apple Announces 'Let Loose' Event on May 7 Amid Rumors of New iPads

Apple Cuts Vision Pro Shipments as Demand Falls 'Sharply Beyond Expectations'

iOS 17.5 Will Add These New Features to Your iPhone

Apple Finally Plans to Release a Calculator App for iPad Later This Year

Apple Reportedly Stops Production of FineWoven Accessories

Next article.

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

App Store changes for the EU, new emoji, Podcasts transcripts, and more.

Get the most out your iPhone 15 with our complete guide to all the new features.

A deep dive into new features in macOS Sonoma, big and small.

Revamped models with OLED displays, M3 chip, and redesigned Magic Keyboard accessory.

Updated 10.9-inch model and new 12.9-inch model, M2 chip expected.

Apple's annual Worldwide Developers Conference will kick off with a keynote on June 10.

Expected to see new AI-focused features and more. Preview coming at WWDC in June with public release in September.

Other Stories

7 hours ago by Joe Rossignol

2 days ago by Tim Hardwick

Pop up window in Safari "select an edition"

Annoying the pop up window for select an edition you can't not select or close the window. Did somebody found the way to remove it? thank you

iPhone 12 Pro Max, iOS 17

Posted on Apr 16, 2024 10:45 PM

Posted on Apr 17, 2024 2:25 PM

Has anyone figured out how to remove this annoying "select an edition" pop-up window. Its driving me insane!

Similar questions

• how to block "screensaver.app" pop-up in Safari 12.1.1 Yesterday and today, each time Safari 12.1.1 is opened, an annoying pop-up jumps to the centre of the screen: “ScreenSaver.app“ wants access to control “Safari.app“. Allowing control will provide access to documents and data in “Safari.app“, and to perform actions within that app. Clicking the "Don't Allow" button closes the window momentarily then it reappears. I don't want to click the "OK" button. Unless this can be remedied, I'll close Safari permanently and choose another default browser. 3478 3
• "Customize Toolbar" How do I turn off "customize toolbar" when using Safari? That pop-up pops up ALL THE TIME and has to be clicked over and over to turn off. Any hints? 358 1
• Safari issue with a "pop up" Why does the following "pop up" frequently when I am using Safari? “5008235715115937309” wants access to control “Safari”. Allowing control will provide access to documents and data in “Safari”, and to perform actions within that app. I have always clicked "Don't Allow" except once when I accidentally clicked "OK". How can I stop the pop up from reoccurring? Thanks Derek 574 1

Loading page content

Page content loaded

Apr 17, 2024 2:25 PM in response to Arizonian

Apr 17, 2024 4:38 PM in response to 4PPATTY

I can select another English version and the window disappears but I don't want Canadian or other English versions. It's very annoying.

Apr 17, 2024 12:47 PM in response to Arizonian

It appears to be connected to yahoo only; all other pages - on my end- are clear of it.

Apr 19, 2024 6:17 AM in response to Arizonian

How do I get rid of pop up window in yahoo called select an edition

Apr 17, 2024 2:31 PM in response to Nabiscolady

Has anyone figured out how to get rid of this screen? It is only on YAHOO-and when using SAFARI. I do not see it on FIREFOX,

Apr 18, 2024 2:01 PM in response to Arizonian

What's the answer?

Apr 21, 2024 3:43 PM in response to Arizonian

I contacted Yahoo yesterday and they would take the information and get them working on the problem. It took three people to get that from them.

Apr 18, 2024 2:11 PM in response to Arizonian

Same thing started happening to me also. running yahoo.com with safari. can't get rid of it!!! all other pages are ok.

Apr 21, 2024 3:49 PM in response to Kodiak1964

How yo delete pop up window in Yahoo "select an edition"

Apr 19, 2024 6:40 PM in response to Arizonian

You can select a different language and then go on but next time you open a window the " Select an edition" pop up comes back. I guess Yahoo does not want us around anymore or they would not make us do this.

Apr 18, 2024 12:27 PM in response to dbsisco

I am having the very same problem in Safari with my office computer running Mojave,

however Chrome and Firefox do not have that problem.

Apr 21, 2024 7:17 AM in response to Arizonian

The popup select an edition will not let me select US

Apr 23, 2024 8:27 AM in response to Arizonian

I updated Safari to 17.4.1 with OS 14.4.1 and the pop up finally disappeared!!

Apr 19, 2024 9:19 AM in response to Arizonian

I am having the same problem.

Apr 19, 2024 6:42 PM in response to -Bubba-

This does not work or help.