Inertiajs Devtools

Inertia.js Devtools – Debug Your Inertia Applications with Ease

The unofficial Inertia.js devtools extension that provides a powerful debugging interface for modern full-stack applications. Built specifically for developers working with Inertia.js, this extension transforms your browser's developer tools into a comprehensive debugging suite.

KEY FEATURES:

Page Inspection
• View current component details, URL, and asset version
• Interactive JSON explorer for all component props
• Dedicated views for shared data and deferred props
• Real-time updates as you navigate your application

Request Timeline
• Complete history of all Inertia requests with timestamps
• Visual indicators for request types (INITIAL, REDIRECT, PARTIAL)
• Detailed request/response inspection including headers and payload
• Performance metrics with response time tracking

Form Debugging
• Isolated view for form submissions (POST, PUT, PATCH requests)
• Easy inspection of form data and validation errors
• Quick identification of failed form submissions

Route Management
• Automatic route listing for Laravel + Ziggy applications
• Quick reference to all named routes in your application
• Searchable route directory

Advanced JSON Viewer & Customizable Toolbar
• Multiple customizable themes (VS Code, GitHub, Nord, and more)
• Adjustable font size, indentation, and display options directly from the toolbar
• Quick search and filtering for JSON data
• Copy-to-clipboard functionality
• Collapsible object structures for better navigation
• Toolbar controls for expanding/collapsing all, adjusting indentation, and font size

BUILT FOR DEVELOPERS:
• Framework Detection: Automatically identifies React, Vue, or Svelte
• Theme Options: Light, dark, or system theme matching
• Search & Filter: Find specific data across requests and props
• Performance Focused: Minimal impact on application performance
• Clean Interface: Intuitive design that integrates seamlessly with Chrome DevTools
• Customizable Toolbar: Instantly adjust JSON viewer settings for your workflow

PERFECT FOR:
• Full-stack developers using Inertia.js
• Teams building SPAs with server-side routing
• Anyone debugging Laravel + Inertia.js applications
• Developers working with Vue, React, or Svelte + Inertia

INSTALLATION:
Simply install from the Chrome Web Store and open your browser's developer tools. The Inertia tab will automatically appear when visiting Inertia.js applications.

Transform your Inertia.js development workflow with professional-grade debugging tools designed specifically for modern full-stack applications.