Merge pull request #3432 from MicrosoftDocs/user/mikehoffms/workspace

Update docs related to Workspace tab (was "Filesystem" tab)

Author: kypflug

microsoft-edge/devtools-guide-chromium/about-tools.md

@@ -16,7 +16,7 @@ DevTools provides more than 30 tools, consisting of _Default tools_ and _More to
 <!-- ====================================================================== -->
 ## Default tools
 
-By default, the following tools are listed in the **Activity bar** at the top of DevTools:
+By default, the following tools are listed in the **Activity Bar** at the top of DevTools:
 
 * ![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png) **Inspect tool**
 * ![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png) **Device Emulation**
@@ -54,7 +54,7 @@ The **Elements**, **Console**, and **Sources** tools (tabs) are permanent, in th
 <!-- ====================================================================== -->
 ## More tools
 
-The **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) button on the **Activity bar** lists additional, optional tools that can be added to the **Activity bar**.
+The **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) button on the **Activity Bar** lists additional, optional tools that can be added to the **Activity Bar**.
 
 There's also a **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) button on the **Quick View** toolbar at the bottom of DevTools.  To show or hide the **Quick View** panel, press **Esc**; or click **Customize and control DevTools** (**...**) in the upper right, and then click **Toggle Quick View panel**.
 

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

@@ -9,8 +9,11 @@ ms.subservice: devtools
 ms.date: 11/30/2023
 ---
 # Track changes to files using the Changes tool
+<!-- https://developer.chrome.com/docs/devtools/changes (indep) -->
 
-The **Changes** tool tracks any changes that you've made to CSS or JavaScript in DevTools.  It shows you what changes to make to your actual source files after you've successfully used DevTools to modify a copy of your webpage files that are sent from the server:
+The **Changes** tool tracks any changes that you've made to CSS, JavaScript, or HTML files in DevTools.  The **Changes** tool is empty until you open files and edit them by using the **Sources** tool, **Quick source** tool, or **Elements** tool's **Styles** pane.
+
+The **Changes** tool shows you what changes to make to your actual source files after you've successfully used DevTools to modify a copy of your webpage files that are sent from the server:
 
 ![The Changes tool showing two files that have been modified, and the modifications of the selected file](changes-tool-images/changes-tool-open.png)
 
@@ -24,7 +27,7 @@ On the **Activity Bar** or **Quick View** toolbar, click the **More tools** (![T
 
 ![The 'More tools' (+) icon and menu in the Activity Bar, with the Changes tool selected](changes-tool-images/changes-tool-via-plus-menu.png)
 
-The **Changes** tool opens in the **Activity Bar** or in the **Quick View**, depending on which toolbar you used.
+The **Changes** tool opens in the **Activity Bar** or in the **Quick View** panel, depending on which toolbar you used.
 
 
 <!-- ====================================================================== -->
@@ -71,7 +74,7 @@ Clicking a modified line in the **Changes** tool opens the file in the [Sources]
 
 
 <!-- ====================================================================== -->
-## Undo all changes
+## Revert changes
 
 To undo all changes, at the bottom of the **Changes** tool, click the **Revert all changes to current file** (![The Revert all changes to current file icon](./changes-tool-images/revert-icon.png)) button:
 
@@ -86,3 +89,23 @@ When you've made a change to a minified file, the **Changes** tool enables you t
 ![Displaying a long line of code](changes-tool-images/changes.png)
 
 To scroll horizontally, click the horizontal scrollbar, or press the left or right arrow keys.
+
+
+<!-- ====================================================================== -->
+## Troubleshooting
+
+If green circles stop appearing on files in DevTools, such as in the **Workspace** tab; or if the **Changes** tool doesn't show expected changes:
+
+* With DevTools displayed, long-click or right-click the **Refresh** button in Microsoft Edge, and then select **Empty cache and hard refresh**.
+
+<!-- 
+* In DevTools, select **Customize and Control DevTools** (**...**) > **Restore defaults and refresh**. -->
+
+
+<!-- ====================================================================== -->
+## See also
+
+* [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/crash-analyzer/index.md

@@ -143,7 +143,7 @@ DevTools doesn't cache source maps when the domain name is `localhost`.  This me
 <!-- ------------------------------ -->
 #### Open the Crash analyzer tool
 
-The **Crash analyzer** tool is a Quick View tool; by default, it opens in the **Quick View** panel, so that you can use it alongside the other tools that are open in the **Activity bar**.
+The **Crash analyzer** tool is a Quick View tool; by default, it opens in the **Quick View** panel, so that you can use it alongside the other tools that are open in the **Activity Bar**.
 
 
 <!-- ---------- -->
@@ -177,7 +177,7 @@ If you want to test the **Crash analyzer** tool but you don't have a stack trace
 
 1. To open DevTools, right-click the webpage, and then select **Inspect**.  Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).  DevTools opens.
 
-1. In DevTools, on the **Activity bar**, click **Console** (![Console icon](./index-images/console-icon.png)).  The **Console** tool opens.
+1. In DevTools, on the **Activity Bar**, click **Console** (![Console icon](./index-images/console-icon.png)).  The **Console** tool opens.
 
 1. Select the error stack trace that's displayed in the **Console** tool and copy it.
 

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

@@ -26,3 +26,4 @@ Debug your HTML using the DOM tree, and inspect and work on the CSS for your web
 * [Edit CSS font styles and settings in the Styles pane](../inspect-styles/edit-fonts.md)
 * [Style editing for CSS-in-JS frameworks](../css/css-in-js.md)
 * [Get started viewing and changing the DOM](../dom/index.md)
+* [Your first website](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web) (MDN) - How to use HTML, CSS, and JavaScript to build a web page.

microsoft-edge/devtools-guide-chromium/javascript/guides/mark-content-scripts-library-code.md

@@ -23,6 +23,11 @@ ms.date: 05/04/2021
    limitations under the License.  -->
 # Add content scripts to the Ignore List
 
+<!-- todo: define _content script_
+* [Using the Content scripts tab for Microsoft Edge extensions](../../sources/index.md#using-the-content-scripts-tab-for-microsoft-edge-extensions) in _Sources tool overview_.
+* [Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) in Chrome Extensions docs.
+-->
+
 When you use the **Sources** tool to step through code, sometimes you pause on code that you don't recognize and don't want to step through, such as code for a Microsoft Edge extension that's installed.
 
 To avoid pausing on extension code:
@@ -40,6 +45,7 @@ To avoid pausing on extension code:
 ## See also
 
 * [Step 4: Step through the code](../index.md#step-4-step-through-the-code) in _Get started debugging JavaScript_
+* [Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) in Chrome Extensions docs.
 
 
 <!-- ====================================================================== -->

microsoft-edge/devtools-guide-chromium/javascript/overrides.md

@@ -9,10 +9,15 @@ ms.subservice: devtools
 ms.date: 09/25/2023
 ---
 # Override webpage resources with local copies (Overrides tab)
+<!-- equiv https://developer.chrome.com/docs/devtools/overrides -->
 
 Sometimes you need to try out some possible fixes for a webpage, but you don't have access to the source files, or changing the page requires a slow and complex build process.  You can debug and fix all kind of problems in DevTools.  But the changes don't persist; after you refresh the local file, all your work is gone.  The Overrides feature in the [Sources](../sources/index.md) tool helps you solve this problem.
 
-You can now take a resource of the current webpage and store it locally.  When you refresh the webpage, the browser doesn't load the resource from the server; instead, the browser replaces the server resource with your local copy of the resource.
+You can take a resource of the current webpage and store it locally.  When you refresh the webpage, the browser doesn't load the resource from the server; instead, the browser replaces the server resource with your local copy of the resource.  The overrides that you create are saved across reloads.
+
+The overrides feature is not intended for mapping to your source files.
+
+When you set up a folder for local overrides the first time, that folder should be empty.  DevTools then creates all of the folders and sub-folders that it needs to store overrides within it.
 
 
 <!-- ====================================================================== -->

microsoft-edge/devtools-guide-chromium/overview.md

@@ -618,21 +618,22 @@ See also:
 
 <!-- todo: remove all but ~5 links -->
 
-* [About the list of tools](about-tools.md)<!--keep link-->
-* [Inspect and change the current webpage](dom/index.md)<!--keep link?-->
-* [Emulate how your product behaves on different devices](device-mode/index.md)<!--keep link?-->
-* [Inspect, tweak, and change the styles of elements](inspect-styles/edit-fonts.md)<!--keep link?-->
-* [Debug your JavaScript](javascript/index.md)<!--keep link?-->
-* [Live console](console/index.md)<!--keep link?-->
-* [Accessibility, performance, compatibility, and security issues](issues/index.md)<!--keep link?-->
-* [Inspect the network traffic](network/index.md)<!--keep link?-->
-* [Inspect where the browser stored content](storage/sessionstorage.md)<!--keep link?-->
-* [Evaluate the performance](evaluate-performance/index.md)<!--keep link?-->
-* [Memory problems](memory-problems/index.md)<!--keep link?-->
-* [Rendering issues](rendering-tools/index.md)<!--keep link?-->
-* [Use a development environment](sources/index.md)<!--keep link?-->
-* [Sync changes in DevTools with the file system](workspaces/index.md)<!--keep link?-->
-* [Override files from the web](javascript/overrides.md)<!--keep link?-->
+* [About the list of tools](./about-tools.md)<!--keep link-->
+* [Inspect and change the current webpage](./dom/index.md)<!--keep link?-->
+* [Emulate how your product behaves on different devices](./device-mode/index.md)<!--keep link?-->
+* [Inspect, tweak, and change the styles of elements](./inspect-styles/edit-fonts.md)<!--keep link?-->
+* [Debug your JavaScript](./javascript/index.md)<!--keep link?-->
+* [Live console](./console/index.md)<!--keep link?-->
+* [Accessibility, performance, compatibility, and security issues](./issues/index.md)<!--keep link?-->
+* [Inspect the network traffic](./network/index.md)<!--keep link?-->
+* [Inspect where the browser stored content](./storage/sessionstorage.md)<!--keep link?-->
+* [Evaluate the performance](./evaluate-performance/index.md)<!--keep link?-->
+* [Memory problems](./memory-problems/index.md)<!--keep link?-->
+* [Rendering issues](./rendering-tools/index.md)<!--keep link?-->
+* [Use a development environment](./sources/index.md)<!--keep link?-->
+* [Sync changes in DevTools with the file system](./workspaces/index.md)<!--keep link?-->
+* [Override files from the web](./javascript/overrides.md)<!--keep link?-->
+* [Your first website](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web) (MDN) - How to use HTML, CSS, and JavaScript to build a web page.
 
 
 <!-- ====================================================================== -->

microsoft-edge/devtools-guide-chromium/performance/reference.md

@@ -99,7 +99,7 @@ The images in this page show DevTools undocked into its own, dedicated window. T
 <!-- upstream doesn't have this section, has section in Overview article https://developer.chrome.com/docs/devtools/performance/overview#open_the_performance_panel  -->
 
 <!-- in each section, instead of linking away to this detailed Open h2 or Overview article's Open h2, start w/ inline step:
-1. Right-click a webpage, select **Inspect**, and then in DevTools, click the **Performance** tab in the **Activity bar**.
+1. Right-click a webpage, select **Inspect**, and then in DevTools, click the **Performance** tab in the **Activity Bar**.
 -->
 
 To use the sections in this page, open the **Performance** tool in DevTools: