Vercel Logo

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.

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.

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.