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

Posted 2023-02-15

【中文标题】调试 iPhone 时 Safari Web Inspector 不显示元素和样式面板

【英文标题】：Safari Web Inspector not Showing elements and Style Panel when debugging iPhone

【发布时间】：2016-01-04 06:52:21

【问题描述】：

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

谁能帮我找到那些面板来调试样式，我将其应用于我在 iPhone 中测试的页面元素。我能够在调试桌面 Safari 页面时看到这些面板。看截图

提前感谢您的帮助。

【问题讨论】：

developer.apple.com/library/mac/documentation/AppleApplications/…

@GobiM 我要问的是，当我在桌面 safari 中调试 iPhone 页面时，样式和元素面板丢失了。在我的屏幕截图中查看顶部的窗口

【参考方案1】：

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

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

MacOS 大苏尔 11.4 iPhone 10 ios 14.6

干杯！

【讨论】：

2021 年的正确答案！

感谢这对我有用！知道问题的实际原因是什么吗？在此之前，我在使用 Safari 的最新生产版本时从未遇到任何问题，而且我 Mac 上的所有内容都是最新的。

在主机 OS Catalina 10.15.7 上为我工作谢谢！

非常感谢。我安装了最新的 Big Sur 11.4 和最新的 iOS 14.6，在我的手机上检查网站时，网络检查器根本没有元素选项卡。最新的 Safari 技术预览版虽然有效。苹果让这个通过网络感到羞耻。

适用于我的 macOS Big Sur 11.4

【参考方案2】：

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 技术预览对我进行调试：Release 128 (Safari 15.0)

---

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

之前：

之后：

【讨论】：

这是有史以来最令人沮丧的事情，一旦隐藏起来就完全不直观，而且我 50+ % 的时间里最关心的事情

不敢相信他们为此单独申请了，非常不方便。

@IsabellaMonza 遗憾的是它不是一个单独的应用程序，它是他们的 Safari 浏览器的测试版。只是 Safari 目前无法执行此功能......但测试版正在运行developer.apple.com/safari/technology-preview

@jackhowa 是的，我希望这将在下一次更新中得到解决。无论如何感谢您的信息:)

【参考方案3】：

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

【讨论】：

我看不到元素面板。那是我的问题，那么我该如何选择使用调试器？

从您的图像中，您的箭头指向 safari 网页的网络元素，这不适用于移动设备。检查弹出窗口（web Inspector **-iphone ** ip）。此窗口显示您的 iphone 浏览器/webview 的 html 页面。从此页面中选择一个 html 标签（DOM 树），这将选择设备中的相应元素。完成后，您可以从当前源窗口的右上角查看样式窗格。

感谢您的帮助。我得到了答案，请参阅下面的答案。

【参考方案4】：

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

【参考方案5】：

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

BigSur - Download

无论你一直在使用什么。

如果您面对的是其他低版本 - try from here

【参考方案6】：

答案是，需要从下拉菜单中选择 DOM 树，如屏幕截图所示。