Safari Web Inspector not Showing elements and Style Panel when debugging iPhone
In Safari 11.1.2, when the 'Computed' tab is selected, you can get back up to the non-computed properties (the Style Attributes) level by clicking the arrow beside any of the computed properties. See, for example, the grey arrow next to the -webkit-border-horizontal-spacing property in my attached screenshot.
From web inspector select any html element. Now in device it will be highlighted with blue color. The top right corner having expand window to show style, Layers, Node tabs. Select Style and edit css. Refer link given in comment for complete details.
Update July, 2021:
Yes, the other answer for using Safari Technology Preview is working for me too: https://developer.apple.com/safari/technology-preview/
Debugging was broken for me with Safari on Big Sur: Version 14.1.1 (16611.2.7.1.4)
Debugging was working for me with Safari Technology Preview on Big Sur: Release 128 (Safari 15.0)
This was incredibly frustrating for me too. It's the small sidebar icon 
on the far top right, with elements tab open.
Before:
After:
If that type of problem ever happens to you in 2021, download and use Safari Preview instead of the regular Safari ð
I got the problem with the following config:
- MacOS Big Sur 11.4
- Iphone 10 iOS 14.6
Cheers!