mobile view safari dev tools

• Microsoft's Promise of Easy AI
• Walmart's Killer Tech Deals This Week

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
• How to Get a Full Screen on iPad
• How to Activate and Use Responsive Design Mode in Safari
• How to Disconnect an iPad From an iPhone
• How to Clear Cache on an iPad
• What Is Safari?
• How to Use Web Browser Developer Tools
• How to Change the Default Search Engine in Chrome for iOS
• How to Inspect an Element on a Mac
• How to View HTML Source in Safari
• What's the Current macOS? The Complete macOS Versions Guide
• How to Change Your Homepage in Safari
• 4 Ways to Play Fortnite on iPhone
• How to Reset Safari to Default Settings
• How to Disable JavaScript in Safari for iPhone
• How to Manage History and Browsing Data on iPhone

Safari User Guide

• Get started
• Go to a website
• Bookmark webpages to revisit
• See your favorite websites
• Use tabs for webpages
• Import bookmarks and passwords
• Pay with Apple Pay
• Autofill credit card info
• View links from friends
• Keep a Reading List
• Hide ads when reading
• Translate a webpage
• Download items from the web
• Add passes to Wallet
• Save part or all of a webpage
• Print or create a PDF of a webpage
• Interact with text in a picture
• Change your homepage
• Customize a start page
• Create a profile
• Block pop-ups
• Make Safari your default web browser
• Hide your email address
• Manage cookies
• Clear your browsing history
• Browse privately
• Prevent cross-site tracking
• See who tried to track you
• Change Safari settings
• Keyboard and other shortcuts

Use the developer tools in the Develop menu in Safari on Mac

If you’re a web developer, the Safari Develop menu provides tools you can use to make sure your website works well with all standards-based web browsers.

If you don’t see the Develop menu in the menu bar , choose Safari > Settings, click Advanced, then select “Show features for web developers.”

Open Safari for me

Safari Developer Tools: The Comprehensive Guide for Web Developers

Introduction to Safari Developer Tools

Safari's built-in developer tools provide web developers with a powerful suite of features for testing responsive designs, debugging JavaScript, optimizing performance, and more. While historically Safari lagged behind Chrome and Firefox's devtools, modern Safari has caught up and offers a robust toolset that's invaluable for building progressive web apps and mobile web experiences.

Some key benefits of Safari developer tools include:

Integrated responsive design features like device frames, network throttling, and touch simulation to build mobile-friendly sites.

Powerful JavaScript debugger with breakpoints, profiling, and console to fix bugs and improve performance.

Web Inspector for real-time modification of HTML, CSS, and accessibility audits.

Resource tracking for optimizing loading and caching.

Built right into the Safari browser on Mac and iOS with seamless integration across all panels.

For web developers working on the front-end, Safari devtools can boost productivity and complement existing workflows. Let's explore some of the key capabilities.

Responsive Design Mode

Creating responsive, mobile-friendly websites is easier with Safari's responsive design tools.

Device Frames

Safari can simulate iPhone, iPad, and Desktop screens right in the browser window. Switch between device frames on-the-fly to preview how a site looks across various displays. Frames persist on page reloads and feel native with chrome controls. Custom frames can be created for any dimensions. For example, I was able to debug layout issues on the Amazon mobile shopping app by testing with exact iPhone dimensions.

Media Query Debugging

The Media Query Inspector shows which CSS media queries are currently applied. Click any media query to trigger it manually. Identify styles affecting elements across breakpoints faster. This feature allowed me to pinpoint styles specific to landscape orientation when building a news app.

Network throttling simulates slow connections and CPU throttling mimics mobile performance. Configure presets or custom throttling for repeatable testing. Throttling profiles integrate with device frames. I find this helpful for testing sites on simulated 2G networks.

Touch Simulation

Generate touch events and gestures to test tap, swipe and touch targets. Debug touch event handlers with the debugger. Ensure buttons work for touch devices. The ability to test swipes and taps has improved accessibility on some of my mobile web projects.

Viewport Resizing

Resize viewport dimensions directly in the browser window with pixel-perfect precision. Watch responsive changes instantly without reloads. Zoom in and out for additional debugging control. The viewport resizer is great for tweaking breakpoints and alignments.

Safari's JavaScript debugger is invaluable for squashing bugs in client-side code.

Breakpoints

Pause execution on any line. Conditional breakpoints stop on expressions. Break on exceptions or disabled breakpoints without deleting. Breakpoint Navigator organizes all breakpoints. Here's an example using breakpoints to debug a sticky header scroll effect:

Scope and Variables

Inspect scopes, local variables, watch expressions, this context. Safely edit values to test scenarios. Search variables by name. The variable inspection lets me quickly check values during development.

View the call stack trace of nested function executions. Click frames to jump to source. Inspect arguments passed. Understand async code flow. The call stack is invaluable for tracing promise chains and callbacks.

A REPL console to test snippets. Log messages, profile code, and export results. Autocomplete with bash/fish suggestions. Built-in utilities like copy() and keys() . The console is perfect for experimenting with code examples from Stack Overflow answers.

Record and analyze CPU usage, memory allocation, timeline of events. Find performance bottlenecks in JavaScript. Generate shareable profiling reports. Profiling has helped me optimize intensive data processing code.

Web Inspector

Modify HTML and CSS in real-time with Web Inspector.

Edit DOM elements and styles without page reloads. For example, I'll tweak paddings and colors to refine a design.

Inspect computed styles and layout. Quickly determine if flexbox or grids were applied correctly.

Audit for accessibility and best practices. Identify improvements needed before launch.

Resources panel to debug images, fonts, databases, and local storage. Ensure assets loaded properly.

Monitor network requests with the network panel.

Waterfall view visualizes resource loading. Optimize load order and caching.

Inspect headers, cookies, and parameters. Troubleshoot API requests.

Export HAR files for offline analysis. Share reports with collaborators.

Throttle network speed. Test on a simulated cellular connection.

Performance Optimization

In addition to profiling JavaScript, Safari provides auditing and analysis to measure real-world performance.

Frame rate analysis spots jank and dropped frames. Smoother UX.

Memory debugging tracks leaks and detached DOM trees. Prevent crashes.

Code coverage improves test quality. Identify untested areas.

Load performance checks for regressions. Page loads within 3 seconds.

Share results with team to track improvements. Metrics focused process.

Tips and Best Practices

Learn keyboard shortcuts to speed up workflows.

Enable experimental features like CSS grid debugging. Early access.

Use Debugs proxy to debug mobile Safari on real devices. iOS testing.

Create saved custom device frames for repeatable testing. Reuse always.

Export and share reports from Audits, Profiles, etc. Collaboration.

Set breakpoints before page load to debug initialization code. Catch issues early.

Safari developer tools offer powerful capabilities for debugging and testing modern web experiences. Integrated responsive testing lowers mobile development friction. Advanced profiling guides performance optimizations. With robust features now on par with Chrome and Firefox, Safari devtools deserve a spot in every web developer's toolkit.

For building mobile-friendly and high performance progressive web apps, Safari has emerged as a capable developer platform. Check out DevHunt to explore and compare the latest developer tools like Safari for your projects.

Related posts

• Safari Developer Tools: The Complete Guide for Web Developers
• Safari Dev Tools: The Complete 2023 Guide
• Master Chrome DevTools for Next-Level Web Development
• Unlock iOS Dev Power with Chrome DevTools

View in English

Watch the latest videos about Safari

Safari for developers

Safari is the best way to experience the internet on iPhone, iPad, and Mac. Thanks to blazing-fast performance and industry-leading energy efficiency, millions of users enjoy exploring the web with Safari. Take advantage of powerful new features, advanced developer tools, and cutting-edge technologies in Safari to deliver best-in-class websites and apps.

Safari web extensions

Safari web extensions use HTML, CSS, and JavaScript to offer powerful browser customizations — and now you can create them for every device that supports Safari. Learn how to build a Safari web extension that works for all devices, and how to convert an existing extension to Safari through Xcode and the Safari Web Extension Converter.

Learn about Safari web extensions

SharePlay in Safari

Create SharePlay experiences that people can enjoy on the web and in your app. Learn how to use the Group Activities framework in combination with your website to bring SharePlay to Safari, connecting people through shared interactions — even if they haven’t yet downloaded your app from the App Store.

Learn about Group Activities in Safari

Compact tab bar

In the compact tab bar view, the browser interface yields to the content. Safari blends the tab bar into each website by matching its background color. As a web designer or developer, you can choose the color and code it into your HTML. The entire interface is on one line, and elements naturally appear when needed, making your content feel more expansive as each web page or web app extends to all four edges of the window.

Learn about design in Safari

Verification codes

Easily create more secure logins for users in iOS 15, iPadOS 15, and macOS Monterey, or later using the new iCloud Keychain verification codes. Take advantage of verification codes, AutoFill, iCloud Keychain sync, and two-tap setup to simplify the multistep sign-in process.

Passkeys with WebAuthn

With the Passkeys Technology Preview, you can try a new type of credential that’s intended to replace passwords. A passkey is a phishing-resistant WebAuthn credential that’s backed up and synced across devices with iCloud Keychain. Enable the technology preview using Enable Syncing Platform Authenticator in the Develop menu.

Split View in Safari on iPad

People can view two websites at once on their iPad using split view. Responsive Design Mode makes it easy to see how your websites will render in this view — just tap the iPad preview until it turns into a split view.

Apple Pay on the Web

Provide an easy and secure way to make purchases in Safari 10 or later. Apple Pay lets people quickly pay without entering payment, shipping, or contact information on supported websites from their Mac, iPhone, or iPad. Because card numbers aren’t used and each transaction is confirmed with a fingerprint or passcode, Apple Pay is more secure than accepting credit and debit cards.

Web Push in Safari

Send notifications to people who use your website or web app in Safari 16 on macOS 13 — even when Safari isn’t running. Fully interoperable, Web Push’s standards-based implementation relies on the Push API, Notification API, and Service Workers. If you’ve already coded Web Push using industry best practices, it will automatically work on Safari. And you don’t need to be an Apple Developer Program member to implement this feature.

Safari Technology Preview

Download Safari Technology Preview to get a sneak peek at upcoming web technologies in iOS, iPadOS, and macOS, and experiment with them in your websites and extensions.