Inconsistent Behavior Across two ways of accessing Edge DevTools

[AlfredoDinunzioTR]

Environment (please complete the following information):

• OS (e.g., Windows 10): Windows 11
• Extension version (e.g., 1.2.3): 2.1.6

Describe the bug: When I launch a debug session with Edge, it opens up Edge in debugging as expected. I then have found two ways to access Edge DevTools and they are behaving differently.

1. When accessed via "Open Browser Devtools" through the debug bar in VS Code, it opens the Edge DevTools tab. Source mapping for my CSS files works great on the Elements tab. On the Console tab, none of my logs have a file name / link mentioned. So that source mapping is not working.
2. If I instead access it via Edge DevTools extension in the side bar, and then click "Attach and open Microsoft Edge Tools" next to my browser window, it closes the other Edge DevTools and opens this one. They are mostly identical except in this one, the Console tab properly shows file links and the source mapping works. The elements tab when clicking on a CSS Stylesheet, gives errors. Which is identical to Error while opening CSS file in editor #787

Repro steps:

1. Launch Edge via Debugger in VS Code
2. Try hitting the "Open Browser DevTools" button in the debug bar
3. Observe that the Console tab has no files/source mapping
4. Observe that in the Elements tab, you can see and click on stylesheets and it will open in the VS Code Editor.
5. Now go to the Edge DevTools extension window in the sidebar/activity pane.
6. Hover over your Edge Browser Session and click "Attach and open Microsoft Edge Tools"
7. Observe that the Console tab now has files/source mapping and can open files in editor
8. Observe that in the Elements tab, if you click a stylesheet, you get error Error while opening file in editor. Could not open document. No workspace mapping was found for 'http://localhost:9001/styles/base/layout.css'.

Expected behavior: In either way of opening Dev Tools (or at least one method) you should be able to access source mapping for both JS and CSS. I shouldn't have to change DevTools depending on what I am troubleshooting.

Additional context: I will Include my launch.json, tasks.json, and webpack config to see if it offers any insight to why this is happening or if I am just doing something wrong.

webpack.config.mjs:

import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import { CleanWebpackPlugin } from "clean-webpack-plugin";
import CopyWebpackPlugin from "copy-webpack-plugin";
import webpack from "webpack";

const __dirname = path
  .dirname(new URL(import.meta.url).pathname)
  .replace(/^\/([a-zA-Z]):\//, "$1:/");

export default {
  entry: "./src/index.mjs",
  devtool: "eval-source-map",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
    devtoolModuleFilenameTemplate: "webpack://[namespace]/[resource-path]?[loaders]"
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
            sourceMap: true
          },
        },
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader",
            options: {
              attributes: {
                'data-source-map': true
              }
            }
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              url: true,
              import: true,
              modules: false
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
      },
    ],
  },
  resolve: {
    extensions: [".mjs", ".js"],
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      "window.$": "jquery",
    }),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/views/base.html",
      filename: "base.html",
      inject: "body",
      chunks: ["main"],
      templateParameters: {
        extends: "./base.html",
      },
    }),
    new HtmlWebpackPlugin({
      template: "./src/views/login.html",
      filename: "login.html",
      inject: "body",
    }),
    new HtmlWebpackPlugin({
      template: "./src/views/main.html",
      filename: "main.html",
      inject: "body",
    }),
    new HtmlWebpackPlugin({
      template: "./src/views/settings.html",
      filename: "settings.html",
      inject: "body",
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "../assets"),
          to: "assets",
          noErrorOnMissing: true
        },
        {
          from: path.resolve(__dirname, "../assets/favicon.ico"),
          to: "favicon.ico",
          noErrorOnMissing: true
        },
      ],
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
      watch: true,
      publicPath: '/'
    },
    compress: true,
    port: 9001,
    hot: true,
    proxy: [
      {
        context: ["/"],
        target: "http://localhost:5000",
        changeOrigin: true,
      },
    ],
    devMiddleware: {
      publicPath: "/",
      writeToDisk: true
    },
    historyApiFallback: true
  },
};

launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge with Debugger",
      "url": "http://localhost:9001",
      "webRoot": "${workspaceFolder}/frontend",
      "sourceMaps": true,
      "port": 9222,
      "runtimeArgs": [
        "--remote-debugging-port=9222",
        "--user-data-dir=${workspaceFolder}/.vscode/edge-debug-profile"
      ],
      "sourceMapPathOverrides": {
        "webpack:///*": "${workspaceFolder}/*",
        "webpack:///./src/*": "${workspaceFolder}/frontend/src/*",
        "webpack:///src/*": "${workspaceFolder}/frontend/src/*"
      },
      "userDataDir": "${workspaceFolder}/.vscode/edge-debug-profile",
      "preLaunchTask": "Start Flask Server and Web App",
      "postDebugTask": "Terminate All Tasks",
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
      ],
      "timeout": 30000
    }
  ],
  "compounds": [
    {
      "name": "Edge: DevTools + Debugger",
      "configurations": ["Launch Edge with Debugger", "Attach Edge DevTools"],
      "stopAll": true,
      "presentation": {
        "hidden": false,
        "group": "Edge",
        "order": 1
      }
    }
  ]
}

tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Start Flask Server (Dev)",
      "type": "shell",
      "command": "& \"${workspaceFolder}\\backend\\.venv\\Scripts\\Activate.ps1\"; $env:FLASK_ENV='development'; cd \"${workspaceFolder}\" && python -m backend.src.server.app",
      "options": {
        "shell": {
          "executable": "pwsh",
          "args": ["-NoProfile", "-ExecutionPolicy", "Bypass", "-Command"]
        },
        "cwd": "${workspaceFolder}"
      },
      "isBackground": true,
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": ".",
              "file": 1,
              "location": 2,
              "message": 3
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": "default_logger - INFO",
            "endsPattern": "Debugger is active!"
          }
        }
      ]
    },
    {
      "label": "Start Web App",
      "type": "shell",
      "command": "npm start",
      "options": {
        "shell": {
          "executable": "pwsh",
          "args": ["-NoProfile", "-ExecutionPolicy", "Bypass", "-Command"]
        },
        "cwd": "${workspaceFolder}/frontend"
      },
      "isBackground": true,
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": "ERROR in (.*)",
              "file": 1
            },
            {
              "regexp": "\\s+(?:\\(([0-9]+),([0-9]+)\\):\\s+)?(.*)$",
              "line": 1,
              "column": 2,
              "message": 3
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": "asset main",
            "endsPattern": "compiled successfully|compiled with .* error"
          }
        }
      ],
      "presentation": {
        "reveal": "always",
        "panel": "new",
        "clear": true
      },
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "label": "Start Flask Server and Web App",
      "dependsOn": ["Start Flask Server (Dev)", "Start Web App"],
      "dependsOrder": "parallel"
    },
    {
      "label": "Terminate All Tasks",
      "command": "echo ${input:terminate}",
      "type": "shell",
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "terminate",
      "type": "command",
      "command": "workbench.action.tasks.terminate",
      "args": "terminateAll"
    }
  ]
}

Method 1 of opening DevTools:
Method 2 of opening DevTools:
Method 1 blank console: