microsoft / microsoft/vscode-mock-debug

Unable to use the debug functionality when used as a web extension

Open
#81 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
358
Forks
200
Avg merge
24d 23h
Merged PRs (30d)
1

Description

Using this example as a web extension doesn't appear to work - at least when tested as per the VS Code docs. It appears from recent commits (e.g. https://github.com/microsoft/vscode-mock-debug/commit/354c0e93c966a498360c660805d7f2b18d76b2a5) this should be supported.

I've cloned this repo and built, and I'm trying to test as outlined at https://code.visualstudio.com/api/extension-guides/web-extensions#test-your-web-extension .

When I try I on vscode.dev (or github using the "open in github.dev" option) and load the locally built extension as outlined using npx serve and npx localtunnel I see CORS errors in the console as shown below, and the extension is not available.

Refused to connect to 'https://eager-otters-kick-67-183-2-129.loca.lt/package.json' because it violates the following Content Security Policy directive: "connect-src 'self'
            wss://vsls-prod-ins-usw2-private-relay.servicebus.windows.net
            wss://vsls-prod-rel-usw2-relay-1.servicebus.windows.net
            wss://vsls-prod-rel-usw2-relay-2.servicebus.windows.net

When I try as outlined in the docs using @vscode/test-web (e.g. running the command vscode-test-web --extensionDevelopmentPath=. . from the package.json) then I can see the extension is loaded and I can set a breakpoint in the .md file in the workspace, but on trying to debug via the command "Mock Debug: Debug File" then the debugger appears to launch but just sits there, and in the console output I see the below error (truncated):

Uncaught (in promise) Error (FileSystemError): Unable to read file '/vscode-test-web://mount/README.md' (Unavailable (FileSystemError): Error: No file system handle registered (/vscode-test-web:/))
	at Yt._handleError (../../../vs/workbench/api/worker/extensionHostWorker.js:76:30420)
	at Object.readFile (../../../vs/workbench/api/worker/extensionHostWorker.js:76:28894)
	at async Object.readFile (http://localhost:3000/static/devextensions/dist/web-extension.js#vscode-extension:4303:12)
	at async MockRuntime.loadSource (http://localhost:3000/static/devextensions/dist/web-extension.js#vscode-extension:3335:31)
	at async MockRuntime.verifyBreakpoints (http://localhost:3000/static/devextensions/dist/web-extension.js#vscode-extension:3462:7)
	at async MockRuntime.setBreakPoint (http://localhost:3000/static/devextensions/dist/web-extension.js#vscode-extension:3241:5)
	at async eval (http://localhost:3000/static/devextensions/dist/web-extension.js#vscode-extension:3652:38)
	at async Promise.all (index 0)
at async _MockDebugSession.setBreakPointsRequest (http://localhost:3000/static/devextensions/dist/web-extension.js#vscode-extension:3657:31)

Something I'm doing wrong? Are the docs wrong (or incomplete)? Or is there an issue here? Thanks.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the package.json command for @vscode/test-web and reproduce the failure in vscode.dev or the local test web environment. Trace the web-extension.js stack around MockRuntime.loadSource and verify how README.md is accessed. Done means the web extension loads and Mock Debug: Debug File can start without the reported file-system or connection errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
node.js, typescript, vscode
Domain
devtools, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.