Safari Web inspector keeps disconnecting

Question

I\'ve Safari 8.0.6 with iOS 8.3 on my iPad, while debugging through Web Inspector on my Mac (10.10.3), the connection keeps on

Answer 1

This is only necessary for physical devices. Physical devices can be forcefully disconnected by Safari if the device's battery is full. ("Full battery? Well then, let's just disconnect you as you don't need to charge anymore -- and there goes your debugging session too...")

You will want to select Connect via Network in Develop > [device], and then attach your debugger to the page you want to debug. If you do not have the Develop menu in Safari, go to Safari > Preferences > Advanced and select Show Develop menu in menu bar.

If this doesn't work, you may try upgrading your OS/Safari through the App Store first.

If things are still breaking, disconnect your iOS device. Go into your iOS device into Settings > Safari > Web Inspector and turn it off and then back on. Force quit out of Safari. Re-plug in your iOS device and start up Safari again and re-attach your iOS device through Safari > Develop menu.

Answer 2

09-07-2020

Still this issue on Latest MacOs (Catalina 10.15.5) on Safari (13.1.1)

Solution on Ionic/Capacitor:

ionic cap run ios -l --external --source-map=false

Answer 3

Working Solution (as of 24th Mar 2020)

Well, after so many trials and opening thousands of blog posts to figure out a solution, I managed to get it working without a single case of failure.

For me, this has been always a problem with my Ionic+Cordova application.

My subconscious mind started to think about this problem when I saw that this issue (of Safari getting disconnected) is not there when I run a plain simple Cordova or Ionic application. And then suddenly, I tried another thing and it worked.

Basically, the Safari web inspector disconnects when the size of any files are too large (not sure about the limit). Maybe, some image, some script, and CSS. In my case, it used to because of the JavaScript & their source map files.

So, when I started to run my iOS application without source maps, the problem is gone. For that, all I had to do is to pass --source-map=false to my ionic cordova commands like:

ionic cordova run ios --source-map=false
ionic cordova run ios -lc --source-map=false

I wrote a small article about this to elaborate this in detail https://medium.com/wizpanda/a-small-tip-to-speed-up-development-with-angular-or-ionic-d5764f639c0c

Original Answer

Most of the answers listed here worked for me for a while but after a few hours they also stopped working and my Safari web console again keeps disconnecting as it opens.

Other few options that worked for me:

Option 1 - Empty Cache From Safari

Safari on MacOS -> Develop -> Empty Cache

Option 2 - Clear Trusted Computers

On iOS Device -> Settings -> Developer -> Clear Trusted Computers then reconnect the USB cable and then try to debug again

Option 3 - Make the debugger fool (as of 14th Jan 2019)

This solution is working for a long time now. Since this is an issue related to connection between iOS & Mac so I opened my Console app and just kept my iPhone selected. (This is somehow kept my iOS device connected to my Mac)

Then opening the Developer's console on Safari worked fine for me without disconnecting.

Option 4 - Run via Xcode

This is also a kind of workaround and a hack to see it functional. You can basically prepare your iOS app by ionic cordova prepare ios and then run the app using Xcode and deploy it to your iPhone.

At least, I'm able to see the console logs and sometimes, it even works with Safari web inspector.

Option 5 - Run on iPhone simulators

I think this is the most working solution. This option is suitable when your system is not running too many applications as firing a simulator suckup a good amount of system resources.

Basically, instead of running your app on a real device, run your app in an iPhone simulator via Xcode and debug it normally in your Safari web inspector and this problem will not occur.

This is probably because the files being transferred to Safari inspector is from the system itself.