I am a dyed-in-the-wool, old fashioned Visual Studio developer. For a while wrote C/C++ and lately C#.
Therefore, my first choice was to use that commercial, expensive (my employer pays for it) tool to deal with my multiple, brand new Javascript apps. Written in multiple tongues, I may add.
IIRC, it was here where I was told that Visual Studio Code was the alpha and the omega.
Well, I am back, asking the same question, still stuck. When I press “F5” I am given a choice, I have successfully picked a few EXCEPT the one that I really want: Google Chrome.
This seems to be a case of one arm not knowing what the other is doing. Those arms would be Microsoft and Google. A configuration specifies that the target is Chrome listening on port 9222. I check with netstat -a and nobody is listening on that port.
I’m not sure how to reproduce the issue you’re seeing, sorry — you’ve pressed “F5”? Can you share more on what steps you are trying and what error(s) you are seeing?
Oh I see, VS Code’s “Start Debugging” hotkey… I use VS Code but can’t say I’ve ever used that to serve my application. I would usually do something like:
I was in the middle of that. This is what I have done, in 2 different computers
(1) Reinstalled Visual Studio Code. Looked promising: see what happens when a new program is caught attempting to go though the Windows Defender Firewall:
(2) For measure, turned off the firewall (temporarily, of course)
(3) Manually added Google Chrome to the list of allowed applications.
This my conclusion. When it launches Chrome or Edge VS Code claims "Hey, trust me: I will be listening for you in port 8080 (or port 9222), but it lies, pure and simple.
You can easily verify with the command netstat -a.
I don’t think the “Start Debugging” command is going to do what you want, here — it’s meant for debugging headless code like a server, per https://code.visualstudio.com/docs/editor/debugging. If you need a step-through debugger for clientside code (like three.js apps) you typically use the browser’s built in debugging features for that.
What you want to do is serve static content — there are VS Code addons for that, but I don’t think VS Code does this itself. See the links in my last post.
I know it has these buttons, I just don’t think they are meant to serve static web content, which seems to be what you are expecting them to do. I’ve been using VS Code for years and never pushed any of those “Debugging” buttons when working on a frontend web app. In other words — the debugging tools of VS Code are a red herring here, I would recommend ignoring them entirely unless you need to write a server.
Once you have the content serving locally, and only once the page is appearing in the browser, then you can use the debugging features in Chrome or Firefox to set breakpoints and do any other debugging tasks: https://developers.google.com/web/tools/chrome-devtools/javascript
Here’s one possibility -and I hurry to add that I am speculating. Those pretty buttons used to work, until they found out that opening those ports was a huge security risk. They silently disabled the feature.
Such explanation fits the observed behavior. It is interesting that the working example displayed is a Mac.
Now that I am armed with more concrete info and screenshots, I am on my way to the official site for this kind of issue: Stack Overflow.
To develop a web app1 you’ll typically need three things:
(1) a web browser
(2) a ‘local server’ to host your webpage code for the web browser to read
(3) a program to edit the webpage code
It sounds like you have (1) and (3), but you don’t have (2). VS Code provides (3) but does not host files itself, unless you install addons like the LiveServer addon. The programs listed in the three.js “how to run things locally” docs are other options for (2). In any case, VS Code’s debugging feature is not related to (2).
1Technically this is describing static web apps, that don’t have a python/java/php/… server doing backend work like database read/writes. A three.js app usually doesn’t need all that, but if you did, that backend server would take the place of (2).
Unfortunately I think someone in an earlier thread advised @Raymond_Herrera to use them for this purpose. I think it is possible, but you also need to set up a config which is a bit complex.
@Raymond_Herrera in the other thread I suggested you use the live server plugin. I think you’ll have better luck if you forget about the VSCode debugging panel and either use that plugin or follow @donmccurdy’s advice here.
