Inertia DevTools

In-app developer tools for Inertia.js v2.0+. See what happens behind every click.

Installation

npm install inertia-devtools --save-dev

Quick Start

With Vite (recommended)

Add the plugin to your vite.config.ts:

import { defineConfig } from 'vite'
import { inertiaDevtools } from 'inertia-devtools/vite'

export default defineConfig({
  plugins: [
    inertiaDevtools(),
    // ... other plugins
  ],
})

The plugin auto-injects devtools into your Inertia entrypoint and strips them from production builds automatically.

Without Vite

Import and initialize manually:

import { createInertiaDevtools } from 'inertia-devtools'

if (process.env.NODE_ENV === 'development') {
  createInertiaDevtools()
}

Features

Props Inspector

Browse page props in an expandable tree. Toggle byte sizes per prop.

Props Diff

Compare props between navigations. Added, removed, and changed keys are highlighted with a change count badge.

Network Tab

HTTP request/response details with Inertia protocol fields (X-Inertia, X-Inertia-Version, partial data, etc.) and inline tooltips explaining each header.

Events Timeline

Full Inertia lifecycle in chronological order:

before → start → navigate → success → finish

Includes visit options (replace, preserveState, errorBag, etc.) and expandable raw event data.

Feature Detection

Badges appear automatically for active Inertia features:

Badge	Feature
PARTIAL	Partial reload (only / except)
DEFERRED	Deferred props
MERGE	Merge strategy
DEEP MERGE	Deep merge strategy
PREPEND	Prepend strategy
SCROLL	Scroll regions
ONCE	Once props
PREFETCH	Prefetched request
CACHED	Used prefetch cache (no XHR)
FLASH	Flash data present
REMEMBER	Remembered local state
ENCRYPTED	Encrypted history
CLEAR HISTORY	History cleared on this page

Each badge links to the relevant documentation page.

Request Filtering

Toggle visibility by category: visits, mutations, partial, deferred, prefetch, and client-side history changes.

Copy as Markdown

Copy structured context (summary, props diff, errors, features) for GitHub issues or AI chats.

More

• Dark/light/system theme with manual override
• Keyboard navigation -- arrow keys to browse requests, Escape to deselect
• Previous session -- requests from before page reload in a collapsible section
• Draggable trigger -- floating icon with position persisted to localStorage
• Shadow DOM isolation -- styles never leak into your app
• Framework agnostic -- works with React, Vue, and Svelte

Options

createInertiaDevtools({
  styleNonce: 'abc123', // CSP nonce for Shadow DOM styles
  enabled: true, // set to false to disable
  docsProvider: 'inertiajs', // or 'inertia-rails'
})

How It Works

Listens to Inertia DOM events and correlates them into request records. Intercepts XHR/fetch for network data and the history API for client-side visits.

The UI renders inside a Shadow DOM -- your app styles are never affected. State is kept in a bounded buffer (200 requests max).

Requirements

• Inertia.js v2.0+
• Modern browser (ES2020+)

Development

npm install
npm test
npm run build

License

MIT