I FINALLY configured nvim-dap to debug Node.js apps!!!

This is a milestone! 😅 I finally understood how debugging works in neovim and made nvim-dap work for Node.js projects, like Next.js, Nuxt.js, Astro, Remix, etc...
Here's the whole dap.lua file: github.com/nikolovlazar/dotfi...
🔗 Links:
👉 LazyVim: www.lazyvim.org/
👉 My dotfiles: github.com/nikolovlazar/dotfiles
--
💬 A bunch of us are hanging out at discord.creatures.dev/. Join us!
🐦 Find me on the bird app: / nikolovlazar
🎥 What I use for coding and making videos: nikolovlazar.com/uses
--
Chapters:
00:00 Intro
00:41 An overview of how it works
01:33 How to configure nvim-dap
07:44 Debugging overview
09:09 Debugging the server
12:36 Debugging the client (plus full stack)
14:04 Attaching to a debugging process

[@nikolovlazar]

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 }

[@andreigatej6704]

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 :).

[@nikolovlazar]

Glad I could help!

[@pasberry]

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

[@nikolovlazar]

Glad you find this useful! And thanks for the Node version thing. I wasn't aware.

[@sudarshanb9771]

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 :)

[@nikolovlazar]

Happy to help!

[@aislanarislou]

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.

[@nikolovlazar]

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!

[@jinlongzhu1979]

It's really helpful. Thx for your sharing

[@theIbraDev]

15:29 this has been my issue for hours..... thanks

[@nikolovlazar]

Glad you solved your issue!

[@_acky]

This is very good ! btw what font are you using ?

[@nikolovlazar]

Thank you! It’s Dank Mono, but I nerd-patched it.

[@allenho9427]

Thank for your valuable sharing! Btw, ma you share what font family do you use in your terminal?

[@nikolovlazar]

Glad you liked it! I'm using the Dank Mono font.

[@allenho9427]

@@nikolovlazar Well noted, thanks for your kind sharing!

[@theIbraDev]

Thanks! I feel like dap documentation is really really lacking. First nvim plugin i have had to look up yt videoes to get working

[@akoskm]

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.

[@nikolovlazar]

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).

[@akoskm]

Thanks, this is what I was looking for!

[@user-vc2pm5xv7s]

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?

[@drawog9850]

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 ?

[@nikolovlazar]

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.

[@drawog9850]

@@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 :')

[@nikolovlazar]

@@drawog9850 glad you fixed it!

[@ghostorder]

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.

[@nikolovlazar]

I haven't had the need to do this, but hopefully some of the viewers of this video has figured that out.

[@zettlrobert]

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.

[@ghostorder]

@@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

[@newbiedb]

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?

[@_stevek]

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.

[@newbiedb]

​@@_stevek Thanks for your reply. After two days of struggling, I decided to use VSCode for debugging :(

[@nikolovlazar]

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.

[@dgleitaocontratos]

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.

[@nikolovlazar]

I'm currently figuring out python debugging in both vscode and neovim 😅

[@davidlee588]

why not many node devs use nvim? i guess most of them r not smart enough to handle the config issue.

[@TheCocktales]

FINALLY!! THANK YOU!!!!

[@ThalesTheDuck]

The selected configuration references adapter `node`, but dap.adapters.node is undefined

[@nikolovlazar]

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.

[@marksabelita]

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

[@nikolovlazar]

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.

[@travisweedon1234]

Is it possible to jump to different stack locations? Then once you're there, are debug values in the REPL relative to the context of that stack? Seems impossible to find someone that shows this, also seems near impossible to set it up.

[@nikolovlazar]

What do you mean by jumping to different stack locations? Like jumping to a certain breakpoint, or a specific line?

[@travisweedon1234]

@@nikolovlazar I try to explain - drive.google.com/file/d/1xihxGaWwYJvB-5JSlJvuUUtVbrmPXECz/view?usp=drive_link