enter image description here
I just started to learn JS and was trying to printout "Hello,World" the basic.
However,
[Running] and [Done] messages were printed properly but not for the text "Hello,World".
According to other "hello,world" sources from tutorials and documents, "console" was colored with different color except white. Is this point related to this printout problem?
You can debug with external terminal by configuring launch.json (you need to place your file inside a folder to do configuration).
Go to Debug -> Open Configurations
Add "console": "externalTerminal" to your launch.json:
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/t.js",
"console": "externalTerminal"
}
]
Try Debugging and VSCode will debug your output on a separate terminal.
you need to switch your terminal tab to see the console , its the last one normally
Open terminal and type node filename.js and run it
Make sure that you add a semicolon (;) at the end of the statement and that you save the file before running it again.
console.log('Hello World');
Related
After the last update of VS Code to version 1.69.2 i am not able to debug my nodejs - express, project. I am getting unbound breakpoints when i am adding them. My launch.json file :
{
"configurations": [
{
"name": "Attach by Process ID",
"processId": "${command:PickProcess}",
"request": "attach",
"skipFiles": [
"<node_internals>/**"
],
"type": "node",
"sourceMaps": false
}
]
}
When i am trying to "troubleshoot the launch configuration" i am getting the error message from vs code : "it looks like your degug session has already ended......" but it is not, it is active.
In my project i am using nodejs - express - javascript mostly (no Typescript thats why i set sourceMaps to false).
I am starting my project with the command :
node --inspect sever.js
and after that i attach by procces the debugger ( to default 127.0.0.1:9229).
Can anyone help me to solve this problem? What has change after the last update and i can't use the degugging of VS Code?
Thanks a lot.
Download a previous version.
Also, disable auto updates from Settings -> Update.
https://code.visualstudio.com/updates/v1_68
I am new to VS Code and JavaScript, and I am trying to make a simple app using Vite and Svelte, but I have a problem which I can't seem to resolve. (My code is currently just the default code given when a new project is created; I haven't changed it at all.)
When I run my app through Windows Terminal (by navigating to the project root directory and running npx vite dev), the app runs fine and my browser can connect to localhost:3000.
However, when I press on either:
Run > Start Debugging, or
Run > Run Without Debugging
in Visual Studio Code, it opens up Chrome to localhost:3000 but I just see localhost refused to connect. I think VS Code is never actually running the command npx vite dev, but I don't know how to change this.
When I open up .vscode/launch.json, I see this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug with Chrome",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
}
]
}
And I am not sure what I should add here to get this to work. Any help would be appreciated, and sorry if this is a bit of a stupid question, but I couldn't fund any help searching Google or SO.
EDIT:
I have almost got this working by adding a preLaunchTask, but now chrome no longer automatically opens when I start debugging, so I might as well just run npm: dev on its own.
Here is .vscode/launch.json now:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug with Chrome",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"preLaunchTask": "npm: dev"
}
]
}
I think this might be because the npm: dev task (which effectively runs npx vite dev) is blocking, and only finishes when I press the stop button (or double-click ctrl+c), so chrome is not opened because VS Code thinks the pre-launch task is still running.
If there any way I can tell VS Code to open Chrome while continuing to run npm: dev?
Here's the VSCode way to start the Vite Dev server (npx vite) and then automatically open Chrome and attach a debug session to it.
// launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch Vite DEV server",
"request": "launch",
"runtimeExecutable": "npx",
"runtimeArgs": [
"vite",
],
"type": "node",
"serverReadyAction": {
"action": "debugWithChrome",
"pattern": "Local: http://localhost:([0-9]+)",
"uriFormat": "http://localhost:%s"
}
},
],
}
Many things can be customized in the launch.json. I recommend you to read the documentation linked above.
The "magic" happends in "serverReadyAction" where you set the "action" to "debugWithChrome" to open chrome.
The "pattern" is a regex used to capture the port on which the server have been launched.
Finally, you add the port to the URL in the "uriFormat" by using %s. %s represent the capture done with the regex in "pattern"
Instead of having it run npx vite dev (which is the npm: dev task), have it run npx vite dev --open :)
I typically only ran Python and C++ code. When running Python Code, it would drop down a simply menu, such as this.
It would drop this down then you would click enter and boom it would run
But then I randomly ran a console.log("Hello World") JavaScript program. It dropped down a menu and I selected something like "Node.js" or whatever.
Anyway now when I go to run code, it opens in something called the "JavaScript Debug Terminal". The code never ran and you just had to manually open the file and run it. Later I went to the run and debug page and added a configuration to a launch.json file, where I added a Python Config:
{
"configurations": [
{
"name": "Python: Current File",
"type": "python",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal"
}
]
}
Now when I run Python Code it runs in something called the "Python Debug Console". Can someone tell me how to revert this to how it was in the factor settings
It appears that you're running the python file in debug mode. If you want to run python normally you can right-click anywhere in the file and select run python file in terminal.
For more information on running python files, you can look at https://code.visualstudio.com/docs/python/python-tutorial.
Today, I opened up my Visual Studio Code and saw that a new update has been released. Like any other normal (and ignorant) user, I just installed the update without any research about the changes. It's been months since I haven't had a problem with the updates so I assumed this one would be no different. But after the update, "launch" options would no longer work!
I have an Electron/Angularjs app. This launch config simply runs the app. Everything was working fine before the VS Code update but after the latest update (v 1.22.1), the app fails to launch from within VS Code.
I can, however, run my app through command line, so there are no changes/problems with Electron or others. The main Electron process would fail to find a module at $workspaceFolder (something about electron.asar resolvePaths?).
After a couple of hours of research, I found out that adding this simple property, grants my wish:
"runtimeArgs": [
"."
]
Does anyone know what this little guy does in VS Code launch.json?
Here's the full launch.json in case you need it:
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
},
"program": "${workspaceFolder}/Src/main.js",
"protocol": "inspector",
"console": "integratedTerminal",
"cwd": "${workspaceRoot}",
"runtimeArgs": [
"."
]
}
]
dot "." would pass your current working directory(cwd) to runtimeExecutable
,which in this case is .bin/electron.
So this executes
$ electron .
I'm guessing"program": "${workspaceFolder}/Src/main.js" is redundant and can be removed, because electron accepts a directory as path , given there's a package file in it.
I have tried devtron (it give lot of tools to inspect but does not let you step by step debug the electron app.)
Also I have tried electron-inspector along with electron-inspector.
With the release of new version electron. electron-inspector rebuild is breaking. I have raised the bug here
Any other method with node-inspector or electron-inspector is not working for electron version 1.6.x.
After much research the only simple and out of the box way to debug electron application step by step is visual studio code, Just install it.
Create a folder .vscode in your source app directory
Create a file launch.json and add
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
"program": "${workspaceRoot}/main.js"
}
]
}
Press F5 or (Debug --> Start debugging). Your break point will hit.
steps copied from
https://electron.atom.io/docs/tutorial/debugging-main-process-vscode/