How to Debug Websites on an iPhone

To debug a live website in Safari on an iPhone, enable Web Inspector on the iPhone, connect it to a Mac, open the page on the phone, then select that page from Safari on the Mac under Develop. The Web Inspector window lets you examine the page’s DOM and styles, JavaScript, network requests, storage, and performance activity.

This workflow inspects the page running on the actual iPhone. Safari’s Responsive Design Mode on a Mac is useful for checking viewport sizes and pixel ratios, but it does not reproduce every iOS rendering and interaction behavior.

Requirements and setup

An iPhone with the page you want to debug open in Safari.
A Mac with Safari. Apple’s documented remote-inspection workflow uses Safari on the Mac.
A cable that connects your particular iPhone and Mac for the initial connection. Connector requirements vary by device, so check both ports.

Enable Web Inspector on the iPhone

Open Settings on the iPhone.
Go to Apps > Safari > Advanced.
Turn on Web Inspector.

Apple’s current instructions place Safari’s settings under Apps. Settings labels and locations can change between operating system releases.

Connect the phone and open the inspector

Connect the iPhone to the Mac with a cable. If the iPhone asks whether to trust the Mac, confirm the trust prompt.
Open Safari on the Mac. If its Develop menu is missing, open Safari > Settings > Advanced and enable Show features for web developers.
On the iPhone, open the website and navigate to the page and state that reproduce the problem.
On the Mac, choose Develop, choose the connected iPhone, then select the page open on the device.
Use the Web Inspector window to investigate. It follows the selected iPhone tab as you navigate; closing that tab closes its inspector window.

See Apple’s instructions for inspecting iOS and iPadOS and enabling developer features in Safari.

Connect over a network

After establishing the wired connection, you can enable Connect via Network from the device’s submenu in Safari’s Develop menu. Apple also documents configuring this connection through Xcode. Set it up while the phone and Mac are connected by cable first; the network option is for subsequent inspection without keeping that cable attached.

Debug a specific problem

Start by reproducing the issue on the iPhone, then use the inspector panel that can answer the question. Avoid changing several things at once: record the action that triggers the bug, inspect the relevant evidence, make one change, and repeat the same action.

Symptom	Where to look	What to check
Wrong spacing, hidden content, or overlapping elements	Elements	Inspect the relevant DOM node and its computed styles. Check the element’s size, positioning, inherited rules, and whether another node covers it.
A button or interaction does nothing	Console, then Sources	Look for errors and warnings after reproducing the action. If the failure is in script flow, inspect the relevant script and set a breakpoint to follow execution.
An image, font, API call, or script is missing or slow	Network	Find the request, inspect its status and response, and compare its timing with the moment the page becomes incorrect.
The page stutters, renders late, or uses unexpected resources	Timelines	Review network activity, layout and rendering, JavaScript events, memory, and CPU activity around the reproduction steps.
A page works once but fails after reload or a prior visit	Storage	Inspect relevant cookies, databases, local storage, and session storage. Consider whether saved site state changes the behavior.
Canvas output or animation looks wrong	Graphics	Examine canvas and CSS or JavaScript animations and transitions while the issue is visible.

Apple describes Web Inspector as a tool to “inspect and debug your HTML, CSS, and JavaScript.” Its Web Inspector documentation describes the available inspection areas.

A practical debugging sequence

Write down the exact page, device action, and sequence needed to trigger the issue. Include whether it happens on first load, after navigation, or after tapping a control.
Reproduce it on the iPhone while its page is selected in the Mac inspector.
Check Console for errors or warnings produced at the time of failure.
Check Network for failed or delayed resources associated with the symptom.
Inspect the relevant DOM and styles, or follow the script with breakpoints if the evidence points to code behavior.
Make one change and repeat the same steps. Note whether the visible result, console output, or request behavior changed.

This sequence uses the documented inspector capabilities as a troubleshooting method; it is not a claim that any particular bug has been tested.

Responsive preview or a real iPhone?

Use Responsive Design Mode on the Mac to quickly try viewport widths, heights, and display pixel ratios. You can use it alongside Web Inspector while resizing a page. It is useful for narrowing down responsive CSS and layout problems.

For an iPhone-specific failure, verify on the actual device when possible. Apple notes that iOS, iPadOS, and visionOS have rendering behavior that differs from macOS because of different form factors and interaction models. A page that looks correct in a Mac preview can still behave differently on iPhone. See Apple’s Responsive Design Mode documentation.

Workflow	Best for	Limit or requirement
Responsive Design Mode	Quick viewport and pixel-ratio checks while adjusting responsive layouts.	Does not establish identical iOS rendering or interaction behavior.
Remote Web Inspector on iPhone	Diagnosing the page and behavior on the actual phone.	Requires an iPhone, a Mac, and initial device setup and connection.
WebDriver automation	Repeating browser interactions as regression checks.	Requires separate automation enablement and test code; it is not the same as opening an inspector for a one-off investigation.

Automate repeatable Safari checks

For automated Safari interactions on iPhone or iPad, Apple’s WebDriver setup requires enabling WebDriver on the Mac and enabling both Web Inspector and Remote Automation in Safari’s Advanced settings on the device. Apple describes safaridriver as Safari’s WebDriver implementation and WebDriver as a REST API for automating browser interactions. You can write tests with compatible client libraries and languages.

Use automation when you need to repeat a known set of interactions or regression checks. For diagnosing a new, unclear failure, manual inspection is usually the more direct way to explore console output, requests, and page state. Follow Apple’s guides for enabling WebDriver on iOS and iPadOS and Safari WebDriver for setup details.

Or skip the browser setup

If you need a clean screenshot of the page rather than a live interactive inspector, ScreenshotNeo is a website screenshot API and MCP server for developers. A single GET request returns an image or PDF; this example saves a WebP screenshot of a page:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo API documentation for authentication and request options. Python and Node.js examples are available in the same guide.

Cookie and consent banners, newsletter popups, and chat widgets are removed before the screenshot; each cleanup step can be turned off.
Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed. Responses include X-Page-Verdict and X-Billed headers.
An MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs.
The free plan includes 1,000 screenshots a month with no card. Paid plans start at $5 for 3,000 screenshots.

Common problems and fixes

Problem	Likely cause	Fix
The iPhone does not appear in Safari’s Develop menu.	Web Inspector is off, the phone has not been trusted, or the initial device connection did not complete.	Confirm Web Inspector is enabled under Settings > Apps > Safari > Advanced, reconnect the cable, and respond to any trust prompt.
The Develop menu is missing on the Mac.	Safari’s developer features are disabled.	In Safari Settings > Advanced, enable “Show features for web developers.”
The iPhone appears, but the page is not listed.	The page is not currently open in Safari on the phone, or the connection/device state has not refreshed.	Open the target page on the iPhone, leave that tab active, and reopen the device submenu. If needed, reconnect the phone.
The inspector closes when navigating or closing a tab.	The inspector is associated with the selected iPhone tab.	Select the current page again from Develop after navigating. Keep the tab open while inspecting.
Wired inspection works but network inspection does not.	Network inspection has not been enabled after the initial cable connection.	Reconnect by cable, then enable Connect via Network from the device submenu. Xcode can also configure network connection.
The Mac preview looks right, but the iPhone remains wrong.	The preview and iOS differ in rendering behavior or interaction model.	Reproduce and inspect the problem on the real iPhone; use preview only to narrow down viewport-related causes.
The page looks blank or assets are absent.	A request may have failed or not completed.	Inspect Network status, response, and timing, then correlate the result with Console messages.
An automated Safari test cannot control the device.	One of the separate WebDriver or device automation settings may be disabled.	Check WebDriver on the Mac and both Web Inspector and Remote Automation on the device.

Performance, reliability, and cost notes

Performance: Use Timelines and Network evidence to locate whether delay is associated with requests, rendering, JavaScript, memory, or CPU. A visual symptom alone does not identify the cause.
Reliability: Reproduce on the device and capture the same sequence after each change. For a bug that depends on saved state, inspect storage as well as the current DOM and console.
Workflow cost: Apple’s documented inspection and responsive preview are Safari developer tools. This workflow requires access to a Mac and iPhone; the cited documentation does not establish a need for paid debugging software or a particular Mac model.
Automation cost: WebDriver adds setup and test code, but can repeat browser interactions for regression checks. Choose it when repeatability is valuable, rather than as a substitute for interactive diagnosis.
Screenshot cost: ScreenshotNeo has a free tier of 1,000 shots per month without a card and paid plans from $5 for 3,000. A screenshot API provides a captured artifact; it does not replace a live Web Inspector session when you need to interact with the page or step through JavaScript.

FAQ

Can I debug an iPhone website without a Mac?

Apple’s documented remote Safari Web Inspector workflow uses Safari on a connected Mac. Responsive preview is also a Mac Safari feature. If you do not have access to a Mac, you can still inspect the page visually on the iPhone, but the cited workflow does not provide the same remote inspector on the phone itself.

Can I inspect a page opened from a Home Screen web app?

Apple’s device inspection documentation also covers inspectable content from apps and Home Screen web apps. The available page depends on the app or web app context; consult Apple’s Inspect Apps and Devices guide.

Is a screenshot enough to debug an iPhone issue?

A screenshot can document a visual result or compare layouts. It cannot show the live DOM, console errors, request timing, or execution flow; use Web Inspector for those questions.

Do I need to buy a specific cable or MacBook?

The device connection needs a cable that fits the iPhone and Mac you have. Apple’s cited instructions do not recommend a specific model of cable or MacBook.