Nuxt 3 (typescript) breakpoint not working

there is no dedicated configuration for Nuxt; the steps/configurations are mostly the same as for Vue apps (https://www.jetbrains.com/help/webstorm/2021.2/vue-js.html#vue_running_and_debugging_debug): start your app with npm run dev, then use the JavaScript Debug run configuration with your server URL (usually http://localhost:3000/) to attach the debugger to your page

The standard settings do work for the vue components. But the debugger doesn't break on the in the server/api. Could you please provide some guidance / settings for debugging a nuxt3 server?

Doesn't work for me as well, neither in WebStorm nor in VSCode

The problem is in the ts-loader. It generates weird sourcemaps that don't allow resolving the original sources reliably. See https://github.com/vuejs/vue-cli/issues/6030#issuecomment-723056004

Right now, we can't offer any solution for the issue, sorry

Related tickets: https://youtrack.jetbrains.com/issue/WEB-46222, https://youtrack.jetbrains.com/issue/WEB-46560

I don't have any problems debugging in vs-code. Here are my settings.

{

"version": "0.2.0",

"configurations": [

{

"type": "pwa-node",

"request": "launch",

"name": "Launch Program",

"skipFiles": [

"<node_internals>/**"

],

"program": "${workspaceFolder}/tailwind.config.js",

"outFiles": [

"${workspaceFolder}/**/*.js"

]

}

]

}

please share a project I can use to reproduce the issue; with all projects I've tried, debugging in VSCode doesn't work just as in Webstorm. And I don't believe that using the tailwind configuration file as a program in launch configuration can help in debugging Nuxt apps:)

Here you go: https://github.com/jurassicjs/nuxt3-fullstack-tutorial

Thanks for taking the time to check it out.

I have issues making this app up and running (missing API URL, etc.)

Please share a screencast that shows the steps in VSCode that make a debugger work there

I have a whole series on it :-)

https://www.youtube.com/watch?v=A24aKCQ-rf4&t=1065s

But all you really need to know is:

make a .env in the root of the project:

Ok. At least some breakpoints (in apps/nuxt-app/pages/login.vue and apps/nuxt-app/pages/index.vue) work fine for me. I start the app with npm run dev in apps/nuxt-app folder and then debug the app with JavaScript Debug run configuration

you have the incorrect repo. I accidentally pasted the wrong one but edited the comment afterwards. You were very quick. :-) 

https://github.com/jurassicjs/nuxt3-fullstack-tutorial

is the correct repo.

I agree the frontend debugging is working fine. It's the server that is the issue. 

Sorry for the mixup

Ok. How do you start the server, what files do you try to debug?

Here's a demo video: https://youtu.be/3W3Q_tyBaYo

If you have any questions after watching the video please let me know. Thanks

well... I must be doing something wrong, but I can't get it to work. In VSCode, I've put a breakpoint in server\api\auth\getByAuthToken.ts ; I can't see Run script: dev in the Launch popup, Launch program action launches a stupid useless launch configuration that runs node tailwind.config.js. So I've created a new launch configuration to run dev NPM script per instructions in https://code.visualstudio.com/docs/nodejs/nodejs-debugging:

The I select this configuration and start the debugger, and Ctrl+click the link in the terminal to open a browser...

It open successfully at localhost:3000, but no breakpoints are hit on refreshing the page... What do I miss?

As I showed in the video, for the getAuthByToken breakpoint, you need to have an auth_token cookie set in the browser. 

You could either set it manually, or create a user via the UI. 

You could also just create a random endpoint that is always called. 

If you have any questions please let me know. 

Please could you advise on required steps?

step 1: open browser to localhost:3000

step 2: Set auth_token cookie in browser (the value doesn't matter if you just want to check the debugger)

step 3: set debugger sever/api/auth/getAuthByToken

step 4: start app using debugger (use npm run dev option)

step 5: Refresh browser 

The debugger will stop at the breakpoint 

Thanks, reproduced, submitted as https://youtrack.jetbrains.com/issue/WEB-57118/NuxtTypescript-server-side-breakpoints-not-resolved. Looks like WebStorm can't correctly parse the produced sourcemaps