As per Dynamic system host example How can I configure debug on vscode? I am able to debug the host application but not the remote one.
Got it working. There was an # character before the folderName which I was missing and stumbled upon when I debugged the same app in WebStorm.
The application structure is-
remote
.vscode
workspace-launch-config
host
So the working launch config in vs-code is-
"launch": {
"version": "0.2.0",
"configurations": [
{
"type": "pwa-msedge",
"request": "launch",
"name": "Debug M3 # 8080",
"trace": true,
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder:host}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack://#${workspaceFolderBasename:remote}/*": "${workspaceFolder:remote}/packages/*",
"webpack://${workspaceFolderBasename:host}/*": "${workspaceFolder:host}/*"
}
}
]
}
Related
I've been trying to debug my server side code in NextJS by marking a breakpoint. I am using VSCode to my development.
Initially, my launch.json was like this.
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
This works fine; however, it does not hit any server side code like getStaticProps, getStaticPaths and getServerSideProps.
I found this blog post that I believe can solve my problem. So I added a script to my package.json, and amend my launch.json. So now it looks like this
package.json
{
"scripts": {
"debug": "node --inspect-brk ./node_modules/next/dist/bin/next"
}
}
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "Launch Next.js",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 3000
}
],
"compounds": [
{
"name": "Debug Next.js + Chrome",
"configurations": [
"Launch Next.js",
"Launch Chrome against localhost"
]
}
]
}
So when I try to run this, I got an error to my Launch Next.js configuration.
I believe this is because I am pointing to an incorrect port. I tried to search what is the default port for server side part of NextJS. But I cannot find one.
I have same problem with setting breakpoint on API, so I took a few hours to figue out what's the real problem. Finally I found the issue:
Because when you run a Nextjs app, Node will first run next script, then next script will spawn a child process which is your own code. Nextjs also automatically set NODE_OPTIONS=--inspect when you use dev mode, but it use different port number and the number changes automatically. The KEY POINT is: The Next script and the child process will have different debugging port number. , That is the reason that you sometimes can't set breakpoints.
There are some senarios:
If you start your server manually in VSCODE terminal by type "npm run dev", VSCODE will
automatically find the debugging ports and you will be fine.
If you start your server outside of VSCODE from a terminal, and then use
attach, VSCODE will only attach one port, usaully only attached to
Nextjs script. That's why you can't set breakpoint in you own code.
If you use launch method to start server in launch.json. Then same
problem will happened like No.2, You can't set your breakpoint.
There is a simple way to solve the problem: Either start server from VSCODE internal terminal or in launch.json, add:
"autoAttachChildProcesses": true,
then you can start debugging by hit F5 and everything going well.
{
"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"
},
"autoAttachChildProcesses": true,
}
My Laravel project is setup in VS Code. This project is setup to use Homestead/Vagrant. I'm trying to setup the launch.json file, but I can't figure out how the pathMappings must be setup:
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000,
"pathMappings": {
"/path/on/server": "${workspaceRoot}/local/path"
}
}
]
How do I set: /path/on/server?
How do I set: ${workspaceRoot}/local/path?
I'm trying to debug a revel app with visual studio but I can't get it to work.
I've seen this question how to debug revel framework(golang) application in visual studio code(vscode) but no answers yet...
I've tried with this config:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "go",
"request": "launch",
"mode": "debug",
"remotePath": "",
"port": 2345,
"host": "127.0.0.1",
"program": "~/code/go/bin/revel",
"env": {},
"args": [],
"showLog": true
}
]
}
But I'm getting this error:
Failed to continue: "The program attribute must point to valid directory, .go file or executable."
I think it must be the rebel binary the one to be run here, but I don't know how to pass the app path, should it go in "args"?
Yes it's possible.
Suppose that the GOPATH is C:\Work\golang
Revel project name is myapp, thus the location of the project (workspace) will be C:\Work\golang\src\myapp.
Make some changes to the controllers etc...
Run the application with revel run myapp, then press CTRL+C to exit. This step is necessary to generate corresponding go files. The generated file, i.e. the main package will be available under ${workspaceRoot}/app/tmp/main.go
Configure launch.json as follows:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "go",
"request": "launch",
"mode": "debug",
"remotePath": "",
"port": 2345,
"host": "127.0.0.1",
"env": {},
"showLog": true,
"program": "${workspaceRoot}/app/tmp/",
"args": ["-importPath", "myapp", "-srcPath", "c:\\work\\golang\\src", "-runMode", "dev"]
}
]
}
The important parts are program and args parameters, while the other parameters are unmodified.
Set breakpoint and start the delve debugger...
EDIT:
Setting args parameter to ["-importPath", "myapp", "-srcPath", "${workspaceRoot}/..", "-runMode", "dev"] also work, and I think this should work in other platforms (Mac, Linux) too.
The error message is related to delve issue. See https://github.com/Microsoft/vscode-go/issues/986
Context:
I am working on a React.js app that uses Webpack, and I'm using VS Code as my editor.
The Webpack config is specifying inline-source-map as its devtool option. but I am using hot reloading, too. So, source maps actually come into the browser via this webpack:// protocol.
I am using the following launch.json config:
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url" : "https://myapp.local/", // This is not the real app URL
"trace" : true,
"sourceMaps": true,
"webRoot": "${workspaceRoot}/build",
"sourceMapPathOverrides": {
"webpack:///*" : "${webRoot}/*"
},
"preLaunchTask" : "development",
"internalConsoleOptions": "openOnSessionStart",
"smartStep": true,
"skipFiles": [
"node_modules/**",
"extensions:"
]
}
and I'm using this tasks.json.
Problem
So this mostly works well, except when I put a breakpoint somewhere, it opens the tab in a new tab marked as read-only inlined content from source map:
I just want to be able to debug and work on my files directly!
This is because VC can't find the sources on the file system, so it resorts to using the copy it got from the web server.
This is typical in projects that span both server and client side code, and as a result, the web (HTML/JS/CSS) root is nested inside the workspace root. It can be easily fixed:
in VC, open the root folder of your project. go to "File -> Save workspace as" and save the workspace. Going forward always use the workspace (rather than folder) to enter your project.
In launch.json, set the webRoot value to reflect the relative path of the webRoot (typically folder with index.html). If your webRoot is under "UI", then it should look like this:
"webRoot": "${workspaceFolder}/UI"
I got it working with this launch.json config. Hopefully it helps you.
{
"name": "Launch localhost",
"type": "chrome",
"request": "attach",
"url": "http://localhost:8080",
"port": 9222,
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": { "webpack:///./src/*": "${workspaceFolder}/src/*" },
"sourceMaps": true,
}
I was running into the same issue remote debugging Python, thanks the two above answers I was able to solve it.
as SimbalCoder suggested I saved the workspace. I suppose this is needed to set your workspace folder path.
I then modified my launch.json as such:
{
"name": "Python: Remote Attach",
"type": "python",
"request": "attach",
"connect": {
"host": "localhost",
"port": 5678
},
"pathMappings": [
{
"localRoot": "${workspaceFolder}/Scripts/MyScripts/"
}
],
}
Now the pathMappings are pointing to the correct file and upon debugger entry it is opening the correct file.
I downloaded the Visual Studio Code, but I don't know how to configure the debugger.
I am learning programming and i don't know how to configure it?
someone help me with this problem?
This is what you need to configure.
{
"version": "0.1.0",
// List of configurations. Add new configurations or edit existing ones.
// ONLY "node" and "mono" are supported, change "type" to switch.
"configurations": [
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Launch app.js",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Workspace relative or absolute path to the program.
"program": "app.js",
// Automatically stop program after launch.
"stopOnEntry": true,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Environment variables passed to the program.
"env": { }
},
{
"name": "Attach",
"type": "node",
// TCP/IP address. Default is "localhost".
"address": "localhost",
// Port to attach to.
"port": 5858
}
]
}
You need to be more specific with your question.
What kind of code are you debugging?
Right now Visual Studio Code has debugging support for Node.js (JavaScript and TypeScript) on all platforms, experimental support for mono (C# and F#) on OS X and Linux, and soon ASP.NET 5.
If you are using one of those, you should be able to start using debugging features.
For more information, here is a direct link to the official debugging documentation: https://code.visualstudio.com/Docs/debugging
If you are coding with php you can follow these step
You can copy and paste code:
"version": "0.2.0",
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9000
}
]