safari inspect iphone simulator

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

Web inspector on ios devices and simulators.

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

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

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

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

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

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

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

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

• Get One: Tornado Alert Apps
• The Best Tech Gifts Under $100

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

Debug iOS Safari with Xcode Simulator and Web Inspector

• Published: 15 Jun 2020

Uses: Xcode simulator

How I debug CSS for iOS Safari on my MacBook Pro.

If you're like me and don’t have an iOS device, you can use Xcode Simulator to view and debug mobile Safari from your Mac.

Why would you need to simulate mobile Safari? Phones in general don't even have web inspectors for debugging. Have you ever had a CSS quirk on an iPhone and no iPhone to test with? I have.

As a lifelong Android user and web designer by trade, I regularly need to preview, test, or fix things for iOS Safari. Thankfully my MacBook has a way to simulate iOS devices so that I can preview and debug mobile Safari! Likewise, it can simulate older and newer iOS versions if needed.

The following steps may vary for newer and older versions of macOS, Xcode, and Safari. This guide uses:

• MacBook Pro (Retina, 15-inch, Mid 2015)
• macOS Mojave version 10.14.6
• Xcode version 11.3.1
• Safari version 13.1.1

Step 1: Open Xcode and Launch Simulator

From your Applications, launch Xcode. (Optionally, update Xcode if it yells at you when you try to open it.)

Once Xcode opens, navigate to Open Developer Tool > Simulator from the Mac toolbar.

If you’re a Spotlight user (which I am not), just search for Simulator and bypass launching Xcode altogether.

Step 2: Adjust the Simulator

A simulated device should pop up on your screen and begin loading. From the Mac toolbar, you can adjust the simulator via Hardware > Devices and select the OS and Device. You can pick from various iPhones and iPads in the iOS dropdown.

If you need something different, select Manage Devices for a suite of additional options:

Under Devices, add a device connected through USB.

Under Simulators, add a new simulator by selecting a device and iOS version (or install an additional iOS version runtime).

You can choose to use the simulation at the actual device size (instead of your screen's full height). Assign it via the Mac toolbar under Window to Physical Size.

Step 3: Simulate iOS Safari

In the Simulator, open up mobile Safari. Navigate to the appropriate page you’d like to interact with via Safari Web Inspector.

On your Mac, open up Safari. In the Mac toolbar under Develop , select the Simulator option beneath your device’s name. Pick the iOS Safari tab loaded in the Simulator. Web Inspector will launch to start debugging mobile Safari!

Step 4: Use Web Inspector to Debug Mobile Safari

Now you can go about your business and hopefully resolve whatever brought you down this rabbit hole to begin with. Debug mobile Safari just like you normally would for desktop Safari.

Additional Resources

Need more help?

• Visit Apple's Simulator Help
• Visit Apple's Safari Developer Help

Other guides that may be helpful:

• Debugging Your iPhone Mobile Web App With Safari Dev Tools by Matthew Croak on Medium [Premium Article]
• How to Use Web Inspector to Debug Mobile Safari (iPhone or iPad) by SK on Apple Toolbox

Simulator Bonuses

In the Simulator, from the Mac toolbar under File you can take a New Screen Shot , or use CMD+S.

For a how-to on more features and functionality offered in the Simulator, browse the Help section. I kind of want a Force Touch track pad now...

• Written by Melanie E Magdalena

Tags: # debugging

Thanks for reading! If this helped or you learned something, Buy Me A Coffee.

May 28, 2020 Grant Isom

Using Safari to Inspect Web Views in iOS Simulators & Devices

This week I wanted to talk about how to use Safari’s Developer Tools with Simulators or iOS devices in Safari or in your application’s web views. This is something that can be extremely helpful when working in web applications or in apps that have a mixture of web and native content as do ours at Cerner.

Enabling Safari Debugging If you are on a real device you will need to enable the Web Inspector first. Open Settings, then open Safari, scroll to the bottom and open Advanced. You should see an option for Web Inspector, enable this and you will see your phone as an option in the Develop menu item.

If you are using a simulator, there is no setup after enabling the Develop mode in Safari.

Enabling the Develop Menu Item In Safari you will need to enable the Develop menu item before you can see any other available devices for inspection. Open Preferences ⌘ + , and open the Advanced section. At the bottom, check the box next to “Show Develop menu in menu bar”. Now you should see the Develop menu item and can chose web views or browser tabs to inspect on real devices or simulators!

You are now all set! You can interact with the web inspector just like you can in Desktop Safari. The only caveat is that this will not work for apps that are from TestFlight or the App Store, so debug mode only. Hope this helps and happy coding!

How To Inspect Elements in Safari on iPhone and Mac

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

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

How To Inspect Elements on The Safari Browser

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up for more like this.

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

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

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

Things You Should Know

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

Using Safari Developer Tools

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

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

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

• 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

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

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

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

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

Using a JavaScript Bookmark

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

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

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

Using the Edit Webpage Shortcut

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

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

• 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

You Might Also Like

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

• Send fan mail to authors

Is this article up to date?

Featured Articles

Trending Articles

Watch Articles

• 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