I am using Visual Studio Code and would like to debug the currently open HTML file in a web browser, Microsoft Edge in this case. My project folder is the webroot of a locally installed web server (http://localhost). I have installed the VS Code extension "Microsoft Edge Tools for VS Code" and created a launch.json configuration with the following content:
{
"configurations": [
{
"name": "Launch Microsoft Edge and open the Edge DevTools",
"request": "launch",
"type": "vscode-edge-devtools.debug",
"webRoot": "${workspaceFolder}",
"url": "http://localhost/${relativeFile}"
}
]
}
However, when i launch this debugger, Microsoft Edge opens with the URL http://localhost/$%7BrelativeFile%7D, so it seems that the variable ${relativeFile} is not resolved.
How can I fix this and achieve my goal?
The relativeFile will refer to the current opened file relative to workspaceFolder. You need to specify the path of the folder opened in VS Code, the webroot
{
"configurations": [
{
"name": "Launch Microsoft Edge and open the Edge DevTools",
"request": "launch",
"type": "vscode-edge-devtools.debug",
"webRoot": "${workspaceFolder}" // "${workspaceFolder}/src"
"url": "http://localhost/${relativeFile}"
}
]
}
Ref:- https://code.visualstudio.com/docs/editor/variables-reference
Update per comments:-
%7B and %7D are ASCII codes for { and }. While you're in launch.json, check the bottom right of VScode and see what the encoding is? It should be UTF-8