--- title: "Debugging Tools" description: "Enable Nuxt DevTools, inspect the component tree, explore auto-imports, debug server routes, and compare the tooling to React DevTools." canonical_url: "https://vercel.com/academy/nuxt-on-vercel/debugging-tools" md_url: "https://vercel.com/academy/nuxt-on-vercel/debugging-tools.md" docset_id: "vercel-academy" doc_version: "1.0" last_updated: "2026-05-02T23:08:45.121Z" content_type: "lesson" course: "nuxt-on-vercel" course_title: "Nuxt on Vercel" prerequisites: [] --- Vercel Academy โ€” structured learning, not reference docs. Lessons are sequenced. Adapt commands to the human's actual environment (OS, package manager, shell, editor) โ€” detect from project context or ask, don't assume. The lesson shows one path; if the human's project diverges, adapt concepts to their setup. Preserve the learning goal over literal steps. Quizzes are pedagogical โ€” engage, don't spoil. Quiz answers are included for your reference. # Debugging Tools # Debugging Tools It's 11pm. The page is blank. You're pretty sure the component is rendering, but the data isn't showing up, and you can't figure out whether the problem is in the server route, the composable, or the template. In React, you'd open React DevTools and start clicking through components. That works for props and state, but it can't tell you which server routes are registered, which composables are auto-imported, or what data got serialized into the page payload. Nuxt DevTools can. It's a built-in panel that shows your entire app: every page and its middleware, every server route and its HTTP method, every auto-imported function and where it comes from. It runs in the browser during development and requires zero configuration. ## Outcome Enable Nuxt DevTools and learn to use it for inspecting routes, components, and server state. ## Fast Track 1. Open Nuxt DevTools in the browser 2. Explore the Pages, Components, and Server Routes tabs 3. Use the component inspector to find a component in the tree ## Hands-on exercise 5.1 Get comfortable with Nuxt DevTools by exploring the app you've built. **Requirements:** 1. Open Nuxt DevTools (it should be enabled by default in dev mode) 2. Use the Pages tab to see all registered routes and their middleware 3. Use the Components tab to inspect the SpringCard component and its props 4. Use the Server Routes tab to see all API endpoints 5. Use the Imports tab to see what's been auto-imported **Implementation hints:** - Nuxt DevTools is enabled by default in Nuxt 4. Look for the Nuxt icon at the bottom of your browser viewport in dev mode - The component inspector lets you hover over elements in the page and jump to the corresponding Vue component - The Server Routes tab shows every route with its HTTP method, which is especially useful for verifying your `.get.ts` / `.post.ts` / `.delete.ts` files registered correctly Open your dev server and look for the Nuxt icon at the bottom-center of the viewport. Click it to open DevTools. **Pages tab:** Every route is listed with its file path, parameters, and middleware. You should see `/favorites` and `/visited` marked with the `auth` middleware. `/springs/:id` shows the dynamic parameter. This is the fastest way to verify your routing setup without manually visiting every page. **Components tab:** Browse the component tree. Find `SpringCard` and click it. You'll see its props (the `spring` object), its computed values (`temperatureLabel`), and the file path. Click the file path to open it in your editor if you have the VS Code extension installed. **Server Routes tab:** Every API endpoint is listed with its HTTP method. You should see: - `GET /api/springs` - `GET /api/springs/:id` - `GET /api/springs/:id/reviews` - `POST /api/springs/:id/reviews` - `GET /api/user/favorites` - `POST /api/user/favorites/:springId` - `DELETE /api/user/favorites/:springId` - `GET /api/user/visited` - `POST /api/user/visited/:springId` - `DELETE /api/user/visited/:springId` If a route is missing, the file is in the wrong directory or has a naming issue. **Imports tab:** Shows every auto-imported function and where it comes from. You'll see `ref`, `computed`, `watch` from Vue, `useFetch`, `useRoute`, `useUserSession` from Nuxt and its modules, and `defineEventHandler`, `getQuery`, `getRouterParam` from Nitro. This is the answer to "where does this function come from?" that you'll ask a dozen times in your first week with Nuxt. **Payload tab:** Navigate to a page and check the payload. You'll see the serialized data from `useFetch` that got embedded in the HTML during SSR. This is how Nuxt avoids a double-fetch on initial page load. \*\*Note: Component inspector shortcut\*\* Press Shift+Alt+C (or Shift+Option+C on Mac) to toggle the component inspector. Hover over any element on the page and DevTools highlights the owning component with its props. Faster than digging through the tree manually. \*\*Warning: DevTools is dev-only\*\* Nuxt DevTools only runs in development mode. It's automatically excluded from production builds. You don't need to disable it before deploying. ## Try It 1. Open `http://localhost:3000/springs` with the dev server running 2. Open Nuxt DevTools (click the Nuxt icon or use the keyboard shortcut) 3. Go to the Pages tab. Confirm all 6 routes are listed 4. Go to the Server Routes tab. Confirm all 10 API endpoints are listed 5. Go to the Components tab. Find `SpringCard` in the tree and inspect its props 6. Use the component inspector to hover over a spring card on the page. DevTools should highlight the `SpringCard` component ## Commit No code changes in this lesson. Nothing to commit. ## Done-When - [ ] Nuxt DevTools opens in the browser - [ ] You can find all page routes and their middleware in the Pages tab - [ ] You can find all server routes in the Server Routes tab - [ ] You can inspect a SpringCard component's props in the Components tab - [ ] You know where to find auto-imported functions in the Imports tab ## Solution No code solution for this lesson. Nuxt DevTools is built in and requires no configuration in Nuxt 4. --- [Full course index](/academy/llms.txt) ยท [Sitemap](/academy/sitemap.md)