Clicking a CSS path from inspector fails with remote environment
See original GitHub issueIf you open a repo using a VS Code remote environment (issue has been tested on WSL + Containers, assuming it’s the same in SSH) and try to click on a link to a CSS file in the inspector (source map generated or otherwise) the file fails to load.
After some debugging I found that the following error was being generated:
rejected promise not handled within 1 second: Error: cannot open file:///vscode-remote%3A/wsl%252Bubuntu/home/aaron/code/github/supercharging-web-dev-toolbox/src/pages/CreateGame.module.css. Detail: Unable to read file '\vscode-remote:\wsl%2Bubuntu\home\aaron\code\github\supercharging-web-dev-toolbox\src\pages\CreateGame.module.css' (Error: Unable to resolve non-existing file '\vscode-remote:\wsl%2Bubuntu\home\aaron\code\github\supercharging-web-dev-toolbox\src\pages\CreateGame.module.css')
stack trace: Error: cannot open file:///vscode-remote%3A/wsl%252Bubuntu/home/aaron/code/github/supercharging-web-dev-toolbox/src/pages/CreateGame.module.css. Detail: Unable to read file '\vscode-remote:\wsl%2Bubuntu\home\aaron\code\github\supercharging-web-dev-toolbox\src\pages\CreateGame.module.css' (Error: Unable to resolve non-existing file '\vscode-remote:\wsl%2Bubuntu\home\aaron\code\github\supercharging-web-dev-toolbox\src\pages\CreateGame.module.css')
at vscode-file://vscode-app/c:/Program%20Files/Microsoft%20VS%20Code%20Insiders/resources/app/out/vs/workbench/workbench.desktop.main.js:2390:64553
My debugging shows that the line that the error comes from is https://github.com/microsoft/vscode-edge-devtools/blob/main/src/devtoolsPanel.ts#L309
I’ll use comments to detail my findings around a possible fix
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (5 by maintainers)
Top Results From Across the Web
css file path is right, css code is valid, but it doesn't work
Try to use Firebug/Chrome Web Inspector and see if the files load. It might be that the web user has no access rights...
Read more >Debugging CSS - Learn web development | MDN
Select an element on your page, either by right/ctrl-clicking on it and selecting Inspect, or selecting it from the HTML tree on the...
Read more >Using Page Inspector with an Integrated browser in ASP.NET ...
This tutorial shows how to enable Inspection Mode, and then quickly locate and edit markup and CSS within your web project.
Read more >CSS features reference - Chrome Developers
In the Styles pane, click the link next to a CSS rule to open the external stylesheet that defines the rule. Viewing the...
Read more >Live Editing HTML and CSS with Chrome DevTools - Lucidchart
Once the inspector is active, you can locate the HTML of any element on the page by clicking on it. Chrome will also...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks for bringing awareness to this bug, probably fell through the cracks. Adding @codepo8 and @hkal to raise visibility.
This has unfortunately gotten stale. Let me ping @vidorteg again to put this back on his radar. It’d be good to track this regression and work on a fix.