opened
gkatsanos
username_0
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)
One more issue for SSR debugging not working
issue
created
gkatsanos
username_0
@danielpost 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?
comment
created
fabis94
username_1
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.
comment
created
ed3899
username_2
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
  }
}
```
comment
created
fabis94
username_1
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.
comment
created
imuradevelopment
username_3
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...
comment