服务工作者改进Service Worker improvements

本文将指导你改进开发人员工具,以使用服务工作者,以及通过每个服务工作者的网络请求。This article teaches you about improvements to developer tools for working with service workers and the network requests that pass through each one. 服务工作线程改进网络应用程序和****源工具中The service worker improvements are in the Network, Application, and Sources tools. 改进简化了以下任务。The improvements simplify the following tasks.

  • 根据服务工作者日程表进行调试。Debug based on Service Worker timelines.
    • 请求开示和启动持续时间。The start of a request and duration of the bootstrap.
    • 更新到服务工作者注册。Update to Service worker registration.
    • 使用提取事件处理程序 的请求的 运行时。The runtime of a request using the fetch event handler.
    • 用于加载客户端的所有提取事件的运行时。The runtime of all fetch events for loading a client.
  • 了解提取事件处理程序、安装事件处理程序和激活事件处理程序的运行时详细信息。Explore the runtime details of fetch event handlers, install event handlers, and activate event handlers.
  • 使用页面脚本信息进入和退出提取 事件处理程序Step into and out of fetch event handler with page script information.

这些体验跨越三个不同的开发人员工具。The experiences span three different developer tools.

  1. 网络 工具The Network tool. 选择一个通过服务工作器运行的网络请求,并访问 计时 工具中服务工作器的相应时间线。Choose a network request that runs through a service worker and access the corresponding timeline of the service worker in the Timing tool.
  2. 应用程序 工具The Application tool. 若要调试服务工作者,请导航到" 服务工作者" 工具。To debug the service workers, navigate to the Service Workers tool.
  3. 工具The Sources tool. 单步执行提取事件处理程序时访问页面脚本信息。Access page script information when stepping into fetch event handlers.

网络Network

网络工具中的服务工作线程时间线

若要访问网络工具中的服务工作者 调试功能, 请完成以下操作之一。To access the service worker debugging features in the Network tool, complete one of the following actions.

  • 在"网络" 工具中直接访问Access directly in the Network tool.
  • 在应用程序 工具中 启动。Started in the Application tool.

请求传送Request routing

为了便于可视化请求传送,日程表现在显示服务工作者的启动和 respondWith 提取事件。To make request routing easier to visualize, timelines now display the service worker start-up and the respondWith fetch events. 若要调试并可视化通过服务工作线程传递的网络请求,请完成以下操作。To debug and visualize a network request that passed through a service worker, complete the following actions.

  1. 选择通过服务工作者发送的网络请求。Choose the network request that went through a service worker.
  2. 打开 计时 工具。Open the Timing tool.

Fetch 事件Fetch events

若要了解有关 respondWith 提取事件更多信息,请选择 左侧的下拉箭头 respondWithTo learn more about the respondWith fetch events, choose the dropdown arrow to the left of the respondWith. 若要查找有关原始请求 收到的 响应的更多详细信息,请使用相应的下拉箭头。To find more details about the Original Request and Response Received, use the corresponding dropdown arrows.

应用程序Application

应用程序视图

服务工作者更新时间线Service worker update timeline

Microsoft Edge DevTools 团队在应用程序工具**** 中添加了时间线,以反映服务工作者的更新生命周期。The Microsoft Edge DevTools team added a timeline in the Application tool to reflect the update lifecycle of the service worker. 它显示安装和激活事件。It displays the installation and activation events. 每个事件都有相应的下拉箭头,可为您提供更多详细信息。Each of the events has a corresponding dropdown arrow to give you more details.

请求传送和提取事件Request routing and fetch events

现在,可以通过控制台箱中的 " 网络"工具访问服务工作者日程表。You may now access the service worker timelines through the Network tool in the console drawer. 该功能有利于性能、最大程度地减少 UI 重复,并创建更全面的调试体验。The feature benefits performance, minimizes UI duplication, and creates a more comprehensive debugging experience.

  1. 打开正在调试的服务工作线程。Open the service worker you are debugging.
  2. 选择 "网络 "按钮以打开 请求路由体验Choose the Network button to open up the request routing experience.
  3. 使用 respondWith 下拉列表获取事件请求和响应信息。Use the respondWith dropdowns for fetch event request and response information.

"网络"工具显示通过正在调试的服务工作者发送的网络请求。The Network tool displays the network requests that went through the service worker you are debugging. 自动筛选器是缩小探索范围的方法。The automatic filter is a way to narrow down your exploration.

Sources

DOM 视图

若要查找更多堆栈信息,在提取处理程序中设置一个断点。To find more stack information, set a break point in the fetch handler. 详细信息将导致在页面脚本中请求资源。The details lead to where the resource is requested in the page script. 当调试器在提取处理程序内暂停时,合并的堆栈信息将显示在面板右侧。When the debugger pauses inside a fetch handler, a combined stack information is displayed in the panel to the right. 之后,你可以四处移动堆栈框架。After that, you may move around in the stack frames.

未来工作Future work

Microsoft Edge DevTools 团队计划进一步开发缓存详细信息,并调查更多方法为渐进式 Web 应用程序开发人员改进服务工作 器调试 体验。The Microsoft Edge DevTools team plans to further develop the cache detail and are investigating more ways to improve the service worker debugging experience for Progressive Web Application developers.

联系 Microsoft Edge DevTools 团队Getting in touch with the Microsoft Edge DevTools team

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • 使用“发送反馈”图标发送反馈,或在 DevTools 中选择Alt+Shift+I \ (Windows、Linux) 或 Option+Shift+I \ (macOS)。Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • 发推 @EdgeDevToolsTweet at @EdgeDevTools.
  • 我们想要的 Web 提交建议。Submit a suggestion to The Web We Want.
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。To file bugs about this article, use the following Feedback section.

Microsoft Edge DevTools 中的“发送反馈”图标