调试iPhone时，Safari Web Inspector不显示元素和样式面板

Question

我将iPhone连接到mac并且我在iPhone高级设置中启用了Web Inspector，能够在mac safari中查看页面，但无法在safari中检查任何元素及其样式。我没有看到元素面板或样式面板。

有没有人可以帮我找到那些调试样式的面板，我将这些面板应用于我在iPhone中测试的页面元素。我可以在调试桌面safari页面时看到这些面板。请参见屏幕截图

提前感谢您的帮助。

Answer 1

从Web检查器中选择任何html元素。现在在设备中它将以蓝色突出显示。右上角有展开窗口以显示样式，图层，节点选项卡。选择样式并编辑css。请参阅评论中给出的链接以获取完整的详细信息。

Answer 2

如果您在 2021 年遇到过这种问题，请下载并使用 Safari Preview 而不是常规的 Safari ?

我遇到了以下配置的问题：

• MacOS Big Sur 11.4
• iPhone 10 iOS 14.6

干杯！

Answer 3

在Safari 11.1.2中，选择“计算”选项卡后，您可以通过单击任意计算属性旁边的箭头来回到非计算属性（样式属性）级别。例如，请参阅所附屏幕截图中-webkit-border-horizontal-spacing属性旁边的灰色箭头。

Answer 4

好吧，这是 Mojave 之后 Catalina 和 BigSur 更新中的正常问题。或者，如果您要将 MacOS 升级到更高版本。我希望我们不要进入蒙特雷！ 我推荐下载 - Safari Technology Preview -

BigSur - Download

无论您使用什么。

如果您使用其他较低版本来面对它 - try from here

Answer 5

答案是，需要从屏幕截图中选择DOM树。

Answer 6

这也让我非常沮丧。它是最右上角的小侧边栏图标，其中元素标签处于打开状态。

之前：

之后：