Nuxt•2d ago

Sourcemap in devTools in Nuxt 2

How can I enable sourcemap for debugging in Chrome devtools (Perfomance Tab)? I want to see '/component/alert.vue' instead of something like 'b4f815a.js'

2 Replies

kapa.ai•2d ago

Hi @Yuri. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To enable sourcemaps for debugging in Chrome DevTools (Performance Tab) in Nuxt 2, you need to configure the build section in your nuxt.config.js to generate sourcemaps for the client bundle. By default, Nuxt 2 enables sourcemaps for the server in development, but not for the client in production. To see original file names like /components/alert.vue instead of hashed JS files, you should explicitly enable sourcemaps for the client. Here's how you can do it:

// nuxt.config.js
export default {
  build: {
    extend(config, ctx) {
      // Enable source maps in development for client bundle
      if (ctx.isDev && ctx.isClient) {
        config.devtool = 'source-map'
      }
    }
  }
}

// nuxt.config.js
export default {
  build: {
    extend(config, ctx) {
      // Enable source maps in development for client bundle
      if (ctx.isDev && ctx.isClient) {
        config.devtool = 'source-map'
      }
    }
  }
}

This configuration ensures that source maps are generated for the client bundle in development mode, allowing you to see original Vue file paths in Chrome DevTools. Note: If you want to enable sourcemaps in production as well, you can adjust the condition or set config.devtool = 'source-map' unconditionally, but be aware of potential performance and security implications. The knowledge sources confirm that enabling source maps in the build configuration is the standard approach for Nuxt 2, and the devtool option is the relevant Webpack setting for this purpose. For more details, see the example in the Stack Overflow post, where the devtool is set based on the environment in the extend function of the build config Nuxt Fatal Error SyntaxError: Invalid or unexpected token Part 8. If you are using Nuxt 3, there are additional options for sourcemap configuration, but for Nuxt 2, the above approach is recommended. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@740173469404364872> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Sourcemap in devTools in Nuxt 2

Did you find this page helpful?