ios safari devtools

• 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, Inspect , Done.

Inspect helps you debug the mobile web on ios and android by giving you an all-in-one developer tool for macos, windows, and linux..

Join the best

You are in good hands.

Engineers from these companies are already happy (Inspect)ors, more productive and saving time.

Why Inspect?

Debug the web on ios devices.

Inspect enables to you debug Safari and WebViews on your iOS device.

Debug the web on Android

Inspect enables you to debug Chrome and WebViews on your Android device.

No new hardware needed

No new hardware needed. Inspect is provides a software-only solution that works across platforms.

UI from Chrome DevTools

Inspect is built on Chrome DevTools, so you feel right at home from day one.

Inspect over Wifi (on MacOS)

Inspect supports debugging of iOS devices over WIFI on macOS. It's time to let go of the cables.

Works on macOS, Linux and Windows

Inspect and debug your web apps and websites on iOS and Android from macOS, Windows and Linux.

Debugging iOS Safari

How do I debug Safari on iOS?

These are my general steps, starting with not even using iOS Safari.

1. Is this just a small-screen problem?

Lemme just use the device mode in Chrome quick.

Note that this does a smidge more than just display your site in a smaller area: it sends the correct User Agent String and Client Hints for that device.

2. Does it seem actually specific to Safari? Lemme check Desktop Safari first since that’s just a few clicks away.

Now you’re actually using Safari, which is way closer to iOS Safari than desktop Chrome is.

3. Problem not showing here? Then the problem is actually unique to iOS Safari. Try emulation.

I happen to have a Mac, so I can have XCode installed and thus have an iOS simulator that is pretty easy to pop open. And if you can run the iOS simulator, that means you can run desktop Safari as well, and thus even have access to DevTools that can reach into the simulator.

4. I’ve seen real-device-only bugs. Sometimes you need a real device.

If you have a Mac, doing this is pretty similar to what we just did. You have to have the phone plugged in via USB (no wireless charging connection or whatever) and then you’ll see the device in that same Develop menu. Select the real device (which must have Safari open on some website) and you’ll get a DevTools instance of that website.

5. No Mac? Use an online emulator.

I have heard of people running over to Best Buy or an Apple Store to quick debug something on a display machine. But that’s — uhhhh — not super practical. You can use something like CrossBrowserTesting to do this right on the web.

They even jack Chrome DevTools in there somehow. I just did a little testing and I found the Chrome DevTools a little janky to use (a giant left panel renders, the click-to-select element feature didn’t work, and I kept losing WebSocket connection). But hey, it’s cool that it’s possible.

6. No Mac and still need to test on a real device?

I didn’t think this was really possible, but then I saw Inspect . (This is not an ad, I’m just shouting this out as a very cool tool.) With Inspect, I can plug in my real iOS device via USB and get a Chrome DevTools instance for it.

I’m running Inspect on my Mac there. I guess the only real reason I would do that is to use Chrome DevTools instead of Safari DevTools (which, fair play, I might). And it looks like there will be more reasons soon enough. For example, it will bundle React, Vue, and Angular DevTools so you even have those for on-device testing, plus Wi-Fi testing, meaning you don’t have to plug in at all.

But I feel like the real clutch feature here is that it runs on Windows . So now there is a really clear answer for web developers on Windows who need to test on a real iOS device.

I solved some issue earlier today on safari by installing Chrome User agent switching on windows pc:

https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg

The issue was webp not being supported on older safari browsers.

Almost forgot the extension thing existed, definitely saved me writing sniffing code.

Tip #6 is also great, we have an ios phone lying around in the office.

Hiya, unfortunately the issues didn’t happen with this one, so I must get an iPhone.. :(

The real solution (that doesn’t yet exist) is on-device developer tools. Will iOS 15 Safari finally offer Inspect Element?

Earlier versions of iOS (for iPad, before it was called iPad OS) actually had on-device developer tools, but it was removed (I believe in iOS 6, but I could be wrong) in favor of the current connect-to-safari-on-macos solution. So it seems unlikely that it’ll come back.

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• Chrome for Developers

Debugging websites in Chrome on iOS 16.4+

From Chrome 115 you can enable Safari Web Inspector debugging for Chrome on iOS. This post explains how to get started.

Prior to Chrome 115, debugging webpages required building Chrome for iOS from source, as the release version of WKWebView did not support remote Web Inspector debugging. In Chrome 73, we added the chrome://inspect page which locally displays JavaScript logs to assist in debugging webpages. Now that WKWebView allows Web Inspector debugging in release (as of iOS 16.4), we have added a setting in Chrome 115 to enable this feature and further improve the developer experience.

Getting started

On your iOS device you need:

• iOS 16.4 or greater.
• Chrome 115 or greater.

On your Mac you need:

• The Safari Develop menu enabled. Enable this from Safari application settings, Advanced Settings tab.

On your iOS device launch the Chrome app and navigate to Settings . In Content Settings , enable Web Inspector. Relaunch Chrome for iOS after changing this setting.

Debugging your site

With the setting enabled, you can debug any page running in Chrome for iOS by following these steps.

• Connect your iOS device to a Mac with a cable.
• In Chrome for iOS, navigate to the website which you'd like to inspect.
• On your Mac, launch Safari. From the Develop menu, hover over the name of your connected device and select the url of the website which you would like to inspect.

The displayed Web Inspector window will allow debugging of the current web view. For more details about using Safari Developer Tools, refer to Apple's documentation .

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2023-07-18 UTC.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

A DevTools proxy (Chrome Remote Debugging Protocol) for iOS devices (Safari Remote Web Inspector).

google/ios-webkit-debug-proxy

Folders and files, repository files navigation, ios webkit debug proxy.

The ios_webkit_debug_proxy (aka iwdp ) proxies requests from usbmuxd daemon over a websocket connection, allowing developers to send commands to MobileSafari and UIWebViews on real and simulated iOS devices.

Installation

iOS WebKit Debug Proxy works on Linux, MacOS & Windows.

It's easiest to install with homebrew :

It's easiest to install with scoop :

Note: you also need the latest version of iTunes installed.

Install dependencies available in apt repository:

Build and install dependencies that require more recent versions:

• libimobiledevice-glue
• libimobiledevice

Build and install ios-webkit-debug-proxy :

On Linux, you must run the usbmuxd daemon. The above install adds a /lib/udev rule to start the daemon whenever a device is attached.

To verify that usbmuxd can list your attached device(s), ensure that libimobiledevice-utils is installed and then run idevice_id -l .

Start the simulator or device

The iOS Simulator is supported, but it must be started before the proxy. The simulator can be started in XCode, standalone, or via the command line:

Enable the inspector

Your attached iOS devices must have ≥1 open browser tabs and the inspector enabled via: Settings > Safari > Advanced > Web Inspector = ON

Start the proxy

• --debug for verbose output.
• --frontend to specify a frontend
• --help for more options.
• Ctrl-C to quit. Also, the proxy can be left running as a background process.

Using with DevTools

ios_webkit_debug_proxy can be used with many tools such as Chrome DevTools and Safari Web Inspector.

Chrome Devtools

In recent versions of Chrome and Safari there're major discrepancies between Chrome Remote Debugging Protocol and Webkit Inspector Protocol , which means that newer versions of Chrome DevTools aren't compatible with Safari.

Safari Web Inspector

You can use Safari Web Inspector extracted from Webkit sources, e.g. artygus/webkit-webinspector or HimbeersaftLP/ios-safari-remote-debug-kit .

Firefox DevTools via Valence

Another option is mozilla/valence which enables Firefox DevTools to be used with iOS.

Configuration

View and inspect debuggable tabs.

Navigate to localhost:9221 . You'll see a listing of all connected devices.

Click through to view tabs available on each, and click through again to open the DevTools for a tab.

Setting the DevTools UI URL

Chrome DevTools UI used as a default frontend:

You can use the -f argument to specify different frontend source, like Chrome's local DevTools, a local Chromium checkout or another URL:

If you use -f chrome-devtools://devtools/bundled/inspector.html , you won't be able to click the links shown in localhost:9222 as Chrome blocks clicking these URLs. However, you can copy/paste them into the address bar.

Just the same, you can apply the appropriate port (9222) and page (2) values below.

The -f value must end in ".html". Due to security reasons, https URLs will not work; use http or force-allow with the URL bar's shield icon. As of Chrome 45, the primary URL changed from devtools.html to inspector.html .

To disable the frontend proxy, use the --no-frontend argument.

Port assigment

The default configuration works well for most developers. The device_id-to-port assignment defaults to:

If a port is in use then the next available port will be used, up to the range limit.

The port assignment is first-come-first-serve but is preserved if a device is detached and reattached, assuming that the proxy is not restarted, e.g.:

• start the proxy
• the device list gets :9221
• attach A gets :9222
• attach B gets :9223
• detach A, doesn't affect B's port
• attach C gets :9224 (not :9222)
• reattach A gets :9222 again (not :9225)

The port assignment rules can be set via the command line with -c . The default is equivalent to:

where "null" represents the device list. The following example restricts the proxy to a single device and port:

Troubleshooting

Undefined reference to symbol 'log10@@glibc_2.2.5'.

Run this before make : ./configure LIBS="-lm"

error while loading shared libraries: libimobiledevice.so.6

Run sudo ldconfig

idevice_id not found

The idevice_id executable may be found as part of the libimobiledevice-utils package.

could not start com.apple.webinspector! success

Remove and rebuild libimobiledevice .

Could not connect to lockdownd (or doesn't work with iOS10+)

Could not connect to lockdownd. Exiting.: No such file or directory. Unable to attach inspector ios_webkit_debug_proxy

Check the device for a prompt to trust the connected computer . Choose "Trust" and try again.

Could not connect to lockdownd. Exiting.: Broken pipe. Unable to attach inspector

Could not connect to lockdownd, error code -<number>. Exiting.

Make sure you're using latest version of ios-webkit-debug-proxy

Inspectable pages list is empty for iOS >= 12.2

Can not see simulator.

• Make sure you started simulator before the proxy
• Check that webinspector switch is enabled (Settings -> Safari -> Advanced -> Web Inspector)
• Most likely simulator's web inspector daemon listens on ipv6 interface, check that you have ::1 localhost line in /etc/hosts

Building under Rosetta (OS X)

libimobildevice formulae depends on [email protected], which is key-only and requires the following env paths for the build

If no luck so far...

Lastly, always try replugging in the USB cable.

IWDP Clients

JSON-formatted APIs are provided for programmatic clients.

• http://localhost:9221/json will list all devices
• http://localhost:9222/json to list device ":9222"'s tabs
• ws://localhost:9222/devtools/page/1 to inspect a tab.

See the examples/README for example clients: NodeJS, C, clientside JS, websocket and more.

View the design document for an overview of the source layout and architecture.

License and Copyright

Google BSD license https://developers.google.com/google-bsd-license Copyright 2012 Google Inc. [email protected]

The proxy uses the following open-source packages:

• libplist 2.2.0
• libusbmuxd 2.0.0
• libimobiledevice 1.3.0

Code of conduct

Security policy, releases 14, contributors 30.

View in English

Web development tools

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

Web Inspector

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. The clean, unified design puts each core function in a separate tab, which you can rearrange to fit your workflow. You can even debug memory using Timelines and tweak styles using widgets for over 150 of the most common CSS properties.

Elements. View and inspect the elements that make up the DOM of a web page. Clicking elements from the fully editable markup tree on the left reveals the node’s styles in the middle sidebar, with more details in the right sidebar.

Console. Type JavaScript commands in the console to interactively debug, modify, and get information about your webpage. View logs, errors, and warnings emitted from a webpage, so you can identify issues fast and resolve them right away.

Sources. Find every resource of a webpage, including documents, images, scripts, stylesheets, and more. Use the built-in debugger with data type and code highlights to troubleshoot and understand the script execution flow.

Network. See a detailed list of all network requests made to load every web page resource, so you can quickly evaluate the response, status, timing, and more.

Timelines. Understand all the activity that occurs on an open web page, such as network requests, layout and rendering, JavaScript events, memory, and CPU impact. Everything is neatly plotted on a timeline or recored by frame, helping you discover ways to optimize your site.

Storage. Find details about the data stored by a web page, such as application cache, cookies, databases, indexed databases, local storage, and session storage.

Graphics. Preview animation keyframes and their classes from HTML5 canvas, JavaScript animations, CSS animations, and CSS transitions. Dial in the motion and the visual design of web pages.

Layers. Visualize compositing layers in 3D to understand where layers are generated and in what order they'll render. Use layers to help find unexpected memory consumption or excessive repaints on a web page.

Audit. Preform audits against a web page to certify that common code and accessibility errors are addressed. Confirm that a web page follows design guidelines and specifications of modern web pages.

Responsive Design Mode

Safari has a powerful new interface for designing responsive web experiences. Responsive Design Mode provides a simple interface for quickly previewing your web page across various screen sizes, orientations, and resolutions, as well as custom viewports and user agents. You can drag the edges of any window to resize it. And you can click on a device to toggle its orientation, taking it from portrait to landscape — and even into Split View on iPad.