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

Moh*_*ain 8 iphone safari developer-tools ios safari-web-inspector

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

任何人都可以帮我找到那些调试样式的面板,我将其应用于我在iPhone中测试的页面元素.我可以在调试桌面safari页面时看到这些面板.看截图在此输入图像描述

在此先感谢您的帮助.

小智 44

如果您在 2021 年遇到过此类问题,请下载并使用Safari Preview而不是常规的 Safari

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

  • MacOS 大苏尔 11.4
  • 苹果 10 iOS 14.6

干杯!

  • 2021年正确答案! (3认同)

jac*_*owa 20

2021 年 7 月更新:

是的,使用 Safari Technology Preview 的另一个答案也适用于我:https : //developer.apple.com/safari/technology-preview/

使用 Big Sur 上的 Safari 进行调试时,我无法进行调试:版本 14.1.1 (16611.2.7.1.4)

使用 Big Sur 上的 Safari Technology Preview 进行调试对我有用:第 128 版 (Safari 15.0)


这对我来说也非常令人沮丧。这是小侧边栏图标小侧边栏图标 在最右上角,打开元素选项卡。

前:

前

后:

后

  • 这是有史以来最令人沮丧的事情,一旦隐藏起来就完全不直观,而我在 50% 以上的时间里最关心的事情 (2认同)

Gob*_*i M 10

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

  • 我看不到元素面板。那是我的问题,那么我如何选择使用调试器? (2认同)

Jam*_*rch 7

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

Safari Element Inspector 计算属性侧边栏


Moh*_*ain -3

答案是,需要从下拉列表中选择 DOM 树,如屏幕截图所示。在此输入图像描述