search

microsoft / vscode-edge-devtools

A VSCode extension that allows you to use browser devtools from within the editor. The devtools will connect to an instance of Microsoft Edge giving you the ability to alter CSS styling, perform diagnostics, and debugging. Get it now at http://aka.ms/devtools-for-code
https://docs.microsoft.com/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension
MIT License
754 stars 261 forks source link

Extension Network tab doesn't use source maps #498

Closed jake-amicus closed 2 years ago

jake-amicus commented 3 years ago

Environment (please complete the following information):

Describe the bug:

The "Initiator" trace in the extension's Network tab does not seem to be using source maps correctly when attaching to a debug instance of Edge launched with pwa-msedge, but the same tab in the browser does.

Note: All of the source maps look correct when I launch Edge directly using the vscode-edge-devtools.debug type, but then I don't have access to the debugger/breakpoints and clicking those links in the Initiator trace doesn't do anything anyway.

Repro steps:

  1. Launch Edge (pwa-msedge) from VSCode debugger
  2. Attach Edge DevTools extension to that Edge instance using the little shortcut in the debug toolbar
  3. Do network things
  4. See that the "Initiator" trace in the browser built-in tools show correct source maps with working links, but the trace in the extension still shows minified bundles.

Expected behavior:

I would expect the source maps to work the same in both the browser and extension when attaching in tandem with JS debugger.

Additional context:

Here is a rough outline of the project structure:

project/    <-- ${workspaceFolder}
  .vscode/
  packages/
    native_app/
    shared/
    web/    <-- ${webRoot}
      package.json   <-- yarn start

Here is the launch configuration I'm using to open Edge:

        {
            "name": "Launch Edge",
            "request": "launch",
            "type": "pwa-msedge",
            "url": "http://localhost:5555",
            "webRoot": "${workspaceFolder}/packages/web",
        }

I've tried messing around with the source map path overrides, but I think everything here is correct when I look at the tree in the browser source.

    "vscode-edge-devtools.sourceMapPathOverrides": {
        "webpack:///../*": "${webRoot}/../*",  // <-- I added this to handle imports from shared/ folder
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*",
        "webpack://*": "${webRoot}/*",
        "meteor://💻app/*": "${webRoot}/*"
    }

Initiator trace in the extension extension_devtools

Same Initiator trace in the browser browser_devtools

mliao95 commented 2 years ago

@jake-amicus

Hey Jake!

We have made some sourcemapping fixes in the past couple releases and I am not able to repro this bug. I am going to close out this issue, but feel free to re-activate and comment if this issue persists.