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)

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.

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.

Sounds strange but it may be happening due to the battery being full triggering a disconnect: https://forums.developer.apple.com/thread/92290

The disconnection seems to occur when the battery of the Iphone is full. (So for the moment we turn the flash and the camera on to kill the battery while inspecting ...)

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.

This plagued me for a long time with very inconsistent behaviour, here are a few things I have found that help, I also wrote a blog post on this here.

1. Update both mac safari and ios - I have found after having the latest of both versions it started working for me, there could be debugging incompatibilities between Safari's.




2. Check that web inspector in ios is enabled - It has been known that this setting can be switched off after an upgrade, check in settings > safari > advanced > web inspector.




3. Check the port you are connected to - I have had mine plugged into a cheap hub / via apple keyboard/monitor hub and found that going directly into the mac works much better.




4. Are you using a good quality cable? - I have found that better quality / official cables that aren't worn out have better reliability when in debug.




5. Other notable observations - other people have commented that making sure cookies are enabled in safari, enabling private mode and trying whilst Xcode is open have affected the reliability of this, although I haven't seen this myself it may help others to try.

I can't say I have a solution, but a step in the right direction.

I tried using ios-webkit-debug-proxy so I can use the Chrome Dev Tools instead of Safari Dev Tools.

Note, in order to get it to work, I can to upgrade my iOS to the latest 11.4.1 and MacOS 10.13.65, then reinstall the latest versions:

brew update
brew install ios-webkit-debug-proxy
brew reinstall --HEAD libimobiledevice
brew reinstall -s ios-webkit-debug-proxy

ios_webkit_debug_proxy

After running ios_webkit_debug_proxy, I was able to try to connect through chrome://inspect and it disconnected immediately again:

Listing devices on :9221
Connected :9222 to Chet's Phone (6a028994cf281be807bf80c5557c3f2eb3fbb8b0)
Invalid packet header 0x1ffffff91ffffffa0ffffff9d == .... == 26321053
Disconnected :9222 from Chet's Phone (6a028994cf281be807bf80c5557c3f2eb3fbb8b0)

However, we have a clue! Invalid packet header. Sounds like a lower level bug somewhere. Not sure where to submit this but to though...

The most recent Safari Technology preview appears to have solved it for me.

https://developer.apple.com/safari/technology-preview/

Closing XCode first helped for me.

The magic solution worked for me:

1) Reboot your MAC

2) Reboot your Iphone

3) It works