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
744 stars 249 forks source link

unable to attach vscode path variables (${file}), etc.. to devtools, #944

Open SirBecalo opened 2 years ago

SirBecalo commented 2 years ago

Environment (please complete the following information):

Describe the bug:

unable to get my index.html to launch by default when "launch instance" is pressed, head/headless. problem encountered using relative vscode path variables: "${workspaceFolder}", "${file}". i tried in both default entrypoint and default URL fields, keeping the other at default value. i also tried setting both. i tried setting url to workspace and entrypoint to "index.html" Repro steps:

fresh install of extension, open index.html in your project folder, head to extension in activity bar, click "more settings" enter any vscode file variable with/without quotation marks such as "${workspaceFolder}" into url, inter index.html into entry point click the "+" button with hover status of "open new tab", find blank screen with this url:http://%24%7Bworkspacefolder%7D/ Expected behavior: open index.html

i wanted to load the contents of index.url by using the file url. the file url seems corrupt Additional context:

SirBecalo commented 2 years ago

interesting behavior, when i try to change the url in a launched devtools instance to http://localhost:8080/${relativeFile} t he browser automatically parses it to: http://localhost:8080/$%7BrelativeFile%7D. making me think vscode is not doing any kind of proccessing on the variable, and passing the "http://localhost:8080/${relativeFile}" in URL field of launch.json just gets passed "as is" to edge.

rioj7 commented 2 years ago

show the launch config that you use

SirBecalo commented 2 years ago

sorry for the wait, i forgot to submit (and later thought i did.) here is my current launch (but ive tried multiple)

{
    "configurations": [
        {
            "type": "pwa-msedge",
            "name": "Launch Microsoft Edge",
            "request": "launch",
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ],
            "url": "${file}", // Provide your project's url to finish configuring
            "presentation": {
                "hidden": true
            }
        },
        {
            "type": "pwa-msedge",
            "name": "Launch Microsoft Edge in headless mode",
            "request": "launch",
            "runtimeArgs": [
                "--headless",
                "--remote-debugging-port=9222"
            ],
            "url": "${file}", // Provide your project's url to finish configuring
            "presentation": {
                "hidden": true
            }
        },
        {
            "type": "vscode-edge-devtools.debug",
            "name": "Open Edge DevTools",
            "request": "attach",
            "url": "${file}", // Provide your project's url to finish configuring
            "presentation": {
                "hidden": true
            }
        }
    ]
}

note: in this instance, that was a fresh launch.json with only the url changed. ${file} should resolve to:

/home/sirbecalo/Desktop/dev/TOP/css-exercises/flex/05-flex-modal/index.html

previous launch gives this error: image

also tired to rewrite launch.json to only this:

{
    "configurations": [
        {
            "type": "vscode-edge-devtools.debug",
            "request": "launch",
            "name": "Launch Microsoft Edge and open the Edge DevTools",
            "url": "http://localhost:8080/${relativeFile}",
            "webRoot": "${workspaceFolder}"
        }

    ]
}

actually opening edge, but giving me this URL: image