Separate Workspace steps into Tut

Author: mikehoffms

microsoft-edge/devtools-guide-chromium/changes/changes-tool.md

@@ -105,7 +105,7 @@ If green circles stop appearing on files in DevTools, such as in the **Workspace
 <!-- ====================================================================== -->
 ## See also
 
-* [Edit and save files in a workspace](../workspaces/index.md) - **Sources** tool > **Workspace** tab
+* [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md)
 * [Override webpage resources with local copies (Overrides tab)](../javascript/overrides.md) - **Sources** tool > **Overrides** tab
 * [Sources tool overview](../sources/index.md)
    * [Display or edit source files using the Quick source tool](../quick-source/quick-source-tool.md)

microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool.md

@@ -24,7 +24,7 @@ The main place to view source files in the DevTools is within the **Sources** to
 
 To display the **Quick source** tool in **Quick View** at the bottom of DevTools, a tool other than the **Sources** tool must be open in the **Activity Bar** at the top of DevTools.
 
-The **Quick source** tool provides an alternative display of the files that are open in the **Sources** tool.  The **Quick source** tool has a subset of features.  For full features, temporarily switch to the **Sources** tool.
+The **Quick source** tool provides an alternative display of the files that are open in the **Sources** tool.  The **Quick source** tool has a subset of features.  For full features, use the **Sources** tool.
 
 If you open or close a file in one tool, the file is opened or closed in the other tool.  In both tools, there's a tab for each open file.
 
@@ -44,7 +44,7 @@ To view source files while using a tool than the **Sources** tool in the **Activ
 
 1. In the **Activity Bar** at the top of DevTools, select the **Sources** (![The Sources tool icon](./quick-source-tool-images/sources-icon.png)) tool.
 
-1. In the **Sources** tool, in the **Page** tab, select one or more files, such as `to-do.js`.
+1. In the **Sources** (![The Sources tool icon](./quick-source-tool-images/sources-icon.png)) tool, in the **Page** tab, select one or more files, such as `to-do.js`.
 
    The tabs for the selected files are opened in the **Sources** tool:
 
@@ -74,7 +74,9 @@ By selecting a local folder as a **Workspace** in the **Sources** tool, you can
 To edit source files in the **Quick source** tool:
 
 1. Have access to your source files locally, such as a cloned repo.  See [Have local source files, such as a cloned repo](#have-local-source-files-such-as-a-cloned-repo), below.
-1. In the **Workspace** tab in the **Sources** tool, add a local folder of source files.  See [Select a local folder of source files as the Workspace](#select-a-local-folder-of-source-files-as-the-workspace), below.
+
+1. In the **Workspace** tab in the **Sources** (![The Sources tool icon](./quick-source-tool-images/sources-icon.png)) tool, add a local folder of source files.  See [Select a local folder of source files as the Workspace](#select-a-local-folder-of-source-files-as-the-workspace), below.
+
 1. In the **Activity Bar**, select a tool other than the **Sources** tool, such as the **Elements** tool.  Then in the **Quick View** panel at the bottom of DevTools, open the **Quick source** tool.  See [Open the Quick source tool](#open-the-quick-source-tool), below.
 
 These steps are detailed below.
@@ -116,7 +118,7 @@ For example, if not done already, clone the **MicrosoftEdge / Demos** repo to yo
    ```
 
    For details about cloning a repo, see:
-   * [Clone the Edge Demos repo to your drive](../sample-code/sample-code.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_.<!-- todo: show git bash, not only VS Code's Source Control pane -->
+   * [Clone the Edge Demos repo to your drive](../sample-code/sample-code.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_.
    * [Clone the WebView2Samples repo](../../webview2/how-to/machine-setup.md#clone-the-webview2samples-repo) in _Set up your Dev environment for WebView2_.  Shows a different sample repo, but shows steps for several tools.
    * [Cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) - GitHub docs.
 
@@ -197,7 +199,7 @@ Continue with the next section.
 
    ![The Sources tool with a file selected](./quick-source-tool-images/sources-tool-with-file-selected.png)
 
-1. In the **Activity Bar** at the top of DevTools, select a tool other than the **Sources** tool, such as the **Elements** tool.
+1. In the **Activity Bar** at the top of DevTools, select a tool other than the **Sources** (![The Sources tool icon](./quick-source-tool-images/sources-icon.png)) tool, such as the **Elements**  (![The Elements tool icon](./quick-source-tool-images/elements-tool-icon.png)) tool.
 
    The **Quick source** tool expands in **Quick View** at the bottom of DevTools, and has a tab for each open file:
 
@@ -213,7 +215,7 @@ Continue with the next section.
 
 Suppose you want to continue viewing the **Elements** tool, but you want to simultaneously view and edit the source files that were opened via the **Sources** tool.
 
-1. Continuing from above, in the **Activity Bar**, select a tool other than the **Sources** tool, such as the **Elements** tool.
+1. Continuing from above, in the **Activity Bar** at the top of DevTools, select a tool other than the **Sources** (![The Sources tool icon](./quick-source-tool-images/sources-icon.png)) tool, such as the **Elements**  (![The Elements tool icon](./quick-source-tool-images/elements-tool-icon.png)) tool.
 
 1. If the **Quick View** toolbar isn't shown at the bottom of DevTools, press **Esc**.
 
@@ -253,8 +255,8 @@ Now, when you edit the folder's files in DevTools, the edits are not only made t
 
 See also:
 * [Add a local folder to the workspace, to use DevTools to edit files and save changes to disk](../sources/index.md#add-a-local-folder-to-the-workspace-to-use-devtools-to-edit-files-and-save-changes-to-disk) in _Sources tool overview_.
-* [Edit and save files in a workspace](../workspaces/index.md)
-   * [Step 4: Save a JavaScript change to disk](../workspaces/index.md#step-4-save-a-javascript-change-to-disk) in _Edit and save files in a workspace_
+* [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md)
+   * [Step 4: Save a JavaScript change to disk](../workspaces/index.md#step-4-save-a-javascript-change-to-disk) in _Edit and save files in a workspace (Sources tool Workspace tab)_
 
 
 <!-- ====================================================================== -->
@@ -298,7 +300,7 @@ The **Quick source** tool has a streamlined UI.  Use these keyboard shortcuts.
 
 * **Ctrl+S** - Save.  If there's no longer a green "mapped" dot on the HTML, JS, or CSS file name, long-click or right-click the **Refresh** button in Microsoft Edge, and then select **Hard refresh** (**Ctrl+Shift+R**).
 
-* **Ctrl+P** - Open a file by using the **Command Menu**.  Same as going to the **Sources** tool and then clicking a file in the **Workspace** tab.
+* **Ctrl+P** - Open a file by using the **Command Menu**.  This is the same as going to the **Sources** tool and then clicking a file in the **Workspace** tab.
 
 
 <!-- ====================================================================== -->

microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md

@@ -61,7 +61,7 @@ last sync'd April 16, 2024
 | Inspect Network Activity | Used for [Inspect network activity](../network/index.md). | [/network-tutorial/](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial) | [Inspect Network Activity Demo](https://microsoftedge.github.io/Demos/network-tutorial/) |
 | Photo gallery | Used for [The truth about CSS selector performance](https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/). | [/photo-gallery/](https://github.com/MicrosoftEdge/Demos/tree/main/photo-gallery) | [Photo Gallery](https://microsoftedge.github.io/Demos/photo-gallery/) |
 | Slow Calendar | Simple calendar demo app to test various DevTools features such as the **Performance** tool and source map support. | [/slow-calendar/](https://github.com/MicrosoftEdge/Demos/tree/main/slow-calendar) | [Slow Calendar](https://microsoftedge.github.io/Demos/slow-calendar/public) |
-| Workspaces | Use for [Edit and save files in a workspace](../workspaces/index.md), in the **Sources** tool. | [/workspaces/](https://github.com/MicrosoftEdge/Demos/tree/main/workspaces) | [DevTools Workspaces Demo](https://microsoftedge.github.io/Demos/workspaces/) |
+| Workspaces | Used for [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md), in the **Sources** tool. | [/workspaces/](https://github.com/MicrosoftEdge/Demos/tree/main/workspaces) | [DevTools Workspaces Demo](https://microsoftedge.github.io/Demos/workspaces/) |
 
 A few of these samples are shown below.
 
@@ -302,6 +302,7 @@ Starting the server from within a specific demo directory:
 
 ```
 $ cd "C:\Users\localAccount\GitHub\Demos\demo-to-do"
+$ cd ~/GitHub/Demos/demo-to-do  # alt syntax
 $ npx http-server
 ```
 
@@ -321,6 +322,7 @@ Starting the server from within the entire `\Demos\` directory:
 
 ```
 $ cd "C:\Users\localAccount\GitHub\Demos"
+$ cd ~/GitHub/Demos  # alt syntax
 $ npx http-server
 ```
 
@@ -351,7 +353,7 @@ To edit files in the **Sources** tool, before doing the steps in this section, y
 1. Select the **Sources** tool, and then select the **Page** tab or the **Workspace** tab.
 
 See also:
-* [Edit and save files in a workspace](../workspaces/index.md) - to open a local folder in the **Sources** tool of DevTools in the browser.
+* [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md) - to open a local folder in the **Sources** tool of DevTools in the browser.
 
 
 <!-- ------------------------------ -->
@@ -447,7 +449,7 @@ When you run a localhost server and start it within a cloned repo folder, such a
 ## See also
 
 Opening and editing files:
-* [Edit and save files in a workspace](../workspaces/index.md) - to open a local folder in the **Sources** tool of DevTools in the browser.
+* [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md) - Use DevTools as an in-browser Integrated Development Environment (IDE).
 * [Add a local folder to the workspace, to use DevTools to edit files and save changes to disk](../sources/index.md#add-a-local-folder-to-the-workspace-to-use-devtools-to-edit-files-and-save-changes-to-disk) in _Sources tool overview_.
 * [Approaches compared](../../visual-studio-code/microsoft-edge-devtools-extension.md#approaches-compared) in _Microsoft Edge DevTools extension for Visual Studio Code_.  Summarizes and compares several options for editing webpage files.
 * [Microsoft Edge IDE integration](../../visual-studio-code/ide-integration.md) - Webpage app development using Visual Studio Code or Visual Studio, including Microsoft Edge DevTools.

microsoft-edge/devtools-guide-chromium/sources/index.md

@@ -200,7 +200,7 @@ In contrast, when you use a Workspace, changes that you make to your front-end c
 Workspaces work well when the JavaScript code that's returned by the server is the same as your local JavaScript source code.  Workspaces don't work as well when your workflow involves transformations on your source code, such as minification or [TypeScript](https://www.typescriptlang.org) compilation.
 
 See also:
-* [Edit and save files in a workspace](../workspaces/index.md)
+* [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md)
 * [Open a demo folder from the Workspace tab in the Sources tool](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-from-the-workspace-tab-in-the-sources-tool)
 
 
@@ -355,7 +355,7 @@ If you change a file, an asterisk appears next to the file name.
 *  To save changes, press **Ctrl+S** on Windows/Linux or **Command+S** on macOS.
 *  To undo a change, press **Ctrl+Z** on Windows/Linux or **Command+Z** on macOS.
 
-By default, your edits are discarded when you refresh the webpage.  For more information about how to save the changes in your local file system, see [Edit and save files in a workspace](../workspaces/index.md).
+By default, your edits are discarded when you refresh the webpage.  For more information about how to save the changes in your local file system, see [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md).
 
 
 ###### Find and Replace
@@ -451,7 +451,7 @@ See also:
 <!-- ---------- -->
 ###### The Page tab or Workspace tab in the Sources tool
 
-The **Page** or **Workspace** tab in the **Sources** tool supports directly editing a CSS file.  For example, if you edit the CSS file from the tutorial [Edit and save files in a workspace](../workspaces/index.md) to match the style rule below, the `H1` element in the upper left of the rendered webpage changes to green:
+The **Page** or **Workspace** tab in the **Sources** tool supports directly editing a CSS file.  For example, if you edit the CSS file from the tutorial [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md) to match the style rule below, the `H1` element in the upper left of the rendered webpage changes to green:
 
 ```css
 h1 {