Nuxt.js: How to debug nuxt in JetBrains WebStorm?

[xiaoyun-studio]

How to debug nuxt in JetBrains WebStorm?

_{This question is available on Nuxt.js community (#c1407)}

[NicoPennec]

I'm not user of WebStorm, but you should be able to add this task to your package. json:

"scripts" {
  "dev":"nuxt",
  "dev-debug":"node --debug node_modules/.bin/nuxt",

then run the dev-debug script via webstorm debug mode.

(inspired by VS Code debugging: https://medium.com/@marshallswain/debugging-nuxt-js-with-visual-studio-code-724920140b8f)

[awronski]

No sure how to do this.

I added "dev-debug": ""dev-debug": "node --inspect node_modules\\nuxt\\bin\\nuxt" to scripts.
(Windows version with node 8)

Then configured IntelliJ like this:

When I click "Debug" the app is starting. I can open Chrome Developer Tools and connect to the Node.

But the breakpoints in the IntelliJ doesn't work and in the Chrome Sources I see only node_modules

[xiaoyun-studio]

debug config:

add debugger to vue:

debug:

[awronski]

@xiaoyunStudio Thanks for help. The IDE starts the app, doesn't stops at breakpoints but at least stops at debugger.

But the problem is that all variables are undefined.

Any suggestions?

[AdmiralPotato]

I would also love to be able to use breakpoints. Anyone have any ideas?

The above setup using the debugger trick is also working for me in IntelliJ IDEA Ultimate. Thank you for sharing this, @xiaoyunStudio - even this is already helping a lot.

I have found it useful to wrap the debugger statement like this, so the browser will keep re-triggering the page load on changes, without getting stuck in the chrome devtools when it hits the broken line:

if (context.isServer) {
    debugger
}

[pi0]

Wow. I really love this topic. Would be awesome if we have a section in docs FAQ about "How to debug SSR" before closing issue. (& Certainly, contributions welcome)

[awronski]

Hi! There must be a way to do this. WebStorm is the one or maybe event the best IDE. If it is possible to debug React or webpack why not Nuxt.

I follow both @xiaoyunStudio suggestion and official WebStorm docs but it doesn't work as it suppose to. Especially the undefined variables are big problem. With this debuging is useless.

There must be someone who know how to do this :)

[alterhu2020]

Also same question for this debug feature , all the variables are undefined ,
Why close this topic here?

[fbrbovic]

I am also looking for answer to this, has anyone found a proper solution yet ?

[Etheryte]

Not sure why this was closed, @xiaoyun-studio? Debugging the serverside part of the code is a crucial part of any serious development, the current approach of simply logging errors and showing an error page is not sufficient.

[jetrii]

Is there an update on this? This is a 100% must have feature in my book.

[o1lab]

..bump

[uptownhr]

bump bump

[LancerComet]

I have posted configuration for Webstorm in issue #2781

[bingtimren]

LancerComet's configuration works so far only allow the breakpoint show at the right line. However the variables are still undefined. I knew the variable is defined because I have a line "console.log(theVariable);" right before "debugger" and the output is right. But if I type "theVariable" on the console it's not defined. How can this happen? My guessing is that this is not a source map problem but webpack / loader issue? Anyone has a solution to the variable undefined problem?

[bingtimren]

Ok I may have find a way to work with this variable undefined problem, not to solve the problem. The variables are there, but under a different name. For example, I have "import {Auth} from 'aws-amplify'". I know it worked cause right before "debugger" I have "console.log(Auth)" and it worked. However if I type "Auth" in console it said the variable is not defined.

If I switch to "sources" tab and look at the "Local" tab at the right side, although I cannot find "Auth", I can find "__WEBPACK_IMPORTED_MODULE_1_aws_amplify__" and then "__WEBPACK_IMPORTED_MODULE_1_aws_amplify__.Auth" would be what I'm looking for.

So, all variables should be there, it's just not the same name. In other words, what's running (where __WEBPACK_IMPORTED_MODULE_1_aws_amplify__ is inside) is different from what's shown in the inspector (the original file where "Auth" is inside).

This is still painful but not that miserable. Hope this helps.

[bingtimren]

And this seems to relate to webpack transpiling. I tested with the nuxt starter template. In pages/index.vue, if I put "debugger" under "import AppLogo from '~/components/AppLogo.vue'", open Chrome inspector, upon paused, I cannot find "AppLogo" in the local variable but __WEBPACK_IMPORTED_MODULE_0__components_AppLogo_vue__. Now if I change the line "import AppLogo from '~/components/AppLogo.vue" to "const AppLogo = require('~/components/AppLogo.vue')" and reload page, upon pause, I can find AppLogo in local variables.

[bingtimren]

Ok. For the local variable disappear problem, if I set devtool to 'eval' with the following code in nuxt config.

build: {
extend (config, { isDev, isClient }) {
config.devtool = 'eval'
.....

At break point, I can see the "real" code my browser is running (after compiled), not the code I wrote in the component. The real code would, of course, works exactly the same as the code I wrote (at least, should be), but is different. This should explain the missing local variables.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.