All geek questions in one place

Safari Web Inspector does not show elements and style panel when debugging iPhone

I connected the iPhone to the Mac, and I included the web inspector in the advanced settings of the iPhone, able to see the page in Mac Safari, but could not check any element and its style in Safari. I do not see the toolbar or the style bar.

Can someone help me find these panels for debugging the styles that I applied to the page elements that I am testing on the iPhone. I can see these panels in debugging safari pages on the desktop. see screenshot enter image description here

Thanks in advance for your help.

+7
source share
4 answers

Answer: you need to select the DOM tree from the drop-down list, as shown in the screenshot. enter image here

0
source

From the web inspector, select any html element. Now in the device it will be highlighted in blue. In the upper right corner, a window opens to display the style, Layers, Node tabs. Select a style and edit the css. See the link provided in the comment for more details. enter image description here

+11
source

In Safari 11.1.2, when the Calculated tab is selected, you can return to the level of non-computed properties (style attributes) by clicking the arrow next to any of the computed properties. See, for example, the gray arrow next to -webkit-border-horizontal-spacing on my attached -webkit-border-horizontal-spacing screen.

Safari Element Inspector Computed properties sidebar

+1
source

It was incredibly unpleasant for me too. This is a small sidebar icon. small sidebar icon in the upper right corner, with the items tab open.

Before:

before

After:

after

0
source

Source: https://habr.com/ru/post/1233112/

More articles:


All Articles