I will put my measly two cents in :) unfortunately or fortunately I had a similar problem and the above post pointed me in the right direction and I learned a little something along the way. Please see my notes below:
1) If you are on Linux, after starting vsCode run the following Linux command:
sudo lsof -i -P -n | grep LISTEN
this will allow you to see what ports are being used, in my case you can see code on 5500.
2) Assuming you have some test html/js code and vsCode has a server and debugger installed then the following files need to be configured as such:
code-workspace file:
/*
Workspace settings override user settings.
https://code.visualstudio.com/docs/getstarted/settings
Check to see if needed ports are listening: sudo lsof -i -P -n | grep LISTEN
*/
{
"folders": [
{
"path": "."
}
],
"settings": {
"liveServer.settings.AdvanceCustomBrowserCmdLine": "google-chrome-stable --remote-debugging-port=9222",
}
}
launch.json:
{
/*
Workspace settings override user settings.
https://code.visualstudio.com/docs/getstarted/settings
Check to see if needed ports are listening: sudo lsof -i -P -n | grep LISTEN
*/
"version": "0.2.0",
"configurations": [
{
"name": "Launch 127.0.0.1:5500",
"type": "chrome",
"request": "launch",
"url": "http://127.0.0.1:5500/${relativeFileDirname}/${fileBasename}",
"webRoot": "${workspaceFolder}/${relativeFileDirname}"
},
{
"name": "Attach 127.0.0.1:5500",
"type": "chrome",
"request": "attach",
"port": 9222,
"url": "http://127.0.0.1:5500/${relativeFileDirname}/${fileBasename}",
"webRoot": "${workspaceFolder}/${relativeFileDirname}/"
},
]
}
setting.json:
/*
Workspace settings override user settings.
https://code.visualstudio.com/docs/getstarted/settings
Check to see if needed ports are listening: sudo lsof -i -P -n | grep LISTEN
*/
{
"cSpell.language": "en",
"git.enableSmartCommit": true,
"git.autofetch": true,
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"liveServer.settings.donotShowInfoMsg": true,
"cSpell.userWords": [
"lsof",
"readonly"
],
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"cSpell.enabledLanguageIds": [
"asciidoc",
"c",
"cpp",
"csharp",
"css",
"git-commit",
"go",
"handlebars",
"haskell",
"html",
"jade",
"java",
"javascript",
"javascriptreact",
"json",
"jsonc",
"latex",
"less",
"markdown",
"php",
"plaintext",
"pug",
"python",
"restructuredtext",
"rust",
"scala",
"scss",
"text",
"typescript",
"typescriptreact",
"yaml",
"yml"
],
}
3) NOTE make sure all browsers are closed before starting up the 'Live Server'. Spin-up your server 'Live Server'to open the file you would like to debug as per the configuration for the chrome browser stipulated in the vsCode File>Preferences>Settings, NOTE use 127.0.0.1 I had no luck with localhost, also the default port is 5500. The browser is now launched as per the vsCode-workspace file setting "liveServer.settings.AdvanceCustomBrowserCmdLine": "google-chrome-stable --remote-debugging-port=9222", this is where the debug magic takes place. NOTE make sure all browsers are closed before starting up the 'Live Server'.
Especially check to make sure there are no chrome extension like Hangouts running, this will also prevent Chrome from opening port 9222, I had to click the Exit option on the task to kill all Chrome extension in my example:
4) Now if you run sudo lsof -i -P -n | grep LISTEN you will see vsCode 'Live Server' serving on port 127.0.0.1:5500 and the debugger doing its thing on port 127.0.0.1:9222; If you do not see both ports opened then something is not correct and you will need to confirm STEP 3) listed above.
5) You can check the web interface for the debugger by entering http://127.0.0.1:9222/ in a empty browser tab, this url will display links to every tab and extensions open and allow you to poke around with the debugger, click on the link to the file you want to debug, in my case 127.0.0.1:5500/Leason_66/index.html, this is the port and link vsCode will communicate with and re-render in the IDE Debugger.
6) Note: Make sure you are on the file you want to debug. We are almost there, now just click on the Debug Icon then go to the GREEN Play Button and select the attach option from the drop down, please note the information configured in the launch.js file is what will appear in the drop down.
7) Time for some action! Now all you have to do is click on the GREEN Play Button and the Debugger will now attach to tab you have open at 127.0.0.1:5500/<path you your file> and do its debug on port 127.0.0.1:9222
8) Happy Engineering :)
