Dev Tools

One includes a unified development tools panel to help you debug and optimize your app. Open it with Alt+Space (Option+Space on Mac) to see a spotlight-style picker.

Opening Dev Tools

Press Alt+Space to open the spotlight menu, then select a tool. You can also use keyboard shortcuts to jump directly to a specific panel:

• Alt+S - SEO Preview
• Alt+R - Route Info
• Alt+L - Loader Timing
• Alt+E - Errors

Press Escape to close any panel.

SEO Preview

See how your page appears in Google search results and check for common SEO issues:

• Google Preview - Live preview of your search result appearance
• Meta Tags - View title, description, and Open Graph tags
• Issues - Warnings for missing or too-long meta tags

Route Info

Debug the current route state:

• Pathname - The current URL path
• Segments - Path broken into segments
• Route Params - Dynamic params from the route (e.g., [id])
• Search Params - Query string values

Loader Timing

Visualize loader performance with a waterfall breakdown:

• Module Load Time - Time to import the loader module
• Execution Time - Time to run the loader function
• Total Time - Combined timing with visual bar

Useful for identifying slow loaders and optimizing data fetching.

Errors

Track errors from error boundaries and loaders:

• Error Type - Whether from a boundary or loader
• Timestamp - When the error occurred
• Message - The error message

Errors are collected in real-time so you can see issues as they happen.

Source Inspector

Hold Option (Mac) or Alt (Windows/Linux) for 0.8 seconds and hover over any element to see its source location highlighted. Click to open a picker showing:

• Quick actions:
  • Open - Open topmost component in your editor
  • Path - Copy all source paths to clipboard
  • Selector - Copy a smart CSS selector (prefers IDs)
  • Record - Start recording user input (see below)
• Parent list - Click any parent component to open that file

This requires the data-one-source attribute which One adds automatically to components during development.

Input Recording

Record user interactions for bug reports or AI-assisted debugging. Start recording from:

• The Record button in the Source Inspector picker
• Record Input in the Alt+Space spotlight menu

After a 2-second countdown, recording begins. Tap Option to stop and copy the log to clipboard.

The output is a compact, line-based format optimized for AI consumption:

# Recording 2024-03-02T12:30:00.000Z
# https://localhost:3000/dashboard
# components: Button < Card < Dashboard
# selector: [data-testid="submit-btn"]
# window: 1920x1080 scroll:0,0
# duration: 3200ms events: 28

0 click 450,320 btn:0 [#submit] @Button.tsx:15 "Submit"
85 keydown Tab
142 focus [input.email]
200 input val:"test@" [input.email]

# final hover: [.sidebar > nav]
# final source: Nav.tsx:42:5

Events captured include clicks, keyboard input, scroll, focus/blur, input changes, wheel, resize, and more.

Panel Features

The dev tools panel is:

• Draggable - Drag the header to reposition
• Edge Snapping - Snaps to screen edges with 10px padding
• Resizable - Tracks window resize when snapped to edges

Configuration

Dev tools are enabled by default in development mode. To disable them, set:

// vite.config.ts
import { one } from 'one/vite'

export default {
  plugins: [
    one({
      devtools: false
    })
  ]
}