One more issue for SSR debugging not working

[gplusdotgr]

Hey guys,

I'd like to contribute to the docs on the topic. If someone throws some quick info in this thread as I've spent hours and hours trying to get SSR VSCode debugging to work. Specifically there's nothing with regards to sourcemaps. As it stands, standard starter template is unable to bind to any breakpoints on VSCode for SSR code (asyncData() for example)

[danielroe]

Improving the docs on debugging sounds like a great idea. Are you still having trouble getting it working? Did you follow any of the community tutorials that are out there at the moment?

[gplusdotgr]

Unfortunately not. There are several github issues in the main nuxtjs repo , most of them closed/abandoned/stale. E.g. : https://github.com/nuxt/nuxt.js/issues/2734 https://github.com/nuxt/nuxt.js/issues/2341 https://github.com/nuxt/nuxt.js/issues/433 https://github.com/nuxt/nuxt.js/issues/2528

"in the wild" theres a couple of articles with obsolete VS launch.json Configurations (their API changes frequently I guess) https://sweetcode.io/debugging-nuxt-js-vs-code/ https://liftcodeplay.com/2019/12/25/how-to-debug-nuxt-js-with-vs-code/

My own personal experience is, one is able to attach a debugger to the node process, but breakpoints only work by specifically adding debugger; statements in the code, and even then, the file one gets is the compiled version and not the source code (I guess source maps are not working).

the latest version of the launch.json I tried is:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///*": "${workspaceRoot}/*",
        "webpack:///./*": "${workspaceRoot}/*"
      },
      "smartStep": true,
      "port": 3000
    },
    {
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "yarn",
      "runtimeArgs": ["run", "dev:debug"],
      "name": "server: nuxt",
      "address": "127.0.0.1",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///*": "${workspaceRoot}/*",
        "webpack:///./*": "${workspaceRoot}/*"
      },
      "port": 9229,
      "serverReadyAction": {
        "pattern": "listening on port 3000",
        "uriFormat": "http://localhost:3000",
        "action": "openExternally"
      }
    }
  ],
  "compounds": [
    {
      "name": "full stack nuxt",
      "configurations": ["client: chrome", "server: nuxt"]
    }
  ]
}

which seems funny because it doesn't even mention an "attach" request value.. There's a lot of incomplete or plain wrong recommendations in the articles so a page in the main docs would add a lot of value and less lost man hours to the community :) I'd write it and commit it myself if I knew what the proper Source map config is.

[gplusdotgr]

small update: I was able to breakpoint and sourceMap correctly client-side rendered code. I'm having some trouble mapping server-side files. (generally anything in asyncData/fetch or Vuex server side)

[gplusdotgr]

@danielroe if anyone from the team has experience on debugging and can give a tip or two, I'd gladly redact the doc for this and make a MR. It's possible though that some changes in the base webpack configuration are needed?

[fabis94]

Some sort of docs for debugging SSR are definitely necessary, I've also been unable to find any useful documentation for setting it up. I was able to start the nuxt process with the --inspect flag, but no breakpoints work.

Only by using debugger; directly in the source code, I was able to make Nuxt.js break

[ed3899]

Same issues here. I'm developing a static website with Nuxt and Typescript (No custom server) with these launch.json specs

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "runtimeExecutable": "C:\\Program Files (x86)\\BraveSoftware\\Brave-Browser\\Application\\brave.exe",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:4000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "server: nuxt",
      "args": ["dev"],
      "osx": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
      },
      "linux": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
      },
      "windows": {
        "program": "${workspaceFolder}/node_modules/nuxt/bin/nuxt.js"
      }
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": ["server: nuxt", "client: chrome"]
    }
  ]
}

And this is my debugging console on the server side:

C:\Program Files\nodejs\node.exe .\node_modules\nuxt\bin\nuxt.js dev
Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/vue-template-es2015-compiler/buble.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\vue-template-es2015-compiler\buble-browser-deps.umd.js.map'
Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/postcss-nesting/index.cjs.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\postcss-nesting\index.cjs.js.map'
2
Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/typescript/lib/typescript.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\typescript\lib\typescript.js.map'
Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/ts-loader/dist/index.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\ts-loader\dist\index.js.map'
Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/ts-loader/dist/constants.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\ts-loader\dist\constants.js.map'
Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/ts-loader/dist/instances.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\ts-loader\dist\instances.js.map'
Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/ts-loader/dist/after-compile.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\ts-loader\dist\after-compile.js.map'
Could not read source map for file:///d:/Documents/Web%20Portfolio/2.CMS%20Blog/cms-blog/node_modules/ts-loader/dist/utils.js: ENOENT: no such file or directory, open 'd:\Documents\Web Portfolio\2.CMS Blog\cms-blog\node_modules\ts-loader\dist\utils.js.map'

My tsconfig.json

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
    "esModuleInterop": true,
    "jsx": "preserve",
    "noEmitOnError": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "types": [
      "@nuxt/types",
      "@nuxtjs/axios",
      "@types/node",
      "@nuxt/content",
      "@nuxt/vue-app",
      "@nuxtjs/vuetify"
    ]
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

And my nuxt.config.js:

export const config = {
  // Target: https://go.nuxtjs.dev/config-target
  target: "static",

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    titleTemplate: "%s - cms-blog",
    title: "cms-blog",
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" }
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    "@nuxt/typescript-build",
    // https://go.nuxtjs.dev/vuetify
    "@nuxtjs/vuetify",
    "@nuxtjs/fontawesome",
    "nuxt-typed-vuex"
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    "@nuxtjs/axios",
    // https://go.nuxtjs.dev/pwa
    "@nuxtjs/pwa",
    "@nuxt/content",
    "@nuxtjs/google-fonts"
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {},

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: "en"
    }
  },

  //Font awesome config
  fontawesome: {
    component: "Fa",
    suffix: true,
    icons: {
      solid: ["faSearch"]
    }
  },

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    customVariables: ["~/assets/variables.scss"],
    theme: {
      dark: true,
      default: false,
      disable: false,
      options: {},
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        },
        light: {
          primary: colors.blue.lighten2,
          accent: colors.grey.lighten3,
          secondary: colors.amber.lighten3,
          info: colors.teal.darken1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

  //Dev configuration
  server: {
    port: 4000
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    cssSourceMap: true,

    extend(config, { isDev, isClient }) {
      if (isDev) {
        config.devtool = "source-map";
      }
    }
  },

  //env
  publicRuntimeConfig: {
    mode: process.env.NODE_ENV
  }
}

[stale[bot]]

Thanks for your contribution to Nuxt! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[fabis94]

I don't see why you wouldn't be able to reproduce this with the latest version, the issue would only disappear with some serious architectural changes. The resolution here, in my opinion, is to just write some useful guidelines/docs on how to debug server-side code.

[imuradevelopment]

After all, what do I need to do to set a "breakpoint" for the SSR code in "VScode" and debug the NuxtApp rendered in "chrome"? Nuxt is great, but if debugging is unstable...

[stale[bot]]

Thanks for your contribution to Nuxt! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[Harm-Nullix]

Why is this 2.x only? Issue does exist in 3.x, doesn't it?