调试后台服务

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome 开发者工具的后台服务部分包含一组 JavaScript API 工具，可让您的网站即使在用户未打开您的网站时也能发送和接收更新。后台服务在功能上与后台进程类似。

在后台服务部分，您可以调试以下后台服务：

Chrome 开发者工具可以记录三天的提取、同步和通知事件，即使开发者工具处于关闭状态也是如此。这有助于确保事件按预期发送和接收。

除了后台服务事件之外，DevTools 还可以：

后台提取

借助 Background Fetch API，服务工件可以作为后台服务可靠地下载大型资源（例如电影或播客）。如需记录三天的后台提取事件（即使 DevTools 未打开），请执行以下操作：

  1. 例如，在此演示页面上打开开发者工具。

  2. 依次前往应用 > 后台服务 > 后台提取，然后点击 录制。 记录。

    “后台提取”窗格。

  3. 在演示页面上，点击在本地存储素材资源。这会触发一些后台提取活动。DevTools 会将事件记录到该表中。

    “Background fetch”窗格中的事件日志。

  4. 点击某个事件即可在表格下方的空白处查看其详细信息。

  5. 您可以关闭 DevTools，并让录制功能最多运行三天。如要停止录制，请点击 停止。 Stop。

后台同步

借助 Background Sync API，离线 service worker 在重新建立可靠的互联网连接后，可以将数据发送到服务器。如需记录三天的后台同步事件（即使 DevTools 未打开），请执行以下操作：

  1. 例如，在此演示页面上打开开发者工具。

  2. 依次前往应用 > 后台服务 > 后台同步，然后点击 录制。 记录。

    “后台同步”窗格。

  3. 在演示页面上，点击注册后台同步以注册相应的服务工件，并在系统提示时点击允许。

    Service Worker 注册是一项后台同步活动。DevTools 会将事件记录到该表中。

    “后台同步”窗格中的事件日志。

  4. 点击某个事件即可在表格下方的空白处查看其详细信息。

  5. 您可以关闭 DevTools，并让录制功能最多运行三天。如要停止录制，请点击 停止。 Stop。

（实验性）跳出跟踪缓解措施

借助 Chrome 中的跳出跟踪缓解措施实验，您可以识别并删除似乎使用跳出跟踪技术进行跨网站跟踪的网站的状态。您可以手动强制执行跟踪缓解措施，并查看状态已被删除的网站列表。

如需强制执行跟踪缓解措施，请执行以下操作：

  1. 在 Chrome 中阻止第三方 Cookie。依次前往 三点状菜单。 > 设置 > 安全性。 隐私和安全 > Cookie 及其他网站数据 > 单选按钮已选中。 阻止第三方 Cookie，然后将其开启。
  2. 在 chrome://flags 中，将反弹跟踪缓解措施实验设置为启用并删除。
  3. 打开开发者工具（例如，在演示页面上），然后依次前往应用 > 后台服务 > 跳出率跟踪缓解措施。
  4. 在演示页面上，点击某个跳出链接，然后等待（10 秒）Chrome 记录跳出情况。问题标签页会提醒您即将删除状态。
  5. 点击强制运行以立即删除该状态。

“跳出跟踪缓解措施”列出了状态删除。

通知

服务工件从服务器收到推送消息后，会使用 Notifications API 向用户显示数据。如需记录三天的通知（即使开发者工具未打开），请执行以下操作：

  1. 例如，在此演示页面上打开开发者工具。

  2. 依次前往应用 > 后台服务 > 通知，然后点击 录制。 记录。

    “通知”窗格。

  3. 在演示页面上，点击安排通知，然后在系统提示时点击允许。

  4. 等待显示通知。开发者工具会将通知事件记录到该表中。

    “Notifications”窗格中的事件日志。

  5. 点击某个事件即可在表格下方的空白处查看其详细信息。

  6. 您可以关闭 DevTools，并让录制功能最多运行三天。如要停止录制，请点击 停止。 Stop。

推测加载

推测性加载可根据您定义的推测规则实现几乎即时的网页加载。这样，您的网站就可以预提取和预渲染大多数导航到的网页。

预提取会提前提取资源，而预渲染则更进一步，在隐藏的后台渲染程序进程中渲染整个网页。

您可以在应用 > 后台服务 > 推测加载部分调试推测加载。该部分包含三个视图：

  • 推测加载。包含当前网页的推测状态、当前网址、当前网页尝试推测加载的网页及其状态。
  • 规则。包含 Elements 面板中当前页面的规则集以及推测的总体状态。
  • 推测。包含一个表格，其中包含有关推测性加载尝试及其状态的信息。如果某次尝试失败，您可以在表格中点击该尝试，查看详细信息和失败原因。

请尝试在此演示页面上调试推测加载：

  1. 在页面上打开 DevTools，然后依次前往应用 > 后台服务 > 推测加载。如果您没有看到该页面发起的任何推测加载，请重新加载该页面。

    此网页推测加载的网址，其中两个成功，一个失败。

  2. 演示的起始页预渲染了两个网页，但未能预渲染一个网页。点击查看所有推测。

  3. 在推测中，选择状态为失败的推测，以查看底部的失败原因部分，其中包含详细信息。

    所选的失败推测。

    在本例中，由于网站上没有 /next3.html 页面，因此预渲染失败。

  4. 打开规则部分，然后点击状态，即可在底部查看规则集。点击 Rule set（规则集）链接可前往 Elements（元素）面板，并显示推测规则的定义位置。

    包含规则集链接的“规则”部分。

如需更详细的演示，请参阅调试推测规则。

推送消息

如需向用户显示推送通知，Service Worker 必须先使用 PushMessage API 从服务器接收数据。当服务工件准备好显示通知时，它会使用 Notifications API。如需记录三天的推送消息（即使 DevTools 未打开），请执行以下操作：

  1. 例如，在此演示页面上打开开发者工具。

  2. 依次前往应用 > 后台服务 > 推送消息传递，然后点击 录制。 Record。

    “推送消息”窗格。

  3. 在演示页面上，切换启用推送通知，在系统提示时点击允许，输入消息并发送。开发者工具会将推送通知事件记录到该表中。

    “Push Messaging”窗格中的事件日志。

  4. 点击某个事件即可在表格下方的空白处查看其详细信息。

  5. 您可以关闭 DevTools，并让录制功能最多运行三天。如要停止录制，请点击 停止。 Stop。

Reporting API

某些错误仅在生产环境中发生。您在本地或开发期间从未看到过这些问题，因为真实用户、网络和设备会改变游戏规则。

例如，假设您的新网站依赖于使用 document.write() 加载关键脚本的第三方软件。世界各地的新用户会打开您的网站，但他们的网络连接速度可能比您测试时要慢。您可能不知道，在网络速度缓慢的情况下，Chrome 会干扰 document.write()，导致您的网站在这些用户的设备上开始出现问题。或者，您也可以留意代码库可能正在使用的已废弃或即将废弃的 API。

Reporting API 旨在帮助您监控已废弃的 API 调用、网页的安全违规行为等。您可以按照使用 Reporting API 监控 Web 应用中所述的方式设置报告。

如需查看网页生成的报告，请执行以下操作：

  1. 前往 chrome://flags/#enable-experimental-web-platform-features，将实验性 Web 平台功能设为已启用，然后重启 Chrome。

  2. 打开开发者工具，然后依次前往应用 > 后台服务 > Reporting API。例如，您可以查看此演示页面上的报告。

    Reporting API 中列出的报告

Reporting API 标签页分为三个部分：

  • 报告表格，其中包含每个报告的以下信息：
    • 导致生成报告的网址
    • 违规类型
    • 报告状态
    • 目标端点
    • 生成时间戳
    • 报告正文
  • 报告正文预览部分。如需预览报告正文，请点击报告表格中的相应报告。
  • 端点部分，其中概述了在 Reporting-Endpoints 标头中配置的所有端点。

报告状态

状态列会显示 Chrome 是否已成功发送报告、即将发送报告，还是发送失败。

状态 说明
Success 浏览器已发送报告，并且端点回复了成功代码（200 或其他成功响应代码 2xx）。
Pending 浏览器正在尝试发送报告。
Queued 报告已生成，但浏览器尚未尝试发送。报告会在以下两种情况下显示为 Queued：
  • 该报告是新报告，浏览器会等待更多报告到达后，再尝试发送。
  • 该报告不是新报告；浏览器已尝试发送此报告，但未能成功，正在等待重试。
MarkedForRemoval 在重试了一段时间 (Queued) 后，浏览器已停止尝试发送报告，并将很快将其从要发送的报告列表中移除。

无论报告是否成功发送，系统都会在一段时间后将其移除。