Open source files in visual studio code doesn't work

[grass29]

I followed this guide: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/sources/opening-sources-in-vscode

1. In Devtools I've checked:

• Open source files in visual studio code
• Save devtools changes to disk

2. Added the project folder.
3. Clicked allow when prompted.
4. When I go to Elements panel, and look at styles section, I see that it shows the "Linked" icon (
   
   ) and when hovering over the icon it says "Linked to ". The file path is correct. Same applies to all the other source mapped files in "Sources". Sourcemaps work correctly in the project.
5. If I edit the file in Devtools and do Ctrl+S, it successfully saves the changes to disk.
6. I can also right click the file in Sources and choose "open containing folder", and it successfully does so.

But clicking the linked icon or the file name (for styles, for example), opens them in the Sources panel. It doesn't open them in VSCode.

Or did I misunderstand this paragraph:
"DevTools opens an instance of Visual Studio Code and shows all the files in the root folder. DevTools also opens the file you've selected, scrolled to the correct line of the CSS selector."

I have an instance of VSCode already running for this root folder.

I'm on Linux.
Edge version: 112.0.1722.34

AB#44318339

[captainbrosset]

Thanks for reporting this, and sorry about the delay replying. Let me flag this up for the team to investigate.

[jeremyvienney]

I have the same issue on both last stable 119 version and canary Version 120.0.2208.0 on ARM Macbook M1 with macos Sonoma 14.1.1

[royalone]

exact same issue
windows 10
Edge 119.0.2151.72
VSCode:

Version: 1.84.2 (system setup)
Commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
Date: 2023-11-09T10:51:52.184Z
Electron: 25.9.2
ElectronBuildId: 24603566
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Windows_NT x64 10.0.19045

[captainbrosset]

Save devtools changes to disk
Added the project folder.

In theory, the Open source files in Visual Studio Code experiment doesn't need any workspaces to be set beforehand.

The way it's supposed to work is:

• Enable the Open source files in Visual Studio Code experiment under Settings.
• Restart DevTools for the experiment to apply.
• Open a local file (i.e. file:// URL) or a local server (i.e. localhost domain).
  DevTools asks if you want to sync to a local root folder in a notification banner above DevTools.
• Click Set root folder.
  DevTools asks for permission to write to the root folder.
• Click Allow.

After this initial set up, clicking on CSS file links in the Styles panel should open the relevant files in VS Code.

I just tested this now, and I'm not seeing the notification banner appear after I go to some localhost path. So there's definitely a bug here.

[royalone]

For me, I can also follow the exact steps you mentioned above to the same result. I do get the notification banner, but after I've clicked allow, nothing seems to change, and clicking the CSS file link still just takes me to docs page

[captainbrosset]

Thanks for confirming. Interesting that you do see the banner. That's a good clue for us to investigate.
We'll report more after the team has prioritized and started investigating the bug.

[royalone]

Any update on this yet? The behaviour for me seems to have changed recently. Now clicking a CSS file link will take me to the file in the devtools sources tab. Same behaviour if I were to click a file link in the console tab. Previously these actions would take me to the docs page.

(note that the linked icon with a green dot appears correctly for the CSS files and its tooltip is the path to the correct file. There is no icon for file links in the console tab)

[captainbrosset]

No update to share at this point yet unfortunately. But thank you for your latest comment, it'll give this issue a nice gentle ping to try and get it up the list.

[DEAN-Cherry]

same issue for me. It used to be vaild but after some Edge regular update, both Edge and Edge Beta won't work.

[JJKEB]

I also don't have the "open source files in visual studio code" function working. I tried formatting and reinstalling it to see if it was a register error, but it still doesn't work. When I click on the style file for both edge dev and edge canary, the vscode doesn't run and goes to the source tab.

[maxwellhibbert]

This would be such a handy feature if it worked.

[fcFn]

I wonder if anyone ever managed to get it to work? For example it won't work with CRA as mentioned in the docs, but does anyone know which frameworks it does work with?

Is the workspace feature relevant to opening sources in VS Code instead of the DevTools built-in code editor? I think so, but I'm not sure.