I have two frontend applications in my applications that need to be run in debugger mode, at the same time.
{
// 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": "pwa-msedge",
"request": "launch",
"name": "Org Admin - Edge",
"url": "http://localhost:3001",
"webRoot": "${workspaceFolder}",
"runtimeExecutable": "/usr/bin/microsoft-edge-beta"
},
{
"name": "Super Admin - Edge",
"request": "launch",
"type": "pwa-msedge",
"url": "http://localhost:3002",
"webRoot": "${workspaceFolder}",
"runtimeExecutable": "/usr/bin/microsoft-edge-beta"
},
{
"command": "npm run dev",
"name": "Start Full Application",
"request": "launch",
"type": "node-terminal"
}
]
}
This is the configuration I have so far, But I am only able to run either the Super Admin - Edge or the Org Admin - Edge at the same time. What I want is to run all of them at the same time when I launch each of them individually.
Basically, the need is to run two "pwa-msedge" instances from VSCode Debugger simultaneously.
I'm afraid what you want is impossible. One config can launch one Edge instance and you can only use one config at a time. The only thing you can do is to launch Org Admin - Edge and Super Admin - Edge one by one. Then both are running and you can debug them.
Related
Suppose I have in working directory hundreds exe file, I would like to debug one of them.
I do not want that launch.json will have hundreds objects for each exe file.
Is there a way, to have one object, and when start debug, I will choose which file I would like to debug?
I have tried extension "VSCode Prompt Debug" but it seems it does not work
In VSCode there is inputs, how can I use regex
for example:
{
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/${input:pickProgram}"
}],
"inputs": [{
"id": "pickProgram",
"description": "Select client or server",
"type": "pickString",
"options": ["*.exe"]
}]}
Thanks
I have an issue with debugging NextJS 12 apps in VSCode. Basically, the breakpoints ain't triggered when reloading in the browser.
Create the default NextJS 12 app using: $ npx create-next-app#latest.
Create the launch.json using https://nextjs.org/docs/advanced-features/debugging:
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug client-side",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000"
}
]
}
Start the app with $ npm run dev
Set a breakpoint at the pages/index.js:10 for example.
Run the debug session and see how the breakpoint is getting hit.
Now if you reload the page, the breakpoing isn't going to be hit. Why?
The only way to get it triggered again is to restart the debugging session OR edit the file with the breakpoint.
Ideas?
Is there a sort of optimization which can be disabled?
Documentation from Next JS can be found here
The example illustrates 3 ways to connect:
Server side
Client side
Full stack
For your case, since it's page/index.js (client-side) I would suggest the second option or the 3rd option.
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev"
},
{
"name": "Next.js: debug client-side",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000"
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"console": "integratedTerminal",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
]
}
here is the problem: I want to debug and run vue 3 vite on lan, so to do the second I just have to run vite --host but when I press F5 by default it runs vite. How can I change the default command that visual studio code is running so instead of vite it runs vite --host?
My launch.json file:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4000",
"webRoot": "${workspaceFolder}/app",
}
]
}
EDIT:
I made another question where I explain how I fixed some of the problems In here, still cant get it to debug from external device
How to debug Vue 3 Vite while on lan --host
You can pass arguments with either args or runtimeArgs attributes. Here is more information on this. I think in your case this should work:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4000",
"webRoot": "${workspaceFolder}/app",
"args": ["host"],
}
]
}
I'm working on a Create-React-App where I have configured the .launch.json file to have 2 configurations
Launch via NPM - to launch server via npm start
Launch Chrome - to open the client and debug my web-app with breakpoints
Right now I can only choose one option from the drop-down. So i'm manually running npm start in the terminal and then using the debugger to Launch Chrome which enables breakpoints
But I would like to know how to launch these 2 configs simultaneously using the VS Code debugger. Is it possible?
Below is the config that I have in launch.json:
"version": "0.2.0",
"configurations": [
{
// This doesn't stop at breakpoints
"name": "Launch via NPM",
"request": "launch",
"runtimeArgs": ["run-script", "start"],
"runtimeExecutable": "npm",
"skipFiles": ["<node_internals>/**"],
"cwd": "${workspaceFolder}",
"type": "pwa-node"
},
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
You can use compounds in launch.json file to run 2 configs simultaneously.
so you need to add another array called compounds in launch.json after configurations like below
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch via NPM",
"request": "launch",
"runtimeArgs": ["run-script", "start"],
"runtimeExecutable": "npm",
"skipFiles": ["<node_internals>/**"],
"cwd": "${workspaceFolder}",
"type": "pwa-node"
},
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
],
"compounds": [
{
"name": "Server + Browser",
"configurations": ["Launch via NPM", "Launch Edge"]
}
]
}
The compound - Server + Browser will be visible in the Run and Debug dropdown in VS Code
TIP
You can also set a delay for one of the configs by using tasks.json
I have this xdebug configuration on php8.0 on WSL.
zend_extension=xdebug.so
xdebug.mode=debug
xdebug.client_port=9000
xdebug.discover_client_host=1
xdebug.start_with_request=yes
xdebug.log=/mnt/c/www/traces/xdebug.log
and on 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": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9000,
"pathMappings": {
"/var/www/html/": "${workspaceFolder}"
}
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9000
}
]
}
The extension used
https://github.com/xdebug/vscode-php-debug/actions?query=branch:main
Now, When I set breakpoints on my-root-directory/public/index.php and run and debug on VScode and refresh on Google Chrome it will stop on the breakpoint.
my-root-directory/public/index.php is the entry file when visiting the app on the browser.
But
When I set breakpoints on my-root-directory/app/controller/someController.php and run and debug on VSCode and refresh on Google Chrome.
It will not stop in there.
Have you encountered this, and what is your solution?