Tip for debugging Next.js apps: the "node-terminal" adapter that Next.js recommends won't work, so you should change it to pwa-node instead. Here's a launch config for debugging server-side Next.js that works: { "name": "Next.js: debug server-side", "type": "pwa-node", "request": "launch", "cwd": "${workspaceFolder}", "runtimeExecutable": "npm", "runtimeArgs": ["run-script", "dev"], "sourceMaps": true } If you want to debug the client side, don't use the "full-stack" example they have on their website, but start an additional Chrome debugging session and make sure to use the "pwa-chrome" adapter: { "name": "Next.js: debug client-side", "type": "pwa-chrome", "request": "launch", "url": "localhost:3000", "sourceMaps": true }
This is my 4th attempt trying out to set up Neovim. The previous time I gave up due to being unable to configure DAP. But, this video was exactly what I was looking for! Thank you very much for this! I can't describe how happy I am :).
Oh thank you so much! I had spent so much time learning and getting myself set-up to enjoy nvim until i realize the TS support for Dap wasn't what I was expecting. I'm saved!
I don't know if you are still monitoring the comments but I want to thank you for this post. I had been struggling for some hours. One thing to note, you didn't mention it, but the node version is very important as well. I had to downrgade my mac from node v20 to node v14 to get the microsoft/vscode-js-debug deployed. Again thanks and subbed
Just one thing I was missing to see here was the "debug console", which is powerful because you can run expressions or any code to test your code and variables in the local context session the debugger is paused. That feature I use a lot in vs code. Another feature we get in "vscode debugger console" is a handeful "copy" command that we use to copy any data to the clipboard memory. These two missing parts and I think debugging in Neovim will be "feature completed". Edit: ah, one more thing that is a killer feature for me and I use a lot in vscode is "conditional breakpoint". Just wanted to pointed it out. I hope nvim-dap cover it.
Not sure how I missed that, but on 12:11 when I say "This is the logs" that's actually logs + the debug console 🤣 it does output logs but when you "insert" into it it turns into a debug console and you can type in expressions. For conditional breakpoints, you can do " d B" (capital B). That'll open a floating input where you can type in the condition itself. After hitting enter, the breakpoint should have a separate icon, which in my case was a circle "?" icon, and in the breakpoints pane on the left there's a "Condition" mark below the breakpoint. Hope this helps!
Thank you so much, I was finally able to set up a working debugger for my node.js applications. Although, my config needs some fine-tuning, but I am happy that I got the debugger working with the help of your video :)
is there an easy way to launch my windows chrome browser instead of using the one in my wsl2 instance? Im running neovim inside wsl2 but i want to debug through my windows chrome .
I attempted to change the run Executable path through my mounted directory to see if using my chrome on windows would work and did not have success. If anyone does come across a way to do this it would be awesome!
Hi Lazar! Quick question buddy, I was trying to follow the process you described in your video but when checking the dap.lua file you have in the URL is a different one. I went and downloaded your dotFiles repo and it seems there is no reference to these settings whatsoever. Do you have a newer way to configure dap in nvim?
Yeah I had to change it... LazyVim pushed some updates and it broke my configuration, so I had to remove it and revert to theirs, which actually works exactly the same. You don't have to use LazyVim to achieve it though, you can just "rip out" the nvim-dap configuration: - You can see how they configure nvim-dap on their docsite: www.lazyvim.org/extras/dap/core - Language extras also bring their own dap configs: www.lazyvim.org/extras/lang/typescript Also here's my dap.lua file before I refactor it: github.com/nikolovlazar/dotfiles/blob/e411ed6af31445fb114e0dd48283875685a2877f/.config/nvim/lua/plugins/dap.lua Hope this helps!
I can debug a simple JS file but with TS file I can't debug, what is the problem? I run before tsc with source maps but start debug ui and after non debug anything because returns to the neovim and it exit from ui debug. Could you help me or made a video simple to debug a simple ts file? Thx!!
Hey, few days trying to config dap, still struggling with it :( My debugger just run until he disconnect without any log error. Is anyone having same issue ?
Can you check what's in your dap.log file? You can find the location of that file by executing this in neovim: ":lua print(vim.fn.stdpath('cache'))". If you're on mac, it should be "~/.cache/nvim". The file name is dap.log. See if there are any clues as to what's happening in that file.
@@nikolovlazar Thx for the respond ! I have struggling with it few more hours until rage deleting the config and remake it from scratch step by step, no more problem no idea why but it's working so thx a lot ! (i'm french, hope my sentences are correct :')
Hey, thanks for the video! How you make the Launch Configurations appear in a dialog at 16:21? To me it displays at the bottom part of nvim. Also, how can you pull up the launch configurations from the .vscode directory? I'm using Packer.
That's just nvim-dap I think. Here's what happens on "da" in my config: github.com/nikolovlazar/dotfiles/blob/main/.config/nvim/lua/plugins/dap.lua#L98. Pulling the .vscode launch config is also in the same function. It uses "dap.ext.vscode" to read the launch.json file, which is dependent on the "lua-json5" package (see the bottom of the file).
And it works out of box in many IDEs, is it a skill issue, or is it a trial and error and hope some plugin made by some guy better get to work for me issue?
Even VS Code can be tricky to set up if you don't know how to. Of course, neovim has more challenges when configuring it, but there are lots of developers who are used to neovim and would appreciate a solution for debugging node apps. I personally am happy that I can still keep using my favorite editor while also being able to debug my web projects. I don't have to compromise.
Did any one managed to use nvim-dap to debug a node app when it run inside a docker container? I've been trying to achieve this for days without success, I managed to run the adapter from inside the container, but when I try to start a debugging session nvim-dap cannot connect to the adapter, I can see the request message in the dap.log file but there is no response. I have no issue debugging on localhost, but I would like to go one step further and debug in docker.
if your container is not runnign network mode host you need to map the ports of the debugger running in the container to the port on your host - either in the docker compose file or the command you use to start your container.
@@zettlrobert yep, that's what I'm doing, my application is running in port 4000, the node debugger is running in port 4001 (--inspect=4001) and the adapter is running in port 8123, all these ports are mapped to localhost in my docker-compose file
Since publishing this video, LazyVim made some changes that broke my own dap config, so I had to revert to theirs. My dap file currently contains nothing meaningful, but here's the original dap file that I showcase in this video: github.com/nikolovlazar/dotfiles/blob/92c91ed035348c74e387ccd85ca19a376ea2f35e/.config/nvim/lua/plugins/dap.lua
I debug nextjs server. I already added debugger, and run "NODE_OPTIONS='--inspect' yarn dev" and trigger api. But debugger don't trigger. Anyone got idea?
I just tried debugging Next.js, and I even failed to do so in VSCode. What does your launch config look like? I followed the example on the docsite, but none of my breakpoints get hit.
the video is excellent, but still, like the author mentioned, debugging in neovim is still a nightmare to get it right. I'm having trouble trying to set up python debugging, all seeing of sorts of things like issues with shell init files, and python env and what not... something that vscode we set it up much more easily.. sad because I would like to say in neovim and debug all sorts of languages but don't want to spend hours setting up each one of them.
Like always, Linux user, huh.. Each plugins with DAP has the same problem... "Debugger entrypoint file 'C:\Users\48514\AppData\Local vim-data\lazy\vscode-js-debug\out/src/vsDebugServer.js' does not exist. Did it build properly?"
Yes. I do mention in the video that I'm not 100% sure that it's supposed to be there. It's a leftover from me figuring out the config and I've forgotten to remove it. pwa-node is a valid adapter and that's the one that I'm using in my configs.
Thanks for this tutorial, I am trying to setup this on my local machine but I am having an issue. [dap-js] Error trying to launch JS debugger: ...nvim/lazy/nvim-dap-vscode-js/lua/dap-vscode-js/utils.lua:64: Debugger entrypoint file '/Users/mark/vscode-js-debug//out/src/vsDebugServer.js' does not exist. Did it build properly? can you help me figure out which step I am having an issue. Thanks
I can see a double // in the path above. It seems that you have a trailing slash in your "debugger_path": debugger_path = vim.fn.resolve(vim.fn.stdpath("data") .. "/lazy/vscode-js-debug/"), Remove that last / after "debug" and you should be good.
Tip for debugging Next.js apps: the "node-terminal" adapter that Next.js recommends won't work, so you should change it to pwa-node instead. Here's a launch config for debugging server-side Next.js that works:
{
"name": "Next.js: debug server-side",
"type": "pwa-node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "dev"],
"sourceMaps": true
}
If you want to debug the client side, don't use the "full-stack" example they have on their website, but start an additional Chrome debugging session and make sure to use the "pwa-chrome" adapter:
{
"name": "Next.js: debug client-side",
"type": "pwa-chrome",
"request": "launch",
"url": "localhost:3000",
"sourceMaps": true
}
This is my 4th attempt trying out to set up Neovim. The previous time I gave up due to being unable to configure DAP. But, this video was exactly what I was looking for!
Thank you very much for this! I can't describe how happy I am :).
Glad I could help!
Oh thank you so much! I had spent so much time learning and getting myself set-up to enjoy nvim until i realize the TS support for Dap wasn't what I was expecting. I'm saved!
I don't know if you are still monitoring the comments but I want to thank you for this post. I had been struggling for some hours. One thing to note, you didn't mention it, but the node version is very important as well. I had to downrgade my mac from node v20 to node v14 to get the microsoft/vscode-js-debug deployed. Again thanks and subbed
Glad you find this useful! And thanks for the Node version thing. I wasn't aware.
Thanks! I was missing some pieces and this video game them to me :) Keep up the good work!
Just one thing I was missing to see here was the "debug console", which is powerful because you can run expressions or any code to test your code and variables in the local context session the debugger is paused. That feature I use a lot in vs code. Another feature we get in "vscode debugger console" is a handeful "copy" command that we use to copy any data to the clipboard memory. These two missing parts and I think debugging in Neovim will be "feature completed".
Edit: ah, one more thing that is a killer feature for me and I use a lot in vscode is "conditional breakpoint". Just wanted to pointed it out. I hope nvim-dap cover it.
Not sure how I missed that, but on 12:11 when I say "This is the logs" that's actually logs + the debug console 🤣 it does output logs but when you "insert" into it it turns into a debug console and you can type in expressions.
For conditional breakpoints, you can do " d B" (capital B). That'll open a floating input where you can type in the condition itself. After hitting enter, the breakpoint should have a separate icon, which in my case was a circle "?" icon, and in the breakpoints pane on the left there's a "Condition" mark below the breakpoint.
Hope this helps!
Thank you so much, I was finally able to set up a working debugger for my node.js applications. Although, my config needs some fine-tuning, but I am happy that I got the debugger working with the help of your video :)
Happy to help!
It's really helpful. Thx for your sharing
is there an easy way to launch my windows chrome browser instead of using the one in my wsl2 instance? Im running neovim inside wsl2 but i want to debug through my windows chrome .
I attempted to change the run Executable path through my mounted directory to see if using my chrome on windows would work and did not have success. If anyone does come across a way to do this it would be awesome!
Can you please recommend a video or article on how to use a debugger?
Thank you!!
Hi Lazar! Quick question buddy, I was trying to follow the process you described in your video but when checking the dap.lua file you have in the URL is a different one. I went and downloaded your dotFiles repo and it seems there is no reference to these settings whatsoever. Do you have a newer way to configure dap in nvim?
Yeah I had to change it... LazyVim pushed some updates and it broke my configuration, so I had to remove it and revert to theirs, which actually works exactly the same. You don't have to use LazyVim to achieve it though, you can just "rip out" the nvim-dap configuration:
- You can see how they configure nvim-dap on their docsite: www.lazyvim.org/extras/dap/core
- Language extras also bring their own dap configs: www.lazyvim.org/extras/lang/typescript
Also here's my dap.lua file before I refactor it: github.com/nikolovlazar/dotfiles/blob/e411ed6af31445fb114e0dd48283875685a2877f/.config/nvim/lua/plugins/dap.lua
Hope this helps!
@@nikolovlazar Awesome thanks! I actually use Lazy so this should be smooooooth. Thanks pal!
You got it!
Thank for your valuable sharing! Btw, ma you share what font family do you use in your terminal?
Glad you liked it! I'm using the Dank Mono font.
@@nikolovlazar Well noted, thanks for your kind sharing!
15:29 this has been my issue for hours..... thanks
Glad you solved your issue!
I can debug a simple JS file but with TS file I can't debug, what is the problem? I run before tsc with source maps but start debug ui and after non debug anything because returns to the neovim and it exit from ui debug. Could you help me or made a video simple to debug a simple ts file? Thx!!
I have to try it to see what could be the issue. Can't think of a solution at the top of my head. I'll let you know if I figure it out.
@@nikolovlazar Ok perfect! thx!! :) Nowadays It is necessary use ts files. It is a good new video for your channel haha
This is very good ! btw what font are you using ?
Thank you! It’s Dank Mono, but I nerd-patched it.
Thanks! I feel like dap documentation is really really lacking. First nvim plugin i have had to look up yt videoes to get working
Hey, few days trying to config dap, still struggling with it :( My debugger just run until he disconnect without any log error. Is anyone having same issue ?
Can you check what's in your dap.log file? You can find the location of that file by executing this in neovim: ":lua print(vim.fn.stdpath('cache'))". If you're on mac, it should be "~/.cache/nvim". The file name is dap.log. See if there are any clues as to what's happening in that file.
@@nikolovlazar Thx for the respond ! I have struggling with it few more hours until rage deleting the config and remake it from scratch step by step, no more problem no idea why but it's working so thx a lot ! (i'm french, hope my sentences are correct :')
@@drawog9850 glad you fixed it!
Hey, thanks for the video! How you make the Launch Configurations appear in a dialog at 16:21? To me it displays at the bottom part of nvim. Also, how can you pull up the launch configurations from the .vscode directory? I'm using Packer.
That's just nvim-dap I think. Here's what happens on "da" in my config: github.com/nikolovlazar/dotfiles/blob/main/.config/nvim/lua/plugins/dap.lua#L98.
Pulling the .vscode launch config is also in the same function. It uses "dap.ext.vscode" to read the launch.json file, which is dependent on the "lua-json5" package (see the bottom of the file).
Thanks, this is what I was looking for!
And it works out of box in many IDEs, is it a skill issue, or is it a trial and error and hope some plugin made by some guy better get to work for me issue?
Even VS Code can be tricky to set up if you don't know how to. Of course, neovim has more challenges when configuring it, but there are lots of developers who are used to neovim and would appreciate a solution for debugging node apps. I personally am happy that I can still keep using my favorite editor while also being able to debug my web projects. I don't have to compromise.
Did any one managed to use nvim-dap to debug a node app when it run inside a docker container? I've been trying to achieve this for days without success, I managed to run the adapter from inside the container, but when I try to start a debugging session nvim-dap cannot connect to the adapter, I can see the request message in the dap.log file but there is no response.
I have no issue debugging on localhost, but I would like to go one step further and debug in docker.
I haven't had the need to do this, but hopefully some of the viewers of this video has figured that out.
if your container is not runnign network mode host you need to map the ports of the debugger running in the container to the port on your host - either in the docker compose file or the command you use to start your container.
@@zettlrobert yep, that's what I'm doing, my application is running in port 4000, the node debugger is running in port 4001 (--inspect=4001) and the adapter is running in port 8123, all these ports are mapped to localhost in my docker-compose file
can you provide dap config
dotfile
Since publishing this video, LazyVim made some changes that broke my own dap config, so I had to revert to theirs. My dap file currently contains nothing meaningful, but here's the original dap file that I showcase in this video: github.com/nikolovlazar/dotfiles/blob/92c91ed035348c74e387ccd85ca19a376ea2f35e/.config/nvim/lua/plugins/dap.lua
I debug nextjs server. I already added debugger, and run "NODE_OPTIONS='--inspect' yarn dev" and trigger api. But debugger don't trigger. Anyone got idea?
I commented the same thing. I havent seen anybody actually get this working with nextjs. If you ever find any way to get it working comment back.
@@_stevek Thanks for your reply. After two days of struggling, I decided to use VSCode for debugging :(
I just tried debugging Next.js, and I even failed to do so in VSCode. What does your launch config look like? I followed the example on the docsite, but none of my breakpoints get hit.
the video is excellent, but still, like the author mentioned, debugging in neovim is still a nightmare to get it right. I'm having trouble trying to set up python debugging, all seeing of sorts of things like issues with shell init files, and python env and what not... something that vscode we set it up much more easily.. sad because I would like to say in neovim and debug all sorts of languages but don't want to spend hours setting up each one of them.
I'm currently figuring out python debugging in both vscode and neovim 😅
Like always, Linux user, huh.. Each plugins with DAP has the same problem... "Debugger entrypoint file 'C:\Users\48514\AppData\Local
vim-data\lazy\vscode-js-debug\out/src/vsDebugServer.js' does not exist. Did it build properly?"
why not many node devs use nvim? i guess most of them r not smart enough to handle the config issue.
The selected configuration references adapter `node`, but dap.adapters.node is undefined
Yes. I do mention in the video that I'm not 100% sure that it's supposed to be there. It's a leftover from me figuring out the config and I've forgotten to remove it. pwa-node is a valid adapter and that's the one that I'm using in my configs.
Thanks for this tutorial,
I am trying to setup this on my local machine but I am having an issue.
[dap-js] Error trying to launch JS debugger: ...nvim/lazy/nvim-dap-vscode-js/lua/dap-vscode-js/utils.lua:64: Debugger entrypoint file '/Users/mark/vscode-js-debug//out/src/vsDebugServer.js' does not exist. Did it build properly?
can you help me figure out which step I am having an issue.
Thanks
I can see a double // in the path above. It seems that you have a trailing slash in your "debugger_path":
debugger_path = vim.fn.resolve(vim.fn.stdpath("data") .. "/lazy/vscode-js-debug/"),
Remove that last / after "debug" and you should be good.