Remove article "Service worker improvements"

microsoft-edge/devtools/network/index.md

@@ -28,7 +28,7 @@ Use the **Network** tool to make sure the resources your webpage needs to run ar
 
 This is a step-by-step tutorial walkthrough of the **Network** tool, for inspecting network activity for a page.
 
-For an overview of the network-related DevTools features, see [Network features reference](reference.md).
+For an overview of the network-related DevTools features, see [Network features reference](./reference.md).
 
 
 <!-- ------------------------------ -->

microsoft-edge/devtools/network/reference.md

@@ -26,8 +26,7 @@ ms.date: 07/17/2025
 
 <!-- for each png, decide whether to create screenshot -->
 
-The **Network** tool has the following features, to inspect network activity for a webpage.  For a step-by-step walkthrough and introduction to the **Network** tool, see [Inspect network activity](index.md).
-
+The **Network** tool has the following features, to inspect network activity for a webpage.  For a step-by-step walkthrough and introduction to the **Network** tool, see [Inspect network activity](./index.md).
 
 **Detailed contents:**
 <!-- https://github.com/captainbrosset/WebToc -->
@@ -99,6 +98,11 @@ The **Network** tool has the following features, to inspect network activity for
    * [Hide the Filters pane](#hide-the-filters-pane)
    * [Use big request rows](#use-big-request-rows)
    * [Hide the Overview pane](#hide-the-overview-pane)
+* [Service workers](#service-workers)
+   * [Service worker timeline](#service-worker-timeline)
+   * [Request routing and fetch events](#request-routing-and-fetch-events)
+   * [Request routing](#request-routing)
+   * [Fetch events](#fetch-events)
 * [See also](#see-also)
 
 
@@ -1722,6 +1726,116 @@ By default, DevTools displays the **Overview** pane.  To hide the **Overview** p
 ![The Show Overview checkbox](./reference-images/show-overview-off.png)
 
 
+<!-- ====================================================================== -->
+## Service workers
+<!-- not in upstream -->
+
+<!-- todo: 
+The Request routing https://learn.microsoft.com/en-us/microsoft-edge/devtools/service-workers/#request-routing and Fetch events https://learn.microsoft.com/en-us/microsoft-edge/devtools/service-workers/#fetch-events sections
+should go to:
+[Timing breakdown phases explained](https://learn.microsoft.com/en-us/microsoft-edge/devtools/network/reference#timing-breakdown-phases-explained) in Network features reference: 
+
+add the `Startup` and `respondWith` phases to 
+the bullet list that's in this section, 
+and define the two phases.
+-->
+
+<!-- todo: 
+Add new h6 section after 
+[Timing breakdown phases explained](https://learn.microsoft.com/en-us/microsoft-edge/devtools/network/reference#timing-breakdown-phases-explained)
+eg [Analyze a service worker request routing]
+In the section, display 
+a screenshot of the Timing tab 
+which contains a Service Worker section, 
+including the Startup and respondWith phases.
+-->
+
+The **Network** tool helps you work with service workers and the network requests that pass through each service worker.
+
+For example, the following tasks are supported:<!-- todo: how? where? -->
+
+* Debug based on service worker timelines.<!-- todo: how? where? -->
+    * The start of a request and duration of the bootstrap.
+    * Update to service worker registration.<!-- todo: how? where? -->
+    * The runtime of a request using the [fetch event](https://developer.mozilla.org/docs/Web/API/FetchEvent) 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.<!-- todo: how? where? -->
+* Step into and out of fetch event handler with page script information, in the **Sources** tool.
+
+Features for working on service workers are in the following tools:
+
+* The **Network** tool:
+
+   * Select a network request that runs through a service worker and access the corresponding timeline of the service worker in the **Timing** tool<!-- todo: what is the Timing tool, how to nav to it, how to use it? --> within the **Network** tool.
+
+* The **Application** tool:
+
+   * To debug a service worker, use the **Service workers** page in the **Application** tool.  See [Service worker update timeline](../storage/application-tool.md#service-worker-update-timeline) in _Application tool, to manage storage_.
+
+* The **Sources** tool:
+
+   * Access page script information when stepping into fetch event handlers.  See [Viewing stack information for a service worker](../sources/index.md#viewing-stack-information-for-a-service-worker) in _Sources tool overview_.
+
+
+<!-- ------------------------------ -->
+#### Service worker timeline
+
+![Service worker timeline in the Network tool](./reference-images/sw-network-timeline.png)
+
+You can access the service worker debugging features in the **Network** tool in either of the following ways:
+
+*  Directly in the **Network** tool.
+*  Started in the **Application** tool.
+
+See also:
+* [Viewing stack information for a service worker](../sources/index.md#viewing-stack-information-for-a-service-worker) in _Sources tool overview_.
+* [Service worker update timeline](../storage/application-tool.md#service-worker-update-timeline) in _Application tool, to manage storage_.
+* [Service Worker API](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) - at MDN, about service workers.
+
+
+<!-- ------------------------------ -->
+#### Request routing and fetch events
+
+You can access service worker timelines through the **Network** tool.  This feature benefits performance, minimizes UI duplication, and creates a comprehensive debugging experience.
+
+To access the service worker timelines:
+
+1. Open a service worker.
+
+1. Click the **Network** button.
+
+   The **Timing** tab opens within the **Network** tool, showing information about request routing.
+
+1. Use the **respondWith** dropdown arrows 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.
+
+See also:
+* [Inspect network activity](./index.md)
+
+
+<!-- ------------------------------ -->
+#### Request routing
+<!-- not in upstream -->
+
+To visualize request routing, timelines display the service worker start-up and the `respondWith` fetch events.
+
+To debug and visualize a network request that passed through a service worker:
+
+1. Select the network request that went through a service worker.
+
+1. Click the **Network** button to open the **Timing** tool.<!-- todo: what is the Timing tool, how to nav to it, how to use it? -->
+
+
+<!-- ------------------------------ -->
+#### Fetch events
+<!-- not in upstream -->
+
+To learn more about the `respondWith` fetch events, click the dropdown arrow to the left of the `respondWith`.
+
+To see more details about the **Original Request** and **Response Received**, click the corresponding dropdown arrows.
+
+
 <!-- ====================================================================== -->
 ## See also
 <!-- not in upstream -->
@@ -1741,3 +1855,6 @@ Demo webpages:
 
 [![Creative Commons License](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0)
 This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0).
+
+
+

microsoft-edge/devtools/sources/index.md

@@ -27,7 +27,6 @@ Use the **Sources** tool to view, modify, and debug front-end JavaScript code, a
 
 **Detailed contents:**
 <!-- https://github.com/captainbrosset/WebToc -->
-
 * [The Navigator, Editor, and Debugger panes](#the-navigator-editor-and-debugger-panes)
 * [Using the Navigator pane to select files](#using-the-navigator-pane-to-select-files)
    * [Using the Page tab to explore resources that construct the current webpage](#using-the-page-tab-to-explore-resources-that-construct-the-current-webpage)
@@ -58,6 +57,8 @@ Use the **Sources** tool to view, modify, and debug front-end JavaScript code, a
    * [Advantages of the debugger's Watch and Scope over console.log](#advantages-of-the-debuggers-watch-and-scope-over-consolelog)
    * [Debug from Visual Studio Code directly](#debug-from-visual-studio-code-directly)
    * [Articles about debugging](#articles-about-debugging)
+* [Service workers](#service-workers)
+   * [Viewing stack information for a service worker](#viewing-stack-information-for-a-service-worker)
 * [See also](#see-also)
 
 
@@ -665,6 +666,60 @@ The following articles cover the **Debugger** pane and breakpoints:
 * [Pause your code with breakpoints](../javascript/breakpoints.md) - How to set basic and specialized breakpoints in the debugger.
 
 
+<!-- ====================================================================== -->
+## Service workers
+
+<!-- todo: 
+no need to move the content from the 
+[Sources](https://learn.microsoft.com/en-us/microsoft-edge/devtools/service-workers/#sources) section in _Service worker improvements_
+the feature is already covered enough by 
+[Change the thread context](https://learn.microsoft.com/en-us/microsoft-edge/devtools/javascript/reference#change-the-thread-context) in _JavaScript debugging features_.
+-->
+
+The **Sources** tool helps you work with service workers and the network requests that pass through each service worker.
+
+For example, the following tasks are supported:<!-- todo: how? where? -->
+
+* Debug based on service worker timelines.<!-- todo: how? where? -->
+    * The start of a request and duration of the bootstrap.
+    * Update to service worker registration.<!-- todo: how? where? -->
+    * The runtime of a request using the [fetch event](https://developer.mozilla.org/docs/Web/API/FetchEvent) 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.<!-- todo: how? where? -->
+* Step into and out of fetch event handler with page script information, in the **Sources** tool.
+
+Features for working on service workers are in the following tools:
+
+* The **Network** tool:
+
+   * Select a network request that runs through a service worker and access the corresponding timeline of the service worker in the **Timing** tool<!-- todo: what is the Timing tool, how to nav to it, how to use it? --> within the **Network** tool.  See [Service workers](../network/reference.md#service-workers) in _Network features reference_.
+
+* The **Application** tool:
+
+   * To debug a service worker, use the **Service workers** page in the **Application** tool.  See [Service worker update timeline](../storage/application-tool.md#service-worker-update-timeline) in _Application tool, to manage storage_.
+
+* The **Sources** tool:
+
+   * Access page script information when stepping into fetch event handlers.  See [Viewing stack information for a service worker](#viewing-stack-information-for-a-service-worker), below.
+
+
+<!-- ------------------------------ -->
+#### Viewing stack information for a service worker
+
+You can step into and out of a fetch event handler to find where a resource is requested in the page script.
+
+![The DOM tree](./index-images/sw-sources.png)<!-- todo: redo -->
+
+To find stack information for a service worker that's a fetch handler, 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, combined stack information is displayed in the panel to the right.  After that, you can move around in the stack frames.
+
+See also:
+* [Service workers](../network/reference.md#service-workers) in _Network features reference_.
+* [Service worker update timeline](../storage/application-tool.md#service-worker-update-timeline) in _Application tool, to manage storage_.
+* [Service Worker API](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) - at MDN, about service workers.
+
+
 <!-- ====================================================================== -->
 ## See also