Safari Web inspector keeps disconnecting
There are a few things to try:
1. Test on the Xcode Simulator:
Open the iPhone simulator in Xcode and debug there with Safari Web Inspector.
Sidenote: Maybe you need to download the Safari Technology Preview
2. Reset your location and privacy settings on your device.
Settings > General > Reset > Reset Location & Privacy
3. Debugging on a real device
With this configuration it seems to work right now.
iPhone X, iOS Version 12.1.3 macOS Mojave Version 10.14.2 (18C54) Safari Version 12.0.2 (14606.3.4)
Edit 2019.08.13
Settings -> Safari -> Advanced -> Check that Webinformation is toggled on.
It was suddenly toggled off and I couldn't connect via the Web Inspector. After toggling it on, it worked.
For other devices / versions, please read further down (Maybe you can decrease your build size).
EDIT: 2018.09.20
@Chet found out, the Web Inspector keeps disconnecting for too large JS files and map files
https://stackoverflow.com/a/52338231/4641479
Issue on Github:
https://github.com/google/ios-webkit-debug-proxy/issues/275
https://github.com/google/ios-webkit-debug-proxy/issues/274
I could confirm this on a real device with a production build (1.8 MB + 2.4 MB files), the Safari Web Inspector stays always connected.
Since for the development build it is not:
Before my web inspector very rarely worked and often just stopped working - but was still open. After the safari update the web inspector opens and closes immediately. If you encounter such problems..
This will work:
Step 1. Get the latest Safari Browser
Safari: 11.1 (12605.1.33.1.2)
https://developer.apple.com/safari/download
macOS Sierra and OS X El Capitan (I assume macOS high Sierra is also supported)
Maybe you need to download the Safari Technology Preview
Step 2. Reset your location and privacy settings
On your device go to:
Settings > General > Reset > Reset Location & Privacy
Source: https://forums.developer.apple.com/thread/87181
Step 3. Connect your device
Open Safari on OS X If you had connected your iPhone device with an usb cable, disconnect it first. Now plug it in.
On OS X Safari go to:
Develop > Device name > Apply for development
Now on your phone there is a permission question. Choose trust and now you can choose the open tab on your devices safari and debug.
Happy debug!
Now the web inspector stays connected.
Do you have a lot of backgrounded apps running on your iPhone? Kill them and try again.
We showed this issue to Apple developers at WWDC, and they suspected it was due to memory constraints on the iPhone. Sure enough, killing most of our backgrounded apps resolved the issue for us.
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.