Open a single file in debug

[Stroichik]

Is your feature request related to a problem? Please describe.

I'm a totally new guy to coding, so i'm learning first steps of JS coding and HTML design. I tried using this extension to open debug window within VSCode to see live changes to HTML file i`m currently working with and use debug feature to see how script is being processed by machine. But i cant figure out how to open my exact file with F5 (debug) command in this extension.

That is how my launch.json looks like and i tried to use same settings as with opening debug mode in Chrome, but when i use this, instead of opening file i get this

I dont understand what i`m doing wrong, and where can i read how to set up opening single file properly.

Describe the solution you'd like:

I`d like to know what am i doing wrong. Is there a guide for total noobs somewhere?

Describe alternatives you've considered:

Additional context:

[codepo8]

Hi there, we're looking into this and will come back to you soon.

[Stroichik]

Any news on how to properly open single html file for preview?

[codepo8]

It is part of our next sprint - we're currently working on fixing a lot of of other bugs reported here.

[mliao95]

@Stroichik

Try this launch.json configuration:

        {
            "type": "pwa-msedge",
            "request": "launch",
            "name": "Open index.html",
            "file": "${file}",
            "webRoot": "${workspaceFolder}/public",
        }

This should launch the file you are currently focusing on and will allow you to set breakpoints in any script that is running in the page. If you want to open the DevTools from here to inspect the DOM elements, you can click on this button in the connection toolbar:

Let me know if this worked for you or if you run into any more issues!

[Stroichik]

Well, it opens debug tools inside VSCode, but it opens file in a browser, instead of inside VScode. So its actually no point in using it, since any click on debug tools or DOM elements will make VSCode window to overlap browser window.

Main point of a plugin is to have all 3 elements in 1 window - code itself, DOM-tree and preview of actual web page - so that i could change code and see live changes on a page and DOM-tree.

[mliao95]

Try using this launch.json setting and launching the DevTools the same way above:

        {
            "type": "pwa-msedge",
            "request": "launch",
            "name": "Open index.html",
            "file": "${file}",
            "webRoot": "${workspaceFolder}/public",
            "runtimeArgs": [
                "--headless"
            ],
        }

You should be able to toggle an in-VSCode browser screencast with this button here if it isn't already open on launch:

[Stroichik]

It seems to work now. Except if i increase VSCode scale to improve visibility (i got 32" monitor), screencast will have offset point against actual place clicked. At normal 100% scale there is no offset. So i think now it works as intended.

Should i close issue now?

[mliao95]

Thanks for finding that bug about the screencast cursor offset. I created a new issue on it here: https://github.com/microsoft/vscode-edge-devtools/issues/924

As for this issue, I am going to close it out.