Note about file path source maps and some cleanup

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

@@ -366,6 +366,59 @@ If you find yourself running the same debug code in the **Console** tool over an
 See [Run snippets of JavaScript on any webpage](./snippets.md).
 
 
+<!-- ====================================================================== -->
+## Use `# sourceURL` to name evaluated and inline code in DevTools
+
+To make a code block that isn't a file have a file name throughout DevTools, including in the **Sources** tool, use the `# sourceURL` pragma in a comment.
+
+Code blocks that aren't files include:
+
+* JavaScript code that's run by using the `eval()` function.
+* JavaScript code that's in a `<script>` tag.
+* CSS code that's in a `<style>` tag.
+
+When the browser runs the above kinds of code, DevTools doesn't have a file name to display these blocks of code, and the blocks of code are given generic names or don't appear at all.
+
+File names are displayed throughout the DevTools UI, such as in the following locations:
+
+* The **Navigator** pane of the **Sources** tool.
+* The **Call Stack** in the **Debugger** pane of the **Sources** tool.
+* The file's tab in the **Editor** pane of the **Sources** tool.
+* Log, warning, and error messages in the **Console** tool.
+* The flame chart in the **Performance** tool.
+
+The `# sourceURL` pragma, with syntax `//# sourceURL=my-assigned-file-name.js` or `/*# sourceURL=my-assigned-file-name.css*/`, is a special comment that gives evaluated and inline code a virtual file name throughout DevTools.
+
+Use the `# sourceURL` pragma to give a virtual file name to code blocks that aren't files, to display that file name in the **Sources** tool and throughout DevTools. For example:
+
+* For JavaScript:
+
+  ```javascript
+  function sum(a, b) {
+    return a + b;
+  }
+
+  console.log(sum(1, 2));
+
+  //# sourceURL=math-utilities.js
+  ```
+
+* For CSS:
+
+  ```css
+  .card {
+    padding: 1rem;
+    border-radius: 0.5rem;
+  }
+
+  /*# sourceURL=card-styles.css*/
+  ```
+
+As a result, DevTools displays these code blocks, along with your specified virtual file names for them (`math-utilities.js` and `card-styles.css`):
+
+![The Sources and Console tools, showing the virtual file names](./reference-images/source-url-virtual-names.png)
+
+
 <!-- ====================================================================== -->
 ## See also
 

microsoft-edge/devtools-guide-chromium/javascript/source-maps.md

@@ -6,7 +6,7 @@ ms.author: msedgedevrel
 ms.topic: conceptual
 ms.service: microsoft-edge
 ms.subservice: devtools
-ms.date: 03/02/2022
+ms.date: 01/29/2024
 ---
 <!-- Copyright Meggin Kearney and Paul Bakaus
 
@@ -27,95 +27,76 @@ To see and work with your original source code when you're debugging JavaScript
 
 Source mapping keeps your client-side code readable and debuggable, even after your build process compiles and minifies your code and combines it into a single file.  Source maps map your compiled, minified code to your original source code files.  In DevTools, you can then read and debug your familiar, original source code, instead of the unrecognizable transformed and compiled code.
 
-To use this source mapping technique, you must use pre-processors that can produce source maps.  Make sure your web server can serve source maps.
+To use source maps, you must use a tool when you build your code that can produce source maps. There are many tools available, such as:
 
-<!--
-no longer in original file:
-todo: add link to preprocessors capable of producing source maps when section is available
-/web/tools/setup/setup-preprocessors?#supported_preprocessors
--->
+* [Sass](https://sass-lang.com/) or [PostCSS](https://postcss.org/), which can produce source maps for CSS.
+* The [TypeScript](https://www.typescriptlang.org/) compiler, which compiles TypeScript to JavaScript and can produce source maps to debug the original TypeScript code.
+* The [Babel](https://babeljs.io/) transpiler which can produce both CSS and JavaScript source maps.
+* Build tools like [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/), [Vite](https://vitejs.dev/), and [Parcel](https://parceljs.org/), which can also produce source maps.
 
-
-<!-- ====================================================================== -->
-## Get started with preprocessors
-
-This article explains how to interact with JavaScript source maps in the **Sources** tool.  <!--For a first overview of what preprocessors are, how each may help, and how source maps work; see Set Up CSS & JS Preprocessors.  -->
-
-<!--
-no longer in original file:
-todo: add link to Set Up CSS & JS Preprocessors when section is available
-/web/tools/setup/setup-preprocessors#debugging-and-editing-preprocessed-content
--->
+This article explains how to enable source maps in DevTools, and how to use them to debug your code. It doesn't explain how to produce source maps in your build process. To learn more about publishing source maps to the Azure Artifacts symbol server, see [Securely debug original code by publishing source maps to the Azure Artifacts symbol server](./publish-source-maps-to-azure.md).
 
 
 <!-- ====================================================================== -->
-## Use a supported preprocessor
-
-Use a minifier that is capable of creating source maps.  <!--For the most popular options, see the preprocessor support section.  -->  For an extended view, see the [Source maps: languages, tools and other info](https://github.com/ryanseddon/source-map/wiki/Source-maps:-languages,-tools-and-other-info) wiki page.
+## Source maps in DevTools
 
-<!--
-no longer in original file:
-todo: add link to display the preprocessor support section when section is available
-/web/tools/setup/setup-preprocessors?#supported_preprocessors
--->
+Source maps from build tools cause DevTools to load your original files in addition to your minified files, and replace the minified code with the original code. For example:
 
-The following types of preprocessors are commonly used in combination with source maps:
+* In the **Sources** tool, you can see the original files and set breakpoints in them.
+* In the **Performance** tool, you can see your original function names in the flame chart.
+* In the **Console** tool, you can see your original file names and line numbers in stack traces.
 
-*  Transpilers ([Babel](https://babeljs.io), [Traceur](https://github.com/google/traceur-compiler/wiki/Getting-Started)).
-*  Compilers ([Closure Compiler](https://github.com/google/closure-compiler), [TypeScript](https://www.typescriptlang.org), [CoffeeScript](https://coffeescript.org), [Dart](https://www.dartlang.org)).
-*  Minifiers ([UglifyJS](https://github.com/mishoo/UglifyJS)).
+Meanwhile, Microsoft Edge actually runs your minified code to render the webpage. Source maps are only used by DevTools, and only for displaying source code to developers.
 
+DevTools knows how to load a source map when a `//# sourceMappingURL=` comment is found in a compiled file. For example, the following comment tells DevTools to load the source map from `http://example.com/path/to/your/sourcemap.map`:
 
-<!-- ====================================================================== -->
-## Source maps in the Sources tool
-
-Source maps from preprocessors cause DevTools to load your original files in addition to your minified ones.  You then use the originals to set breakpoints and step through code.  Meanwhile, Microsoft Edge is actually running your minified code.  The running of the code gives you the illusion of running a development site in production.
-
-When running source maps in DevTools, you should notice that the JavaScript isn't compiled, and all of the individual JavaScript files that it references are displayed.  Source maps in DevTools is using source mapping, but the underlying functionality actually runs the compiled code.
-
-Any errors, logs, and breakpoints map to the original source code, for easier debugging.
+```javascript
+//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+```
 
 
-### Enable source maps in Settings
+<!-- ====================================================================== -->
+## Enable source maps in DevTools
 
 Source maps are enabled by default.
 
 To make sure that source maps are enabled:
 
 1. To open DevTools, in Microsoft Edge, right-click a webpage, and then select **Inspect**.  Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).
 
-1. In DevTools, click **Settings** (![Settings icon](./source-maps-images/settings-gear-icon-light-theme.png)) > **Preferences**.
+1. In DevTools, click **Customize and control DevTools** (![The Customize and control DevTools icon](./source-maps-images/customize-and-control-devtools-icon.png)) > **Settings** (![Settings icon](./source-maps-images/settings-gear-icon-light-theme.png)) > **Preferences**.
 
 1. In the **Preferences** page, in the **Sources** section, make sure the **Enable JavaScript source maps** checkbox and the **Enable CSS source maps** checkbox are selected:
 
    ![The Preferences page's Sources section with the 'Enable source maps' checkboxes selected](./source-maps-images/javascript-settings-preferences-sources-enable-javascript-source-maps.png)
 
-1. In the upper right of **Settings**, click the **Close** (**x**) button.
+1. In the upper right of **Settings**, click the **Close** (![The close icon](./source-maps-images/close-icon.png)) button.
 
 
-### Debugging with source maps
+<!-- ------------------------------ -->
+#### Enable loading source maps from remote file paths
 
-When [debugging your code](index.md#step-4-step-through-the-code) and source maps are enabled, source maps are used in several places:
+By default, DevTools doesn't load source maps when the source map URL is a remote file path, such as when the source map URL starts with `file://` and targets a file that's not on the current device.
 
-*  In the **Console** tool, links from log messages to source files go to the original files, not the compiled files.
+To enable loading source maps from file paths:
 
-*  When stepping through code in the **Sources** tool, the original files are displayed in the **Navigator** pane on the left.
+1. In DevTools, click **Customize and control DevTools** (![The Customize and control DevTools icon](./source-maps-images/customize-and-control-devtools-icon.png)) > **Settings** (![Settings icon](./source-maps-images/settings-gear-icon-light-theme.png)) > **Preferences**.
 
-*  In the **Sources** tool, the links to source files that appear in the **Call Stack** of the **Debugger** pane open the original source files.
+1. In the **Preferences** page, in the **Sources** section, select the checkbox **Allow DevTools to load resources, such as source maps, from remote file paths. Disabled by default for security reasons.**
 
 
 <!-- ====================================================================== -->
-## Use `//# sourceURL` to name evaluated files in the Sources tool
+## Debug with source maps
 
-The `//# sourceURL` pragma, such as `// # sourceURL=myFileName`, is a convention that allows you to make development much easier when working with evaluated JavaScript files.  There can be space characters before or after the `#`.
+When debugging your code and when source maps are enabled, source maps are used in several places:
 
-When loading JavaScript files and evaluating them using the `eval()` function, the **Sources** tool doesn't have a file name to display these files in the **Navigator** pane. By including the following special comment in your code, you can name evaluated files, inline scripts, and styles, so that each one appears as a recognizable file name in the **Sources** tool.  For example:
+*  In the **Console** tool, links from log messages to source files go to the original files, not the compiled files.
 
-```javascript
-//# sourceURL=source.coffee
-```
+*  When stepping through code in the **Sources** tool, the original files are displayed in the **Navigator** pane on the left. When you open an original file, its original code is displayed and you can set breakpoints in it. To learn more about debugging with breakpoints in the **Sources** tool, see [Pause code with breakpoints](./breakpoints.md).
+
+*  In the **Sources** tool, the links to source files that appear in the **Call Stack** of the **Debugger** pane open the original source files.
 
-<!-- This pragma isn't part of the source map specification. -->
+*  In the **Performance** tool, the flame chart displays the original function names, not the compiled function names.
 
 
 <!-- ====================================================================== -->