Safari Web Inspector not Showing elements and Style Panel when debugging iPhone

Question

I connected iPhone to mac and I enabled Web Inspector in iPhone advanced settings, able to see the page in mac safari but not able to inspect any element and its style in safari. I am not seeing the elements panel or style panel.

Could anyone help me to find those panels to debug the styles, which i applied to page elements which I am testing in iPhone. I am able to see those panels in debugging the desktop safari pages. see the screenshot

Thanks in advance for any help.

Answer 1

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:

Answer 2

Well, This is a normal problem in Catalina and BigSur updates after Mojave. Or if you are upgrading your MacOS to the later versions. I hope we don't get in Monterey! I recommend to download - Safari Technology Preview -

BigSur - Download

with whatever you have been using.

If you are facing it with other lower versions - try from here

Answer 3

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!

Answer 4

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.

Answer 5

The Answer is , need to select the DOM Tree from the dropdown as in the screenshot.

Answer 6

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.