I want to debug the current .js file opened in vscode. Press F5 to run. Get error:"cannot connect to runtime. Make sure that runtime is in legacy debug mode."
The debug console shows error:
Debugging with legacy protocol because Node.js version could not be determined (Error: connect ECONNREFUSED 127.0.0.1:5858)
node.exe is in my path. And .vscode/launch.json contains type:node, request:launch, program:${file}.
Why the "cannot connect to runtime" error?
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${file}"
},
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 5858
}]
Related
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"
}
}
]
}
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?
I am following deno course on Pluralsight (Deno: Getting Started). I am on debugging module. When I try to start the debugger, I am getting this error message on vscode:
This is my launch settings:
{
"name": "Launch Deno",
"request": "launch",
"type": "pwa-node",
"program": "affiliate_data_server.ts",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "deno",
"runtimeArgs": [
"run",
"--inspect",
"--allow-all"
],
"attachSimplePort": 8888
},
Debug console gives only this output:
C:\Users\kara\.deno\bin\deno.exe run --inspect --allow-all affiliate_data_server.ts
Sometimes, when I click to cancel, application still listens on the port, so i have to kill the process manually.
When i try this config instead;
{
"name": "Node Deno",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "deno",
"runtimeArgs": ["run", "--inspect", "-A", "affiliate_data_server.ts"],
"port": 9229
},
It starts the server but breakpoints are not working.
What would be the solution?
I have solved the issue by downgrading the Deno to version 1.6.1 with
deno upgrade --version 1.6.1
Source: Github
You can use --inspect-brk instead of --inspect so it will break on the first line of the program.
I know this question has been asked before, but after reading a lot of the threads, I still haven't found my answer...
I am trying to debug a very simple html app with Chrome, but when I get to my localhost I get an error that says "This site can’t be reached". My launch.json code looks like this:
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}
Any help would really be appreciated as I have been struggling for quite a while with this now.
As #Rob-Lourens has mentioned you need to start your own local server to host your HTML/Javascript/CSS and images.
You can use a VS code plugin Live Server to create a local development server for you. Please make sure your URL("url": "http://localhost:3000") in your configuration file matches the URL of Live Server.
If you are on Windows and want to use IIS or IIS Express you can read up on IIS and IISExpress
Just change the value in launch.Json and remove unwanted and paste the html file location in the file attribute.
{
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Open index.html",
"file": "C:\\Users\\xyz\\projects\\PracticeProjects\\jsbasics\\index.html"
}
]
}