I currently have a nuxt app setup as a univeral app in which I'm hosting using Docker. I've got pretty much everything working, the debugger attaches and finds local variables just fine when walking through middleware and api calls, but when debugging the asyncData method in the .vue file I can't see any of the local variables and my breakpoint keeps moving to the .catch line:
I also get a bunch of other random things in the current context, which in this case is "Module"??
I've added this line to my nuxt.config.js file as well to make sure it uses the correct source maps:
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
console.log(`IsClient: ${ctx.isClient}`);
console.log(`isDev: ${ctx.isDev}`);
if (ctx.isDev) {
config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
}
}
}
Also here is my .vscode config:
{
// 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": "Docker: Attach to Node",
"type": "node",
"request": "attach",
"remoteRoot": "/usr/share/nginx/app",
"port": 9229,
"address": "localhost",
"localRoot": "${workspaceFolder}/app",
"protocol": "inspector",
"restart": true,
"sourceMaps": true
}
]
}
Also, here is the command I use to start the container:
node --inspect=0.0.0.0:9229 \
./node_modules/.bin/nuxt \
& nginx -g "daemon off;" \
I've tried a lot of different things including using babel-register and starting it with babel-node since its transpiled, but none of those methods worked.
Is there anything I'm missing here? Can we just not debug .vue files on the server when creating a universal app?
UPDATE
I switched to Webstorm and for whatever reason the debugging works flawlessly. I guess that is the difference between using an IDE and a text editor.
vs code attach inspector when your nuxt app is already started.
To see whats happen in server side, vs code have to launch your nuxt app.
Add this script to your package.json:
...
scripts: {
"dev": "nuxt,
"dev-debug": "node --inspect node_modules/.bin/nuxt",
...
}
...
In .vscode config or .vscode/launch.json:
"configurations": [{
"type": "node",
"request": "launch",
"name": "Launch nuxt",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run",
"dev-debug"
],
"port": 9229
},
...
And finally, extend the build in nuxt.config.js to add source maps when we are running in development mode and ensure the correct type for both the client and server.
build: {
extend(config, ctx) {
if (ctx.isDev) {
config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
}
}
}
It's work for me on localhost, but I'm not sure it's working with remote root...
Also, it's not a perfect solution. I saw sometimes breakpoint jump from different line. I think this is because vs code cannot handle same lines in source and inline-source.
Alternative way:
To debug only javascript of a single file component (.vue), it's possible to extract the javascript part in an external .js file, and import it with <script src="./path-to-js"></script>.
Node js Version :v8.11.3
VS Code version :1.29.1 x64
npm version :6.6.0
Hi ,
I have created a default express skeleton project using express --view=jade myapp command after that cd myapp/ and npm install in the last.
Now I am trying to attach vscode debugger to this newly created project but no luck.
This is the content of my 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": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"protocol":"inspector",
"port":3000,
"program": "/home/pankaj/myfirstapp/myapp/app.js"
}
]
}
I am also not able to see any error in the debug console .There is nothing in debug console neither success nor failure.
Thanks In advance
Be careful for express default setup to set the path of program in launch.json to "program": "${workspaceFolder}/bin/www"
Port 3000 is the application port of your express application. If you specify this in your launch configuration, the VS Code debugger will try to use it as the debug port (which obviously cannot work).
In addition, use VS Code variables to specify where your programs lives. E.g. if you have opened VS Code on your myapp directory, use ${workspaceFolder}/app.js for the program attribute:
E.g.:
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/app.js"
}
I am trying to get VSCode 1.20.1 to break at a breakpoint in my project, but it simply refuses to break (at least with the inspector protocol). I've distilled this down to a 3 line Node.js sample project which can be found here on GitHub, I'll paste the relevant sections below.
The index.js program is a simple Hello World with a delay to avoid any debugger attach races (more on that later).
setTimeout(() => {
console.log('Hello'); //Breakpoint is set here
}, 5000);
The launch.json is 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": "Normal Run",
"runtimeExecutable": "${workspaceFolder}/bin/node",
"runtimeArgs": [
"--nolazy",
"--inspect-brk=0.0.0.0:5858"
],
"program": "${workspaceFolder}/index.js",
"args": [],
"env": {
"DOCKER_ARGS": "-p5858:5858"
},
"address": "127.0.0.1",
"port": 5858,
"timeout": 60000,
"console": "integratedTerminal",
"smartStep": true,
"stopOnEntry": false,
"protocol": "inspector",
"autoAttachChildProcesses": true,
"localRoot": "${workspaceFolder}",
"remoteRoot": "/src"
}
]
}
Note that Node.js is running in Docker in the standard node:8 container with a volume mount of the local source directory (that is what the runTimeExecutable is for, see GitHub). If I use Wireshark to monitor port 5858, I can see the debugger attach and decode all messages. Strangely, VSCode issues the Runtime.runIfWaitingForDebugger immediately, and then later issues the Debugger.setBreakpointByURL message that seems to be accepted by Node.js (it successfully returns a Location for the breakpoint). I have the 5 second timeout in the code just in case this race is the cause of the problem (which it does not seem to be).
As an aside, if I use my host Node.js (6.11.4) with the protocol as legacy (or auto which chooses legacy) and comment out the runtimeArgs, runtimeExecutable, etc. VSCode hits the breakpoint. If I force the protocol to inspector (which is experimental in 6.11.4) and add back the runtimeArgs (but not executable) the debugger attaches but no breakpoint is hit, essentially the same behavior as with the Docker node:8 above.
What am I doing wrong here? This problem originally started in a new TypeScript project using sourcemaps and mocha, etc. but I've boiled it down to this.
I created simple node.js application (source code from here https://azure.microsoft.com/en-us/blog/visual-studio-code-and-azure-app-service-a-perfect-fit/)
var http = require('http');
http.createServer(function (req, res) {
console.log('Got request for ' + req.url);
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('<h1>Hello Code and Azure Web Apps!</h1>');
}).listen(process.env.PORT);
And clicked VSCode generated launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/app.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
}
]
}
And still when launched I see:
Attribute 'program' does not exist.
Can anybody help what's wrong?
I believe that you need ${workspaceRoot}/server.js, not ${workspaceRoot}/app.js for program. The code you're using doesn't have an app.js, that's what that (poorly worded) error is telling you.
I also encountered this issue because of where VS Code put the .vscode directory containing the launch.json file. It put it up one directory so I had to add the directory to the path as defined in the launch.json file:
"program": "${workspaceRoot}/myDir/app.js",
I hope this helps.
Another issue I ran into is a path was configured Using\\Backslashes\\Like\\So and worked fine on Windows, but on Mac it gave the above error.
(Solution: changed to /)
The error is saying that the path to your code was wrong.
VSCode defines the parent directory of its configuration file ".vscode/launch.json" as "${workspaceRoot}" or "${workspaceFolder}".
So, for example, if you want to run file "myproject/subfolder/main.js", you should configure your "myproject/.vscode/launch.json" as follows:
"program": "${workspaceRoot}/subfolder/main.js"
Note that configuring
"program": "${workspaceRoot}/myproject/subfolder/main.js"
is a mistake and will cause error "Attribute 'program' does not exist".
I wasted a few hours today trying to figure this problem out. What worked for me was deleting the existing launch.json and running the application, which prompts you to select an enviroment, which in my case was Node. This created a new launch.json in which I updated the program path.
The error should ideally read 'file specified in program attribute does not exist' because that is what is happening. As of VSCode 1.30.2, it does show you the path along with the error.
In my case I had
"program": "${workspaceFolder}\\${file}" so the path was something like c:\dir\c:\dir\file.js
I corrected this by removing ${workspaceFolder} since I wanted to be able to debug individual files.
I had the same issue. In my case my launch.json had following line
"program": "${workspaceFolder}\\index.js"
My active code that I tried to debug was in app_v2.js , so I updated it to following, and then debug worked.
"program": "${workspaceFolder}\\app_v2.js"
Firstly, read the official document this answers all question you would have about setting the right attributes for different scenarios using launch.json.
Now, to specifically answer this question, the ${workspaceFolder} is basically containing directory of the .vscode directory, which is your project root directory. So, when setting specific files as your debugging program, remember to map the path from the project root directory, or in other words the relative path of the file that is to be set as the debugging program. This can be easily obtained from the IDE (VS Code) by simply right-clicking the file and selecting the Copy Relative Path option. Then proceed to paste this next to the ${workspaceFolder} in the program attribute in your launch.json file, like below, will fix the problem.
"program": "${workspaceFolder}/<relative_path>"
Replace relative path with your copied relative path as mentioned before
Note that I am on a Mac platform. Please use platform appropriate path separators
Alternatively, not specifically using a launch configuration makes sense if it's a not-for-production or a simple app that does not warrant a launch config file. However, if not, it is super useful when debugging in a Multi-target environment (server, client). In my opinion, using a compound launch configuration setup makes things a lot easier. Read this section of the official docs to learn how to set it up keeping in mind the relative paths of your server and client files.
I had the same question and took me couple of hours to figure it out. What I basically did was that I deleted the folder after ${workspaceFolder}
The format was ${workspaceFolder}/xxxx\\folder\\subfolder\\subfolder
so by deleting what's after the "workspaceFolder" and starting my path from the double backward slash, it did fix it for me.
I had the same error, because I was passing the arguments inside "program" attribute like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Build -B -p",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\app\\build -B -p D:\\apps\\12"
}
]
}
What solved for me was to pass the arguments inside "args" attribute, like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Build -B -p",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\app\\build",
"args":["-B", "-pD:\\apps\\12"]
}
]
}
The O.S. was Windows 7.
It simply means that when you debug the file the app.js file simply doesn't exist and when you perform debugging it shows the error.
Here it my way to fix the problem :
simply replace the value of program
"${workspaceRoot}/app.js"
by
"${workspaceFolder}/${fileBasenameNoExtension}.js"
I hope this will solve all of your problems.
For the ones who are using Visual Studio 2019, today I was trying Node.js in the "master" VS2019. I moved server.ts to the src folder so that my js output would be in lib folder.
After that I tarted getting that message. Here are the changes I made in my project file to have it working.
<StartupFile>lib\server.js</StartupFile>
<WorkingDirectory>lib</WorkingDirectory>
<OutputPath>lib</OutputPath>
I hope this is not out of topic, it could help VS IDE users.
the --harmony flag for node in the args parameter seems not to work. I can't use fat array functions.
Here part of lounch.json
"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": ["--harmony"],
// 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
}
]
Is there a way to fix the problem myself?
The "args" parameter is not for the node process, but rather arguments for the app.
I was confused by this myself, the documentation should make this clearer.
See this question for a workaround: How to start nodejs with custom params from vscode