Nuxt.js: SSR debug

[rmartins90]

Does anyone do debug on node server? I'm trying to figure out if there's any debug mode in nuxt command but I can't find any debug opened port or parameter.

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

[Atinux]

Please take a look at the last release for SSR bundle sourcemaps: 0.10

[rmartins90]

Thanks @Atinux. Even though it would be great to produce some documentation about this.

[irobayna]

@Atinux I'm running the very latest and when I try to debug I am getting nowhere. I am using an Express Application + Nuxt.JS

Here is my debug command:

"debug": "redis-server & NODE_ENV=development node --inspect --debug-brk ./bin/www",

Are the SSR bundle sourcemaps automatic? Any pointers about how to actually start debugging would be very helpful.

Thank you very much!

[Atinux]

What kind of error do you want to debug @irobayna ?

[irobayna]

Normally on server apps I able to step through the code (express, sails, etc)

I'm just wondering why I am not able to debug the server side on the same manner I would normally debug lets say an express app.

[Atinux]

@irobayna this is because vue-server-renderer use node vm to run the code on the server, which makes it harder to debug: https://github.com/vuejs/vue/blob/dev/src/server/bundle-renderer/create-bundle-runner.js

[marshallswain]

It's pretty simple to setup with Visual Studio Code:
https://medium.com/@marshallswain/debugging-nuxt-js-with-visual-studio-code-724920140b8f

You can probably use a similar process with another debugger.

[alterhu2020]

@marshallswain , I tried the page you suggested ,but it gives below exception from vscode:

Debugging with inspector protocol because a runtime executable is set.
npm.cmd run debug 
Debugger listening on ws://127.0.0.1:9229/843d494d-9b6c-408f-9138-915e62d963fd
c:\ProjectStack\nuxtjs20170926\node_modules\.bin\nuxt.cmd:1
(function (exports, require, module, __filename, __dirname) { @IF EXIST "%~dp0\node.exe" (
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:588:28)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Function.Module.runMain (module.js:665:10)
    at startup (bootstrap_node.js:201:16)
    at bootstrap_node.js:626:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] debug: `node --inspect node_modules/.bin/nuxt.cmd`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] debug script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Node_repository\cache\_logs\2017-09-26T05_10_45_317Z-debug.log

The command i used here is:
"debug":"node --inspect node_modules/.bin/nuxt.cmd",
Do you have any suggestion for this issue ,or how to debug the nuxt in vscode?

[marshallswain]

@alterhu2020 Sorry, I don't have a Windows machine to test this problem on.

[alterhu2020]

@marshallswain Is that worked maybe for your Mac System?

[marshallswain]

@alterhu2020 Yes. It works on Mac and would probably be similar on Linux.

[n1kk]

"debug":"node --inspect node_modules/.bin/nuxt.cmd"
This doesn't work because node is trying to run a .cmd file.

The correct command for windows platform should look like this
"dev-debug": "node --inspect node_modules/nuxt/bin/nuxt",

Now I can trigger breackpoints in VS Code with debugger but it will show generated sources with path like <node_internals>/pages_index.js, seems like SSR bundle sourcemaps don't work, or need to be enabled somehow. At least locals are visible and I can step over.

Is there any info or docs somewhere on SSR bundle sourcemaps?
Maybe some walkthrough or example sources?

I am using latest 1.0.0 release.

[n1kk]

Just tested it with a fresh install of starter-template
vue init nuxt-community/starter-template nuxt-test2
and I got this error while trying to lunch with debugger

SourceMaps.getMapForGeneratedPath: exception while processing path: f:\Dev\web_playgrounds\nuxt\nuxt-test2\node_modules\postcss-font-family-system-ui\src\main.mjs, sourcemap: data:application/json;charset=utf-8,%7B%22version%22:3,%22sources%22:%5B%22f:%5C%5CDev%5C%5Cweb_playgrounds%5C%5Cnuxt%5C%5Cnuxt-test2%5C%5Cnode_modules%5C%5Cpostcss-font-family-system-ui%5C%5Csrc%5C%5Cmain.mjs%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA%22%7D
SyntaxError: Unexpected token � in JSON at position 0
    at JSON.parse (<anonymous>)
    at new SourceMap (c:\Program Files\Microsoft VS Code\resources\app\extensions\ms-vscode.node-debug2\node_modules\vscode-chrome-debug-core\out\src\sourceMaps\sourceMap.js:20:25)
    at sourceMapContentsP.then.contents (c:\Program Files\Microsoft VS Code\resources\app\extensions\ms-vscode.node-debug2\node_modules\vscode-chrome-debug-core\out\src\sourceMaps\sourceMapFactory.js:53:28)
    at <anonymous>

server still works, except ssr bundle source maps

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