console.log is not printing to Debug Console in Visual Studio Code - javascript

I have created launch.json file exactly as this for debugging my Electron Application on VS Code. But the console.log() not printing anything to the debug console.
If I add "console": "integratedTerminal" to launch.json the log displays on the built in terminal. I want the log to be displayed on debug console. How can I fix it?

In the launch.json configuration you are using, add
"outputCapture": "std"
example
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"outputCapture": "std",
...
}
]
}

Related

Running the react native project pulled from github

I get an error when I want to run the project that I pulled from github and wanted to run.I've been coding for 1 week yet and I don't understand how to fix this, I would appreciate if you help me
All the steps and the errors I encountered are in the photos below.
{
// 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": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/Referans/src/Navigation/Login/Login.js"
}
]
}
Just try to run via terminal, cmd+j for terminal then
npm install
npx react-native run-android or npx react-native run-ios

How to run a specific npm command, from Vscode launch.json?

I know that any command in the "scripts" of package.json can easily be run from the "Run and Debug" menu in Vscode, but am wondering whether this could be done via the launch.json configurations, because i need to tell Vscode which directories to ignore during debugging.
My startup command requires ts-node and nodemon, so I can't simply refer to my index.ts file, like in the standard configuration:
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\src\\index.ts",//This doesn't help
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
Can i configure this to run a certain npm command?

How to configure VS Code to run npx vite dev when debugging

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 :)

VS Code Debug PHP and Javascript [duplicate]

According to the Microsoft Documentation, the Visual Studio Code debugger should be able to debug typescript and javascript.
Problematically, they only provide examples for server side apps using node or python. Intellisense only suggests server languages.
Is it possible to debug client-side typescript or javascript apps with the Visual Studio Code debugger?
launch.json
{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type":"node" <-- what if I'm building a JS / TS app?
"request": "launch",
"name": "Launch Program",
"program": "${file}",
"outFiles": [
"${workspaceRoot}/out/**/*.js"
]
}
]
}
You have to install one (or more) of the browser debugger extensions: Chrome, Firefox, iOS Web or Edge.
Then you can use launch configuration like this for Chrome:
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}"
}
Depending on you build workflow, you may have to do some additional steps to get source maps to work.

Non consistent bug - debugger not starting in VS code

VSCode Version: 1.13.1
OS Version: Windows 10
Steps to Reproduce:
Open a node project
Press F5 or Click play button from debugger pane
Does this issue occur when all extensions are disabled?: Yes
A few times I have noticed that the debugger does not start in Visual Studio. Anyone know any fix to this?
Do you have a launch.json file? It should be at .vscode/launch.json
With the following format:
{
// 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": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/myscript.js"
}
]
}
You can find more information here: https://code.visualstudio.com/Docs/editor/debugging

Categories

Resources