safari debug iphone wireless

FrontAid CMS - Agile Content Management with JSON & Git.

» FrontAid CMS / Blog

(Wireless) Remote Debugging with Safari on iOS

Testing websites on mobile devices is getting more and more important. Especially given that mobile browsers often behave differently on physical devices than you might expect them to when just testing on a desktop browser with a smaller viewport. So it is important to constantly test your development websites on real mobile devices.

Most development servers on a desktop computer just open a certain port on the localhost so that the content they serve is accessible on a URL like http://localhost:1234 . That works well on the computer but you cannot just paste that URL into your mobile device and start testing. What might usually work though, is to look up the current IP address of the computer and open http://<ip-address-of-desktop>:<port> on the mobile device.

But relying on the computer’s IP address is annoying as it might change from time to time. And that means that you can’t bookmark it on your mobile device, you loose cookies, local storage, site settings, etc. on every IP address change. There is, however, a simple one-time setup that does not involve using variable IP addresses or external tools . And it even works without a cable connection. All you need is a Mac and Safari.

Open localhost:<port> on your Mobile Device

Let’s assume your test server opens the port 8080 on the localhost . On your computer, you will thus use http://localhost:8080 to access the development website. Now lets enable that on your iOS device. Actually, we don’t open localhost:<port> or <ip-address>:<port> on the mobile as there is an even better way. Instead of using the IP address directly, we will use the computer name of your Mac. You can look that up by opening System Preferences → Sharing . Note that we will refer to your computer’s name by using <computer-name> for the rest of this article. Now that you know the name, make sure that you activate at least one item in the list of sharing services . It does not matter what sharing service you activate, but you have to enable at least one. This might be something silly, for example activate Printer Sharing and only allow it to be used by yourself.

Now make sure that both your Mac and iOS device are connected to the same WiFi network . Open http://<computer-name>.local:8080 (or whichever port you use on your computer) on your mobile device. Note that you have to replace whitespaces with dashes and ignore special characters such as ' . For example, if your computer name is Name's MacBook , you will have to use http://Names-MacBook.local:8080 . And tada, your website should show up on your iPhone or iPad!

If it does not, you might run into a configuration issue and get the error message “Safari cannot open the page because it could not connect to the server”. If that happens, you might need to configure your server to bind to 0.0.0.0 instead of localhost (and to allow connections from *.local hosts) . Changing the IP address to 0.0.0.0 will make your server externally accessible (within the same WiFi).

For example if you are using webpack-dev-server with Node.js , you have to slightly tweak its configuration. By default, it creates a server on localhost and will not allow remote connections (e.g. from mobile devices). So you need to change the webpack DevServer configuration (more specifically, host and allowedHosts ) accordingly:

Note that adding .local to allowedHosts will enable any hosts ending with .local . That makes it a good choice on shared code bases. Restart the server and it should work after all, yay! But if you you get the error message invalid host header , there is probably a mismatch between your computer’s name and the URL that you enter in the address bar of your browser.

Note that all iPhones, iPads, and Macs in the same WiFi network now have access to your local development website. And that not only works for mobile Safari, but also with the iOS versions of Firefox and Chrome . However, you cannot use remote debugging on those (see next section on how to do that with Safari). As they use the same rendering engine as mobile Safari, though, it should not be needed anyway.

Remote Debugging

Now that you have access to your websites from your phone and tablet, you probably also would like to use remote debugging with them. Setting that up is actually very simple. Open the Safari Preferences → Advanced and enable “ Show Develop menu in menu bar ".

On your mobile, enable Settings → Safari → Advanced → Web Inspector and then connect it to your computer with a cable. Make sure that you open Safari on mobile and on the Mac. On the Mac Safari select Develop → <Your mobile Device Name> from the menu. When you set this up for the first time on that device, you need to click Use for Development… and tap Trust on the mobile device.

Now everything is set up for remote debugging. Just select Develop → <Your mobile Device Name> → <Tab you want to debug> on the Mac Safari and a new debugging session will be created. That allows you to inspect the website on your iPhone or iPad from the Mac Safari.

Remote Debugging without a Cable

Remote debugging with mobile Safari also works without a cable connection to the desktop computer. But you have to install Safari Technology Preview on your Mac as the stable version of Safari currently does not support wireless remote debugging. Just do the same setup as described above, but connect the cable and open Safari on your iOS device. In Safari Technology Preview, make sure you enabled “Show Develop menu in menu bar” and enable Develop → <Your mobile Device Name> → Connect via Network in the menu. Now you can unplug the cable and check whether Develop → <Your mobile Device Name> still shows up on the desktop Safari.

Then just select the tab you want to remote debug from the same menu. Safari Technology Preview will establish a wireless connection from macOS to the iOS device which allows you to wirelessly inspect your local websites from iPhones and iPads.

Happy Testing!

• 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

• Documentation

Get Started

Introduction to inspect.

Installation guide

Using Inspect

• How to debug mobile websites on iOS devices with Inspect
• How to debug WebViews on iOS devices with Inspect
• Wireless debugging over WiFi
• iOS Simulator debugging
• How to debug mobile websites on Android devices with Inspect
• Managing teams and organizations

Troubleshooting

• Devices and targets
• Issues and bugs

Alternatives

• What makes Inspect a great alternative to ios-webkit-debug-proxy
• What makes Inspect a great alternative to remotedebug-ios-webkit-adapter?

Get an overview of Inspect’s features, and how to use them.

Debug Safari on iOS with Inspect

Debug Chrome on Android with Inspect

​ Help us make Inspect better

Did we miss something? Should we add a new section? Tell us at [email protected]

Was this page helpful?

• Help us make Inspect better

DEV Community

Posted on Jun 6, 2018

iOS remote debugging - a how-to guide

When it comes to testing and debugging of iOS applications, the emulator cannot fully replace testing them on actual devices. Well, if you have the possibility to connect iPhone, iPad, etc. directly to your development machine, you don’t have to worry. But what if you needed to inspect an app running on a device which couldn’t be physically connected to your Mac?

Wireless debugging

Apple has added an option for wireless debugging in Xcode 9. But before you start, you should bear in mind several conditions :

Mac computer and iOS device should share the same network.

You should use Xcode 9.0 or later, macOS 10.12.4 or later, and iOS 11.0 or later.

Okay, now lets proceed to the actual steps that will help you enable a remote debugging:

• Open your project on Xcode.
• Select Window > Devices and Simulators.
• In the window that appears, click “Devices”.
• Link your device to your Mac via a USB cable.
• In the left column, choose the device, and in the detail area, check the box “Connect via network”.

Now, Xcode will pair with your device. If Xcode can connect with the device over the network, a network icon will appear next to the device in the left column and you can safely disconnect your device.

How to debug iOS apps on remote devices

If the first condition is not met and the device does not share the same network as Mac or even located miles away from the machine, remote debug with the help of Xcode will not be possible.

However, there is a workaround! You will still be able to debug such device with the help of USB over Ethernet redirection software, e.g. FlexiHub . It is designed to virtualize USB devices, (like iPhone, iPad, iPod, etc.) and redirect them over the network. The software works across LAN, Ethernet, and the Internet.

• To establish a remote connection to the iOS device, download and install Flexihub on both the local machine running the debugger and a remote computer with the iOS device physically attached.
• Launch FlexiHub on the local machine and register an account - click ‘Sign up’ link and follow the instructions. Sign into the account.
• Start the software on the remote computer and log into FlexiHub account using the same credentials.
• In the software interface on the local Mac, you’ll see iPhone/iPad available for connection. Click “Connect”.

That’s it. Now you can access the remote iOS device from your local computer and start the debugging process as though the device was directly connected to your machine.

Top comments (2)

Templates let you quickly answer FAQs or store snippets for re-use.

• Location USA
• Joined Sep 19, 2018

Hi! Tell me, I can do it with USB Network Gate? Or only FlexiHub can do it?

• Location Hyderabad
• Work Game Developer
• Joined Feb 18, 2020

If the device is at a different place, how can we see what is visible on the device screen to perform testing?

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Projetos para experimentar linguagens

Andrey_vdl - Apr 27

Roast my css code

sweet2sneha - Apr 28

Unraveling the Mysteries of Sockets, Files, and Streams in Java

Oludayo Adeoye - Apr 27

Faktor Yang Menunjukan Pendidikan Yang Baik

shofia - Apr 28

We're a place where coders share, stay up-to-date and grow their careers.

Remotely debugging iOS Safari on Windows and Linux

Published by himbeer on 3rd june 2021 3rd june 2021.

Note: This blog post is a mirror of the README of my GitHub repository .

Using this project you can debug your websites and web applications running in iOS Safari from a PC running Windows or Linux.

It provides a free and up-to-date alternative to the discontinued remotedebug-ios-webkit-adapter by RemoteDebug and is the spiritual successor to the abandoned webkit-webinspector by Arty Gus .

The setup scripts ( generate.sh or generate.ps1 ) download the latest version of WebKit’s built-in WebInspector and patch it to work with the WebSocket ios-webkit-debug-proxy provides and to be compatible with Chromium based browsers.

Requirements for running

• On Windows, it will automatically be downloaded, but you must also install iTunes for it to work
• For Linux, please follow the installation instructions .
• If you have Python or PHP on your system, you don’t need to change anything
• If you have Node.JS on your system, just run npm i -g http-server and you’re set.
• like Google Chrome, Edge or Opera
• like Epiphany/GNOME Web

Requirements for setup

• On Windows, I suggest using git for Windows in PowerShell
• On Linux, I suggest installing svn from your package manager

Instructions

• Clone this repository, https://github.com/HimbeersaftLP/ios-safari-remote-debug-kit to your PC
• On Windows, run generate.ps1 . On Linux, run generate.sh .

This will result in the folder WebKit being created inside src . It contains the WebInspector files.

• Plug your iOS device into your PC via USB
• On the iOS device, go to Settings->Safari->Advanced->Web Inspector and enable it
• Open the website you want to debug in Safari
• On Windows, run start.ps1 . On Linux, run start.sh .
• Then open the Chromium or WebKit based browser of your choice with the following URL: http://localhost:8080/Main.html?ws=localhost:9222/devtools/page/1
• You should be greeted with the WebInspector and can now debug to your heart’s content.
• Two windows will open. One manages the web server and the other one is ios-webkit-debug-proxy .
• Alternatively you can also press Ctrl+C in the web server window
• Press Ctrl+C in the terminal window to exit

Known Issues

• "Events" on the "Timelines" tab don’t work
• Canvas content doesn’t show on the "Graphics" tab
• Minor style glitches due to Webkit vs. Chromium differences

If you want to see details about how this was made, you can read a detailed explanation in in my other post here .

Attribution

• webkit-webinspector for the idea
• ios-webkit-debug-proxy for the ios-webkit-debug-proxy tool
• WebKit for the WebInspector itself

Share this post:

• Click to share on Telegram (Opens in new window)
• Click to share on WhatsApp (Opens in new window)
• Click to share on Twitter (Opens in new window)

13 Comments

Nicholas Fenwick · 26th June 2023 at 09:44

Hi! When trying to debug an old iPhone running iOS (and therefore Safari) 12, do we need to issue commands to change the webkit protocol to 12? I can list available pages with http://localhost:9222/ but when I try to run http://localhost:8000/Main.html?ws=localhost:9222/devtools/page/1 the Web Inspector throws an error “‘Browser’ domain was not found (at :undefined:undefined)”. This message is mentioned at https://github.com/HimbeersaftLP/ios-safari-remote-debug-kit but I am not “trying to inspect a page that is not inspectable” since this same page on a newer iPhone 16 and same URL works fine.

Himbeer · 26th June 2023 at 10:51

Hello, You can select the iOS version when running generate.sh/generate.ps1 using “-i ” or “-iOSVersion ” respectively. (You also need to run with “-f” or “-Force” if you already ran the script before to clean up the old data) Using an incompatible iOS version usually results in an “Unknown Instrument” error ( https://github.com/HimbeersaftLP/ios-safari-remote-debug-kit/issues/12 ). Does the list at http://localhost:9222/ only show this one page? The message “Error: ‘Browser’ domain was not found” usually indicates a successfull WebSocket connection but the selected page/Safari not cooperating with the debugger.

Alex Malz · 9th February 2023 at 15:06

Thank you very much for your great project! Works very well for me and is so easy to install and use!! I previously wasted hours with compiling the old webkit stuff without any benefit…

However, do you have any idea how to get it working with vs code? As vs code is capable of the chrome remote debug protocol it should work somehow. I just don’t get the correct settings for the launch.json configuration.

Thanks! Alex.

Himbeer · 9th February 2023 at 15:13

Hi Alex! You are right that VS Code is capable of the Chrome Remote Debug protocol. However, WebKit uses their own protocol, that’s why my tool bundles the WebKit inspector. There used to be a tool that could translate between the protocols ( remotedebug-ios-webkit-adaptor ) and also a VS Code extension with the same purpose ( vscode-ios-web-debug ), however those are sadly both deprecated (which is the reason I made this project, as running the WebKit inspector is far less maintenance effort than keeping up to date with the inspector protocol).

Alex · 9th February 2023 at 16:31

Thanks for your reply and – again – your great work!

Himbeer · 9th February 2023 at 16:33

You’re welcome!

EVC · 26th July 2022 at 15:09

“This site can’t be reached

localhost refused to connect.

ERR_CONNECTION_REFUSED”

Himbeer · 10th August 2022 at 23:14

Edit the powershell script to use another web server

Rodrigo · 16th February 2022 at 13:13

Thanks for the repo and the blog. I have managed to install most of it but the web server is not loading in Chrome. I get localhost refused to connect.

I tried going directly to http://localhost:9222/ and there it shows my ipad and the web I want to debug that is open but when going to http://localhost:9222/devtools/page/1 it says:

404. That’s an error.

The requested URL /devtools/page/1 was not found. Frontend is disabled

It is using Python3 to serve the WebInspector

Himbeer · 19th February 2022 at 10:57

Hello! Using the python (or other) webserver instead of the page served by the ios-webkit-debug-proxy is necessary as the latter is very outdated. It looks like there might be something else already using port 8080 on your machine that causes the webserver of my script not to load. Try changing the port number in the script.

Joe · 21st June 2021 at 20:50

Hi, I just wanted to write and say THANK YOU VERY MUCH for making these scripts available, and also for taking the time to document everything. I had been pulling my hair out trying to just simply get proper error messages from iOS Safari console. Apple is totally unreasonable with their restricted access to the crippled web browser on iOS, and they furthermore prevent you from really having any other alternatives either because every browser is on iOS is still running the webKit engine as a rule. People like you, however, are making a difference, and I just wanted to say thanks for the effort. If there is a place to make a donation to you, I’d be willing to do so because you have saved me hundreds of dollars by circumventing the necessity to buy an actual Mac just to test my software against their awfully crippled browser, Safari. Your efforts are much appreciated. Thanks, Joe.

Himbeer · 8th July 2021 at 12:03

Thank you for your cheerful comment! I am very glad my project turned out useful for you. I appreciate your offer, but I think there are places that need a donation more than me ^^. btw I love the animations on your website 😀

Joe Harris · 8th July 2021 at 18:31

Thank you once again! 🙂

Leave a Reply Cancel reply

Related posts.

How I brought back iOS Safari remote debugging to Windows and Linux

Here’s how I managed to get a local copy of the WebKit WebInspector working with Google’s ios-webkit-debug-proxy on iOS 14.6 in 2021.

Fixing DaVinci Resolve high-DPI scaling on Windows

After opening Resolve for the first time since I have upgraded to an UHD-monitor I noticed that something was off: Everything is way to small even though I had set my display scaling in Windows Read more…

Decoding my satellite-receiver’s channel list file

TL;DR? Click here to jump directly to the decoding website: Preamble So I have this Triax-Hirschmann S-930 DVB-S2 satellite television receiver. It has a feature that allows exporting the channel list to a USB-Drive which Read more…

Tips & Tricks

Troubleshooting, enable the safari debug console on iphone & ipad.

Safari for iOS includes an optional debug console to help web developers track down and resolve issues with webpages on iPhone and iPad.

Even better, with the latest versions of iOS it actually uses the same Web Inspector that Safari on desktop does too, meaning if you connect the iPhone or iPad to the computer you can use the Safari debugging tools directly with your iOS or iPadOS device

Older versions of iOS have this capability too, and while not as in inclusive as the desktop Safari debug and developer tools , it’s still useful and is easy to enable or disable on the iPhone and iPad.

Let’s learn how to enable this feature on both new and old versions of iOS, and learn what’s different between the versions as well.

How to Enable & Use Web Inspector in Safari for iPhone & iPad

On modern iOS and iPadOS versions, here’s how Safari web inspector works:

• Open Settings > Safari > Advanced then tap to enable “Web Inspector”
• Connect the iPhone or iPad to a Mac, then go to Safari and enable the developer menu if you haven’t done so by going to Safari > Preferences > Advanced > Show Develop menu bar
• Pull down the “Develop” menu bar and find the iPhone or iPad, and then open the web page you wish to debug
• Safari Web Inspector will open where you can debug and inspect web elements from the iOS or IPadOS device directly in Safari on the Mac

Now as you navigate on the iPhone or iPad you will find the Web Inspector in Safari on the Mac will update.

You can access the debug Console through the Console tab in the web inspector, and you can access the debugger through the Debugger tab. And of course the usual web inspector tools for elements, resources, network, etc, are available to use as well.

You can also use a View Source trick for iOS and iPadOS while you’re on the go, if needed too.

How to Enable Debug Console on Older iOS Versions

If you have an older version of iOS on an older iPhone or iPad, the whole debug experience is on the device and you don’t have the ability to connect it to Safari on a Mac. Nonetheless it’s still quite useful, here’s how it works:

• Launch “Settings” and tap on “Safari”
• Tap on “Advanced”
• Slide “Debug Console” to ON

Once enabled, tap on the Debug Console at the top of any Safari screen to see web page errors.

The default list shows all errors, but you can drill down to more specific HTML, JavaScript, and CSS errors by tapping them individually.

Another useful tool for mobile web developers is Firebug Lite for iOS , which utilizes a javascript bookmarklet to load a simpler version of the popular Firebug development tool. That functionality is probably most useful for the older iOS versions as well, since newer releases have new capabilities.

Do you use any web developer tools for iPhone or iPad? Share with us any tips, tricks, apps, or techniques in the comments below.

Enjoy this tip? Subscribe to our newsletter!

Get more of our great Apple tips, tricks, and important news delivered to your inbox with the OSXDaily newsletter. 

You have successfully joined our subscriber list.

Related articles:

• Enable Safari Hidden Debug Menu in Mac OS X
• Make Console Easier to Read in Mac OS X with PID, Icons, & Bold View Options
• Enable Mac App Store Hidden Debug Menu
• How to Enable a Hidden Debug Menu in Photo Booth for Mac OS X

» Comments RSS Feed

out dated — no longer accurate

The topmost section is accurate for new iOS versions using Web Inspector, the lower portion is for older versions with Debug Console. Hope that helps!

Leave a Reply

Name (required)

Mail (will not be published) (required)

Subscribe to OSXDaily

• - Fixing Apple Watch False Touch & Ghost Touch Issues
• - How to Connect AirPods to a Smart TV
• - How to Customize the Finder Sidebar on Mac
• - How to Uninstall Apps on MacOS Sonoma & Ventura via System Settings
• - How to Mute a Call on Apple Watch
• - Beta 3 of iOS 17.5, macOS Sonoma 14.5, iPadOS 17.5, Available for Testing
• - Apple Event Set for May 7, New iPads Expected
• - Beta 2 of iOS 17.5, iPadOS 17.5, macOS Sonoma 14.5, Available for Testing
• - Opinion: Shiny Keys on MacBook Air & Pro Are Ugly and Shouldn’t Happen
• - MacOS Ventura 13.6.6 & Safari 17.4.1 Update Available

iPhone / iPad

• - How to Use the Latest GPT 4 & DALL-E 3 Free on iPhone & iPad with Copilot
• - How to Bulk Image Edit on iPhone & iPad wth Copy & Paste Edits to Photos
• - What Does the Bell with Line Through It Mean in Messages? Bell Icon on iPhone, iPad, & Mac Explained
• - iOS 16.7.7 & iPadOS 16.7.7 Released for Older iPhone & iPad Models
• - Fix a Repeating “Trust This Computer” Alert on iPhone & iPad
• - Make a Website Your Mac Wallpaper with Plash
• - 15 Mail Keyboard Shortcuts for Mac
• - How to Use Hover Text on Mac to Magnify On-Screen Text
• - What’s a PXM File & How Do You Open It?
• - Fix “warning: unable to access /Users/Name/.config/git/attributes Permission Denied” Errors

About OSXDaily | Contact Us | Privacy Policy | Sitemap

This website is unrelated to Apple Inc

All trademarks and copyrights on this website are property of their respective owners.

© 2024 OS X Daily. All Rights Reserved. Reproduction without explicit permission is prohibited.