How to make VS Code compound debugger run by default? - visual-studio-code

I have the following .vscode/launch.json config:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Next: Chrome",
"url": "localhost:3000",
"webRoot": "${workspaceFolder}/src"
},
{
"type": "node",
"request": "launch",
"name": "Next: Node",
"runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
"port": 9229,
"env": {
"NODE_OPTIONS": "--inspect"
}
}
],
"compounds": [
{
"name": "Next: Full",
"configurations": ["Next: Node", "Next: Chrome"]
}
]
}
By starting debugger with F5, I want it to run the Next: Full command. But instead it runs Next: Chrome, so it may seem like something's not working, but you have to change it manually and re-run:
Then it will work. But is it possible to set it as default within the config?

It is possible by adding additional helpful entry to configurations first in the list, with the same name (type and request are also necessary):
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"name": "Next: Full",
"request": "launch"
},
{
"type": "chrome",
"request": "launch",
"name": "Next: Chrome",
"url": "localhost:3000",
"webRoot": "${workspaceFolder}/src"
},
{
"type": "node",
"request": "launch",
"name": "Next: Node",
"runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
"port": 9229,
"env": {
"NODE_OPTIONS": "--inspect"
}
}
],
"compounds": [
{
"name": "Next: Full",
"configurations": ["Next: Node", "Next: Chrome"]
}
]
}
Which turns out to be working as an alias:

Related

Why Visual Studio Code always break on start when debugging Next.js Full stack?

I'm debugging a Next.js 13 application using the following .vscode/launch.json file:
{
"version": "0.2.0",
"compounds": [
{
"name": "Compound",
"configurations": [],
"stopAll": false
}
],
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"stopOnEntry": false
},
{
"name": "Next.js: debug client-side",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"stopOnEntry": false
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
},
"stopOnEntry": false
}
]
}
However, every time I debug on the "Next.js: debug full stack" option, it stops on the first file (.next/server/app...) after every refresh.
Although the documentation says stopOnEntry is accepted, vscode, says its not.
Perhaps I'm using it in the wrong place.
How can I make Visual Studio code does not stop on entry?
Update
I can confirm the same issue happen when Debugging on PhpStorm. Is it a Next.js bug?
Try Using this:
{
"version": "0.2.0",
"compounds": [
{
"name": "Compound",
"configurations": [],
"stopAll": false
}
],
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"stopOnEntry": false
},
{
"name": "Next.js: debug client-side",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"stopOnEntry": false
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "node --inspect-brk $(which npm) run dev",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
]
}
Change it according to your requirements if you like.

How Do I Set Task as preLaunchTask in .code-workspace?

I have a multi-root workspace with launch configurations and tasks. The tasks run fine on their own, but they don't run when added as a preLaunchTask. VS Code throws the error "Could not find the task".
oving them to a tasks.json file is not an option for me.
Here's the relevant information from my .code-worspace file
{
"folders": [
{
"name": "App",
"path": "app"
},
{
"name": "API",
"path": "api"
},
],
"settings": {},
"launch": {
"configurations": [
{
"name": "Launch App",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"cwd": "${workspaceFolder:App}",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder:App}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
},
"tasks": {
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"label": "npm: start",
"detail": "react-scripts start",
"options": {
"cwd": "${workspaceFolder:App}"
},
"problemMatcher": []
}
]
}
}
I don't know why, but this only happens if type = npm.
Change:
"type": "npm",
"script": "start",
to:
"type": "shell",
"command": "npm start",

VSC Attach to SSL LocalHost for Angular Debugging

Using the similar launch configuration I'm NOT able to attach to httpS://localhost:4200 from VSC for Angular 11 app, neither Chrome nor Edge.
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Edge",
"port": 9222,
"request": "attach",
"type": "pwa-msedge",
"webRoot": "${workspaceFolder}"
},
{
"name": "Attach to pwa-Chrome",
"port": 9222,
"request": "attach",
"type": "pwa-chrome",
"urlFilter": "https://localhost:4200",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Legacy Chrome",
"port": 9222,
"urlFilter": "https://localhost:4200",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "F5 against localhost",
"port": 4201,
"url": "https://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}
Cannot connect to the target at localhost:9222: Could not connect to
debug target at http://localhost:9222: Could not find any debuggable
target.
Bottom launch works.
If you don't have SSL certificate (self or real), ng serve --ssl will do.
If still not working then use a diff port. Here is my launch.json:
{
"name": "UI Chrome",
"request": "launch",
"type": "chrome",
"port": 4201,
"url": "https://localhost:4200",
"webRoot": "${workspaceFolder}"
}
Update: why 4201?
4201 is to help me bypass error in my original debugging, it did the trick help me continue debugging.

Nativescript debugging with visual studio code not work properly

I'm try to debug the nativescript application in visual studio code but it have some problem.
The debugger stopper at the breakpoint but the variable window has not data. However, the watch window has data:
My launch.js file:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch on iOS",
"type": "nativescript",
"request": "launch",
"platform": "ios",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"watch": true
},
{
"name": "Attach on iOS",
"type": "nativescript",
"request": "attach",
"platform": "ios",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"watch": false
},
{
"name": "Launch on Android",
"type": "nativescript",
"request": "launch",
"platform": "android",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"watch": true
},
{
"name": "Attach on Android",
"type": "nativescript",
"request": "attach",
"platform": "android",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"watch": false
}
]
}
I'm using Genymotion for emulator
Do I missing any configuration?

Dubgger for Chrome in Visual Studio Code

I am trying to debug a JavaScript program on chrome, but it does not work.
Details:
OS: Windows 10.
IDE: Visual Studio Code.
Debugger configuration (json):
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}
I managed to figure it out, here are the details.
I had to reconfigure the JASON file as follows:
{
"version": "0.2.0",
"configurations": [{
"name": "Launch Client Side",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/file_name.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch Server Side",
"type": "chrome",
"request": "launch",
"url": "http://localhost/mypage.html",
"sourceMaps": true,
"webRoot": "wwwroot"
}
]
}
Note: In order to use the debug features of Visual Studio Code, you need to refresh the browser after you launched the HTML file.