如何使用 Safari 开发者工具调试网站

在上线之前调试适用于 Safari 的网站至关重要。在本文中，我们将了解如何使用 Safari Developer 工具调试网站。

Safari 是 iPad、Macbook 和 iPhone 上的默认浏览器。它在浏览器首选项中排名第二，仅次于 Chrome。它的 250 多项功能为用户提供了显着的优势，使其有别于 Chrome 和 Firefox 等其他 最流行的浏览器。在此基础上，iPhone 的流行使 Safari 占据了全球智能手机市场 53.6% 的份额。

去年，Apple 的活跃设备数量大幅 增加至 15 亿。由于用户群不断增加，Apple 不断确保其所有设备的近乎完美的用户体验和优化的性能。

由于其良好的可用性和苹果设备的广泛流行，Safari 获得了广泛的用户群。如果是这种情况，为他们提供跨各种浏览器版本的理想浏览体验至关重要。但是一旦你继续启动一个网站，在遇到错误后调试它几乎是不可能的。

这就是为什么在 Safari 网站上线之前对其进行调试至关重要的原因。在本文中，我们将了解如何使用 Safari Developer 工具调试网站。

但在此之前，让我们看看为什么在 Safari 上调试网站至关重要。

让我们开始吧。

为什么要在 Safari 上调试网站？

自 2003 年以来，Safari 一直是最流行的浏览器的一部分。它的第一个版本与 Mac OS X Panther 同年发布。自 2007 年推出 iPhone 以来，所有 iOS 设备都包含了移动版的 Safari。如果用户不更改它，它就是 Apple 设备上的默认浏览器。

考虑到 Apple 设备的数量及其永无止境的版本，不同功能和屏幕分辨率的组合是巨大的。但是，当您在启动前在 Safari 上调试网站时，您的用户可以跳转到快速将他们带到您的服务和产品的窗口。

Web 开发人员必须验证网站在不同屏幕尺寸下的外观，以保持跨浏览器的兼容性。这确保了网页在各种浏览器中的正确呈现。它还提供了具有一致性的相对优越的用户体验。还必须考虑特定版本的 Safari 可能如何与设备的硬件规格交互。这增加了另一种对 Web 开发管道至关重要的验证形式。

由于 Safari 是第二受欢迎的浏览器，因此企业不应冒因网站错误而失去潜在客户的风险。毕竟，漏洞、受损的导航和其他无能会将简单的用户界面变成尖叫的噩梦！

从好的方面来说，设备功能和操作系统比 Android 设备更肤浅。根据 QA 的说法，决定测试平台也很简单。

使用 Safari 开发者工具调试网站的不同方法

在使用 Safari Developer 工具调试网站之前，必须拥有一台在 iOS 或 macOS 上运行的设备。本节将探讨使用 Safari Developer 工具调试网站的三种不同技术。

1. 在 Safari 开发者工具中使用响应式设计模式进行调试。
2. 使用 iPhone 和 iPad 上的 Web 检查器在 Safari 上调试网站。
3. 在 LambdaTest 平台上使用 Safari 开发人员工具调试网站。
4. 在 OS X 上远程调试 iOS Safari。

让我们一一了解不同的方法！

使用响应式设计模式调试网站

在有关 Safari 开发者工具的文章的这一部分，我们将了解如何使用 Safari 开发者工具调试网站的移动视图。请记住，您需要在访问响应式设计模式之前启用开发人员菜单，因为默认情况下它在 Safari 中是禁用的。

1. 启动 Safari 浏览器后，选择Preferences > Advanced
2. 选中该框并单击菜单栏中的 Show Develop 菜单

这是它的样子。

以下是借助 Safari Developers 工具查看网站移动版本的步骤；

1. 启动 Safari 并访问您选择的 URL。
2. 从菜单栏转到开发 > 进入响应式设计模式。
3. 之后，您可以通过选择 Apple 移动设备来查看所需的网站。

5. 如果您希望针对特定视口或屏幕尺寸调试特定问题，或检查特定元素，Web Inspector 是实现此目的的关键。开发人员可以在开发视图中找到它，并在激活检查器后使用元素选择器检查特定元素。

使用 Web Inspector 在 Safari 上调试网站

正如上述方法中提到的，这里是您可以使用 Web Inspector 在 Safari 上轻松调试 iPhone 和 iPad 上的网站的方法。

让我们来看看。

1. 将您的 iPad 或 iPhone 连接到机器。
2. 导航到设置 > Safari > 高级并启用Web 检查器切换按钮。

您现在可以在移动设备上的 Safari 浏览器中预览所需的网页，或使用 Safari 开发人员工具开始调试。

OS X 上 iOS Safari 的远程调试

在 OS X 上远程调试 iOS Safari 可能是一项具有挑战性的任务。但它比您想象的要简单。首先，在您的计算机上安装 Safari 浏览器版本。

1. 借助 USB 将 iPhone 或 iPad 连接到 Mac 计算机。
2. 通过选择设置 > Safari > 高级并打开Web 检查器开关，在你的设备上启用 Web 检查器。如果不是默认模式，这将打开它。
3. 成功启用 Web Inspector 后，通过选择Safari > Preferences > Advanced并选中菜单栏中的复选框，对开发菜单执行相同操作 。如果默认情况下已启用，请不要执行任何操作。
4. 在打开所需的网页之前，请确保您的设备已插入计算机。选择 Develop > iOS device name 并选择要调试的页面。
5. 现在，您可以查看和更新 DOM（文档对象模型）并可以访问 JavaScript 控制台和一些其他功能和选项。

总结！

您不会通过设计一个功能丰富的网站自动获得十亿用户。即使您设法让人们浏览您的具有受损功能的网站，他们也会遇到错误并永远离开您的平台。请记住，除了获得用户之外，保留对于确保一致的转化率和高投资回报率至关重要。界面中的每个错误都会让您的客户更接近您的竞争对手。

上述方法有助于 QA 团队使用 Safari Developer 工具调试网站。界面错误可能只是烦人并导致主要的用户体验中断。在 Safari 浏览器上进行调试对于启动在所有条件下都能正常运行的 Web 应用程序是必要的。

一些开发人员和测试人员可能会发现为 Safari 调试网站有点困难。但重要的是要记住提供令人满意的无缝用户体验对于更好地获取和保留客户是多么重要。

您对使用 Safari Developer 工具调试网站有任何疑问吗？请在下面的评论中告诉我们。