Chrome 开发者工具的后台服务部分包含一系列 JavaScript API 工具,即使用户没有打开您的网站,您也可以通过这些工具发送和接收更新。后台服务在功能上与后台进程类似。
在后台服务部分中,您可以调试以下后台服务:
即使未打开开发者工具,Chrome 开发者工具也可以记录三天提取、同步和通知事件。这有助于确保事件按预期发送和接收。
除了后台服务事件外,开发者工具还可以:
- 显示 Chrome 已使用 Reporting API 发送或即将发送的报告。
- 只需点击一下,即可调试和测试往返缓存。
后台提取
利用 Background Fetch API,Service Worker 可以将其作为后台服务可靠地下载大型资源(例如电影或播客)。要记录三天的后台提取事件(即使开发者工具未打开),请按以下步骤操作:
- 打开开发者工具,例如此演示页面。
依次转到 Application > Background services > Background fetch,然后点击 Record。
在演示页面上,点击在本地存储资源。这会触发一些后台提取活动。DevTools 会将事件记录到表中。
点击某个活动即可在表格下方空白处查看其详细信息。
您可以关闭开发者工具,让记录运行最多三天。如需停止录制,请点击 Stop。
后台同步
借助 Background Sync API,离线 Service Worker 可以在重新建立可靠的互联网连接后向服务器发送数据。要记录三天的后台同步事件(即使开发者工具未打开),请执行以下操作:
- 打开开发者工具,例如此演示页面。
依次转到 Application > Background services > Background sync,然后点击 Record。
在演示页面上,点击 Register background sync 以注册相应的 Service Worker,然后在出现提示时点击 Allow。
Service Worker 注册属于后台同步 activity。DevTools 会将事件记录到表中。
点击某个活动即可在表格下方空白处查看其详细信息。
您可以关闭开发者工具,让记录运行最多三天。如需停止录制,请点击 Stop。
(实验性)跳出跟踪缓解措施
借助 Chrome 中的跳出跟踪缓解措施实验,您可以使用跳出跟踪技术识别和删除看似执行跨网站跟踪的网站的状态。您可以手动强制执行跟踪缓解措施,并查看处于已删除状态的网站的列表。
如需强制跟踪缓解措施,请执行以下操作:
- 在 Chrome 中阻止第三方 Cookie。依次转到并启用 > 设置 > 隐私和安全 > Cookie 及其他网站数据 > 阻止第三方 Cookie。
- 在
chrome://flags
中,将跳出跟踪缓解措施实验设置为启用且支持删除。 - 打开开发者工具(例如在演示页面上),然后依次转到应用 > 后台服务 > 跳出跟踪缓解措施。
- 在演示页面上,点击一个退回链接并等待(10 秒)以便 Chrome 记录此次退回。Issues 标签页会警告您即将删除的状态。
- 点击强制运行以立即删除状态。
通知
Service Worker 收到来自服务器的推送消息后,会使用 Notifications API 向用户显示数据。若要记录三天的通知(即使开发者工具未打开),请按以下步骤操作:
- 打开开发者工具,例如此演示页面。
依次转到 Application > Background services > Notifications,然后点击 Record。
在演示页面上,点击 Schedule Notification,然后在出现提示时点击 Allow。
等待系统显示通知。开发者工具会将通知事件记录到表中。
点击某个活动即可在表格下方空白处查看其详细信息。
您可以关闭开发者工具,让记录运行最多三天。如需停止录制,请点击 Stop。
推测加载
推测加载可让您根据您定义的推测规则近乎即时加载。这样,您的网站就可以预提取和预渲染大多数导航到的网页。
预提取功能会提前提取资源,预渲染则更进一步,会在隐藏的后台渲染程序进程中渲染整个页面。
您可以在应用 > 后台服务 > 推测加载部分中调试推测加载。此部分包含三个视图:
- 推测加载。包含当前网页的推测状态、当前网址、当前网页尝试推测加载的网页及其状态。
- 规则。包含当前页面的元素面板中的规则集以及推测的总体状态。
- 推测。包含一个表,内含推测加载尝试及其状态的相关信息。如果尝试失败,您可以在表格中点击它,查看详细信息和失败原因。
请参考此演示页面,尝试调试推测加载:
在该页面上打开开发者工具,然后依次转到应用 > 后台服务 > 推测加载。如果您看不到该网页启动的任何推测加载,请重新加载。
演示的起始页预渲染了两个页面,但未能预渲染其中一个。点击查看所有推测。
在推测中,选择状态为 Failure 的推测,以查看失败原因部分,并在底部查看详细信息。
在本例中,预渲染失败,因为网站上没有
/next3.html
页面。打开规则部分,然后点击状态,在底部查看规则集。点击规则集链接即可前往元素面板,其中显示了推测规则的定义位置。
如需查看更详细的演示,请参阅调试推测规则。
推送消息
如需向用户显示推送通知,Service Worker 必须先使用 Push Message API 从服务器接收数据。当 Service Worker 准备好显示通知时,它会使用 Notifications API。如需记录三天的推送消息(即使开发者工具未打开),请执行以下操作:
- 打开开发者工具,例如此演示页面。
依次转到 Application > Background services > Push Messaging,然后点击 Record。
在演示页面上,切换启用推送通知,出现提示时点击允许,输入消息并发送。DevTools 会将推送通知事件记录到表中。
点击某个活动即可在表格下方空白处查看其详细信息。
您可以关闭开发者工具,让记录运行最多三天。如需停止录制,请点击 Stop。
报告 API
有些错误只发生在生产环境中。您永远无法在本地或开发期间看到它们,因为真实的用户、网络和设备会改变游戏。
例如,假设您的新网站依赖于使用 document.write()
加载关键脚本的第三方软件。世界各地的新用户都会打开您的网站,但他们的连接速度可能比您测试时要慢。您不知道,当网络速度较慢时,Chrome 干预 document.write()
,因此您的网站开始出现故障。或者,您可能希望留意您的代码库可能正在使用的已废弃或即将弃用的 API。
Reporting API 旨在帮助您监控已弃用的 API 调用、网页出现安全违规行为等。您可以按照使用 Reporting API 监控 Web 应用中的说明设置报告。
要查看网页生成的报告,请执行以下操作:
- 转到
chrome://flags/#enable-experimental-web-platform-features
,将实验性网络平台功能设为已启用,然后重启 Chrome。
“Reporting API”标签页分为三个部分:
- 报告表格,其中包含有关每种报告的以下信息:
- 导致生成报告的网址
- 违规类型
- 报告状态
- 目标位置端点
- 生成时间:时间戳
- 报告正文
- Report body 预览部分。要预览报告正文,请点击报告表格中的报告。
- 端点部分,其中包含
Reporting-Endpoints
标题中配置的所有端点的概览。
报告状态
状态列会显示 Chrome 是成功发送报告、即将发送报告还是发送失败。
状态 | 说明 |
---|---|
Success |
浏览器已发送报告,端点返回了成功代码(200 或其他成功响应代码 2xx )。 |
Pending |
浏览器正在尝试发送报告。 |
Queued |
报告已生成,浏览器尚未尝试发送它。在以下两种情况下,报告会显示为 Queued :
|
MarkedForRemoval |
重试一段时间 (Queued ) 后,浏览器已停止尝试发送报告,很快便会从要发送的报告列表中移除。 |
一段时间后,系统会移除相关报告,无论这些报告是否成功发送。