I am a dyed-in-the-wool, old fashioned Visual Studio developer. For a while wrote C/C++ and lately C#.
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:
npm install --global serve
But any of the options described by https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally will also work. Or if you prefer an IDE: https://mo-zaqout.blogspot.com/2019/01/setting-up-simple-static-web-project.html
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.
See one of the messages that I am getting:
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.
We Visual Studio old timers do that in our sleep.
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.
VS Code has both. I have tried both.
This seems to be like vaporware.
If anybody out there has been able to:
(b) Attach to
either Chrome or Edge, from Visual Studio Code, please share details.
I have seen/done all what is displayed below from the link that you provided:
Perhaps it works on Macs
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.
A search for “how to serve static content locally” will give you many options, as will any of options listed on https://threejs.org/docs/#manual/en/introduction/How-to-run-things-locally.
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.
Don, I appreciate your help and hope you don’t mind me asking one more question.
What exactly do you mean by “static web content”? As opposed to what?
Let me tell you exactly what I have. A number of ZIPPED files such as this:
(mentioned in the “Interactive Music Video with ThreeJs” thread)
Some are deliveries by Freelancers.
I unzip them in my local disk (C: drive) and ask Visual Studio Code to open that folder.
If there is any other way to use VSC, I wouldn’t know it.
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.