How do you debug and profile a Nuxt.js application?

Answer

Debugging a Nuxt app requires different tools for different layers. For client-side issues: Vue DevTools (browser extension) shows the component tree, props, state, and router state; Nuxt DevTools shows imports, hooks, and page metadata. For server-side issues: Nuxt's development server outputs detailed logs to the console; you can use console.log in server routes and they appear in the terminal. For SSR hydration mismatches: check the browser console for Vue warnings about mismatch, and use import.meta.server/import.meta.client guards. For performance profiling: use Chrome DevTools Performance tab for client rendering, Nuxt DevTools' timeline, and nuxt analyze for bundle sizes. Production errors should be monitored with tools like Sentry, which has a @sentry/nuxt module. Server-side CPU profiling can use Node.js's built-in --prof flag with Nitro.