重新发现 Safari 浏览器的开发者功能

准备好探索 Safari 浏览器为网页开发和设计者提供的丰富工具集吧。了解如何检查网页内容，探索响应式设计模式和 WebDriver，并了解如何开始使用模拟器和设备。我们还将向你展示如何与 Vision Pro 配对、以便检查你的 App 中的内容，以及在响应式设计模式下使用“用模拟器打开”来帮助你在任何设备上测试你的网站。

资源

相关视频

Tech Talks

开始使用网页版 Apple Pay

WWDC23

WWDC21

探索网页检查器的改进

下载

♪ 悦耳的器乐嘻哈 ♪ ♪ 大家好我是 Patrick 是 WebKit Developer Experience 团队的工程师很高兴可以为你展示 Safari 浏览器中供网站开发者使用的功能 Safari 浏览器提供了一系列功能可以帮助像你一样的网站开发和设计人员访问丰富的工具来检查你的网页、网站 App、包含 JavaScript 和网站视图的 App 和扩展等等当与 Mac 配对使用时这些工具可以在 iOS、 iPadOS、Apple tvOS 和 xrOS 上无缝运行今天我们会涵盖 Safari 浏览器中可用的开发者工具首先简要介绍在 macOS 上帮助你检查网页的工具然后我们会介绍如何在 Safari 浏览器中预览响应式布局以及在 iOS、iPadOS 和 xrOS 模拟器中进行同样的预览接下来我们将超越你的 Mac 了解如何使用 Mac 调试其他设备上运行的内容如 iPhone 或者运行 xrOS 的设备然后我们会介绍如何使用 WebDriver 以跨浏览器和跨平台的方式进行自动化测试最后我们会介绍如何使用重新设计的功能标志设置来探索未来的网页平台功能但在我们深入讨论这些话题之前如果你还没用过 Safari 浏览器的开发者功能需要先启用该功能你可以在 Safari 浏览器的设置中找到显示网站开发者功能的选项选择菜单栏中的 “Safari 浏览器” 然后选择“设置” 在设置窗口中点击“高级”标签页你就会找到显示网站开发者功能的复选框启用此设置现在已经启用了网页开发者功能我们先快速了解如何使用 Safari 浏览器中的工具来检查打开的网页我一直在努力调整此网页的背景颜色我觉得从宇航员的头盔中提取颜色会让颜色更加协调我们看看如何使用网页检查器帮助我选择一个颜色作为背景渐变的一部分显示在此页面上有两种快速打开网页检查器来检查正在处理的页面的方法首先是在开发菜单中我们今年重新进行了设计使你更容易找到设计和开发网页内容的关键工具菜单中有几个选项可以直接打开网页检查器进入一个标签页或任务但我只想打开网页检查器而不跳转到特定的标签页所以我会选择显示网页检查器但我还想为你展示另一种打开网页检查器的便捷方法在网页的任何地方按住 Control 键点击会显示上下文菜单选择检查元素不仅会显示网页检查器还会选择此元素在详细信息边栏中显示其样式和其他信息即使网页检查器可见后仍可以使用检查元素选项你可以用相同的方式选择其他元素或使用元素选择工具来查看你悬停的每个元素的信息包括选择器、边距等布局信息、形状轮廓和辅助功能角色等当你在元素选择模式中点击时在网页检查器中该元素会被选中但现在既然我已经打开了网页检查器我想看看页面的背景渐变我很想从宇航员的面罩上提取一些颜色好让宇航员更好地融入背景要编辑渐变可以点击 Styles 边栏中渐变旁边的预览样本选择想要编辑的渐变部分然后使用颜色选取器从屏幕上的某个位置提取颜色如宇航员的面罩

这个颜色太浅了不太符合我的审美可能不是个好主意我觉得之前看起来更好一些我会用 Command + Z 键撤消更改并暂时保持之前的颜色当然这只是网页检查器检查网页的其中一个功能如果你想进一步了解有关网页检查器可用工具的更多信息请观看视频 “网页检查器的新功能”以及 WWDC21 中的 “了解网页检查器的改进” 我们现在来看看另一个工具它旨在通过测试网页对用户显示设备的适应能力来帮助你完善网页设计 Safari 浏览器有一个叫响应式设计模式的工具可通过“开发”菜单中的 “进入响应式设计模式”选项来访问如果你之前使用过响应式设计模式你可能注意到我们已经进行了调整以便你可以专注于内容布局在任何屏幕尺寸下的响应能力你可以尝试比窗口更大甚至比屏幕更大的视口大小当拖动视口边缘的控制点时视口会进行缩放来继续显示整个页面重新排列文本和图像等元素来适应新的视口大小你还可以通过在视口上方输入自定义的宽度和高度来设置具体大小在宽度和高度的右侧你会看到缩放系数即视口呈现的实际大小的百分比这里的缩放系数并非 100% 因为视口的当前高度为 800 像素但窗口高度不够无法显示整个视口所以 Safari 浏览器将视口的显示缩小到全尺寸的 78% 响应式设计模式还允许你更改像素比例通过提供适应不同显示设备像素比例的图像资源和其他样式测试响应能力的额外维度在网页上有几种响应显示设备像素比例的方法包括用于图像标签的源集、在可以使用图片的地方使用的 CSS 图像集函数以及分辨率媒体查询允许你根据显示设备的像素比例微调页面的任何样式如边框大小有时你可能不仅要测试页面在 macOS 上的响应能力还要在 iOS、iPadOS 和 xrOS 上进行测试今年推出的新功能是从 Safari 浏览器快速进入模拟器模拟器是在 iOS、 iPadOS 和 xrOS 上测试网页内容的绝佳方式不需要实体设备 iOS 和 iPadOS 模拟器已包含在 Xcode 中并包括适用于这些平台的 Safari 浏览器 Xcode 可以在 Mac App Store 免费下载运行一次 Xcode 完成设置之后下次启动 Safari 浏览器时模拟器便可以使用了点击在模拟器中打开会显示已安装的模拟器列表并将当前正在运行的模拟器置于顶部以便轻松访问如果你尚未安装 Xcode 或者想要为其他设备添加模拟器你可以从菜单中的链接查看帮助文档来帮助你入门我们来在模拟器中打开当前页面该模拟器已在运行但如果模拟器尚未运行系统会为你启动它有一点需要特别注意：模拟器和 macOS 上的 Safari 浏览器之间的网页布局有差异请注意即使页面宽度大致相同 iOS 上 Safari 浏览器的页面布局看起来好像有更多的屏幕可用空间模拟器还有另一个优点：你可以测试用户在 iOS 上会进行的操作比如平滑滚动页面和轻点两下进行缩放可以确保即使没有使用 iPhone 测试也能提供出色的用户体验当你在模拟器中打开了一个网页可以在开发菜单中找到相应的模拟器然后选择要检查的模拟器中的网页使用网页检查器来进行检查网页检查器的窗口会打开检查模拟器中的所选页面除了 iOS 和 iPadOS 你还可以利用 xrOS 模拟器来测试该平台上的网页内容如果没有安装模拟器在“使用模拟器打开”菜单中选择“添加模拟器” 来进行添加模拟器安装完成后你可以像使用 iOS 模拟器一样使用 xrOS 模拟器包括如何使用 Mac 上的 Safari 浏览器检查网页内容在 Safari 浏览器的开发菜单中找到模拟器并选择要检查的内容你不仅可以从 macOS 上的 Safari 浏览器检查模拟器还可以从 Mac 上的 Safari 浏览器检查 iOS、iPadOS、 Apple tvOS 和 xrOS 设备与模拟器不同你得在使用 Mac 检查之前在设备上启用检查内容功能让你的设备提供 Safari 浏览器和其他可检查的 App 中打开的网页列表对于 iOS 和 iPadOS 你可以在设置 App 中进行此操作向下滚动并选择 “Safari 浏览器” 然后滚动到底部并选择“高级” 然后切换“网页检查器”为启用最后使用线缆将你的设备连接到 Mac 在这里我在 iPad 上打开了几个网页内容包括一个 Safari 浏览器窗口和一个主屏幕网页 App 现在我们返回到 Mac 上来检查此内容在你的 Mac 上的开发菜单中在我们之前使用的模拟器相同的位置你会看到刚刚连接的设备的条目和模拟器类似你可以看到其中可检查的内容包括在 Safari 浏览器中打开的网页主屏幕网页 App 甚至服务工作进程像之前的操作一样我们可以从菜单中选择一个可检查的内容比如主屏幕网页 App 和之前一样网页检查器会出现并从你的 Mac 上检查设备上的内容但如果不需要使用线缆来从 Mac 检查设备那岂不是很棒？我们回到 Mac 上看看如何通过网络连接到你的设备回到“开发”菜单你会看到一个“通过网络连接”的选项选择此项后只要你的 Mac 和设备在同一个网络上无需使用线缆即可连接设备启用了此设置后你可以拔下设备并通过无线连接进行检查今年新推出了功能你还可以从运行 macOS Sonoma 的 Mac 上检查 xrOS 设备但与检查 iOS 和 iPadOS 的开始操作不同为了可以在无线连接的情况下检查设备我们支持通过网络与此平台配对我们来与我同事的设备配对首先打开“设置” 选择“App” 然后再选择“Safari 浏览器” 滚动到底部选择“高级” 启用“网页检查器” 现在你需要将设备与你的 Mac 配对确保你的 Mac 和设备连接到同一个网络然后在“设置”中选择“通用” 然后选择“远程设备” 当“远程设备”屏幕显示时你的设备就准备好与 macOS 进行配对了在你的 Mac 上打开 Safari 浏览器中的“开发”菜单然后从设备的子菜单中选择“用于开发” 在你的设备上会显示一个六位数的配对码而在你的 Mac 上会出现一个窗口来输入配对码在你的 Mac 上输入此配对码输入配对码后配对将自动完成并且你的 Mac 将出现在你的设备的远程设备列表中设备配对完成后你可以像检查 iOS 设备一样使用 Mac 打开 Safari 浏览器并检查网页和其他内容元素选择模式也可以使用与先前在 macOS 上一样进入元素选择模式在网页上通过手势响应选择你想要检查的节点如果你想进一步了解更多有关为 xrOS 设计和开发网页内容的信息请观看视频 “使用 Safari 浏览器进行空间计算” 网页内容不仅限于 Safari 浏览器和网页 App Apple 平台上有超过一百万个 App 使用网页页面和 JavaScript 今年新推出一项功能让你可以在 App 的发布版本中检查该内容可能你的 App 的部分 UI 是网页内容或者你的 App 的某些部分使用 JavaScript 来控制在这些情况下可在 macOS 13.3 及更高版本、 iOS 和 iPadOS 16.4 及更高版本以及 xrOS 中使用 API 来检查你的 App 中的内容此 API 适用于 WKWebView 和 JSContext 我们建议在构建检查时为每个 JSContext 提供一个名称该名称会在 Safari 浏览器的开发菜单中显示帮助你区分多个 JSContext App 启用某些内容的检查后可以在 Safari 浏览器的开发菜单中进行检查就像检查设备上的其他网页内容一样既然可以跨设备检查和调试内容让我们来看看如何通过 WebDriver 确保内容按预期运行随着网页的发展持续测试网页确保其平稳运行非常重要 WebDriver 是一个跨浏览器的 API 用于自动化测试网页内容支持所有主流浏览器和平台无需编写针对特定浏览器的代码 WebDriver 托管一个本地网页服务器接受 HTTP 请求使其能够接受来自各种测试环境的自动化命令并提供多种可用于对网页运行自动化测试的命令例如查找元素、获取元素的辅助功能角色、执行 JavaScript 甚至截取屏幕截图大多数情况下你会使用第三方库与 WebDriver 进行交互其中常用的库是 Selenium 提供 Python、Java、 PHP、JavaScript 等编程语言的 API 下面会介绍使用 Selenium 自动化 Safari 浏览器的 Python 脚本示例此脚本使用 Safari 浏览器的默认选项创建一个驱动程序然后会导航到 webkit.org 的网页检查器文档页面到达目标页面后找到搜索字段并输入“device” 最后断言找到 Device Settings 链接完成后结束自动化会话以便 Safari 浏览器清理打开的窗口我们来运行此脚本一个带有橙色标题栏的新窗口被创建表示该窗口正在进行自动化操作可以看到测试的交互行为如同用户在输入一样其实此处的演示速度已经减慢以便让你看清楚到正在进行的测试如果以正常速度运行测试几乎在开始后立刻便结束这只是带我们领略一下 WebDriver 和 Safari 浏览器的可能性测试也可以在 iOS 和 iPadOS 模拟器以及实体 iPhone 或 iPad 上运行既然我们已经探索了现有的功能我们来看看如何探索网页平台未来的新功能网页不断演进看到潜在的未来工具和技术令人振奋在它们应用到网页浏览器之前就试用它们更是激动人心 Safari 浏览器可以让你使用新的功能标志设置来启用这些功能你可以从“开发”菜单中选择“功能标志”来打开它们功能标志在 Safari 浏览器中以前称为实验性功能功能标志按主题进行排列如动画、CSS、JavaScript、媒体等以便轻松查找功能还可以搜索功能例如我们可以搜索 color 来查找所有相关功能启用功能也非常快速只需选中复选框就可以使用相应功能了你可以快速查看已启用的功能一目了然例如在这里 CSS 瀑布流布局已启用并以粗体显示表示非默认状态

你可以在视频 “CSS 新功能”中进一步了解今年 Safari 浏览器中发布的瀑布流布局等其他 CSS 新功能你可能还注意到窗口右侧的每个功能都标有相应状态共有四种功能状态第一个状态是稳定状态代表最近在 Safari 浏览器中发布且默认启用的功能可以切换这些功能来确定功能是否存在问题或者确保你的网站在还没有支持该功能的浏览器中平稳处理它的缺失稳定的功能最终会从可切换功能列表中删除可测试功能表示某一功能尚未完全准备好投入使用但可能已准备好接受早期反馈或正处于实施过程中可测试功能可能并非完全完备但可帮助了解并改进构建功能的标准以确保规范满足网页开发者的需求这些功能默认处于禁用状态最后一种常见的功能状态是预览状态此状态适用于已准备好供开发者开始测试的功能这些功能比可测试的功能更完善但可能仍存在错误虽然这些功能在 Safari 浏览器中默认处于禁用状态但在 Safari Technology Preview 中默认启用 Safari Technology Preview 每两周左右发布一次在网页平台新功能的最新更新在所有平台的 Safari 浏览器上发布之前为开发者提供提前访问它们的机会还有一种功能状态是开发者状态开发者通过这些设置可以为开发调整 WebKit 的行为或者为测试重新启用已弃用的 API 请记住每个功能标志的默认设置决定了用户体验内容的方式还要记住更新 Safari 浏览器时功能标志会自动重置为默认状态至此已向你介绍完 Safari 浏览器中可供开发者使用的工具和功能介绍的内容可能比较粗浅除了我们今天介绍的所有功能 Safari 浏览器还有更多功能包括今年发布的功能和改进功能来帮助你调试内容我们还为网页开发者编写了新的 Safari 浏览器功能帮助文档来帮他们快速找到可用工具以及相关的使用方法此外你可以在 webkit.org 上找到有关网页检查器的详细介绍文档帮助你详细了解网页检查器的全部功能我们也非常期待听到你的建议如果遇到了错误或者想向我们提出建议帮助我们改进面向网页开发者的功能你可以在“反馈助理”中提交反馈选择“Safari 浏览器” 作为反馈的领域然后在“详细信息”下选择“开发者工具” 我们今天介绍了 Safari 浏览器中各项功能来帮助你在 Apple 平台上开发、完善和测试内容希望你能喜欢非常期待看到你构建的作品感谢观看 ♪

6:20 - HTML image source set

<img
  src="astronaut_1x.jpg"
  srcset="astronaut_2x.jpg 2x astronaut_3x.jpg 3x"
/>

6:27 - CSS image set

.starfield {
  background-image: image-set("stars_1x.jpg" 1x, "stars_2x.jpg" 2x);
}

6:32 - CSS resolution media query

@media (min-resolution: 2dppx) {
  .divider-line {
    border: 0.5px solid grey;
  }
}

13:41 - Inspectable WKWebViews and JSContexts

let webConfiguration = WKWebViewConfiguration()
let webView = WKWebView(frame: .zero, configuration: webConfiguration)

if #available(macOS 13.3, iOS 16.4, *) {
  webView.isInspectable = true
}

let jsContext = JSContext()
jsContext?.name = "Context name"

if #available(macOS 13.3, iOS 16.4, tvOS 16.4, *) {
  jsContext?.isInspectable = true
}

15:32 - WebDriver test

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.safari.options import Options as SafariOptions

options = SafariOptions()
driver = webdriver.Safari(options=options)

driver.get("https://webkit.org/web-inspector/")

search_element = driver.find_element(by=By.ID, value="search")
search_element.send_keys("device")

assert(driver.find_element(by=By.LINK_TEXT, value="Device Settings"))

driver.quit()

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。