Inertia DevTools тепер доступний у Chrome Web Store. Це розширення додає панель «Inertia» до Chrome DevTools, яка фіксує кожен візит і дозволяє детально аналізувати обмін даними між клієнтом та сервером.
# Що відображає панель
Список запитів відображається у вигляді таймлайну в лівій частині екрана. Ви можете фільтрувати їх за методом, типом чи статусом, а також шукати за URL або компонентами. Пов’язані запити групуються автоматично: візит і всі подальші partial reloads, deferred loads, polls, prefetches та запити Precognition залишаються в межах одного запису, не захаращуючи список.
Для кожного запиту доступні чотири вкладки:
- Props — дерево всіх пропсів із мітками для deferred, optional, merged та shared даних.
- HTTP — заголовки та тіло запитів і відповідей.
- Route — назва маршруту, URI та екшн контролера.
- Page — повний стан сторінки після того, як Inertia обробила відповідь, включно з даними з partial reloads.
Посилання на файли в панелі інтегровані з вашим редактором коду. «З коробки» підтримуються VS Code, PhpStorm, Cursor та Zed. Для Sublime Text знадобиться плагін для обробки URL-схем, наприклад, SublimeUrl.
# Клієнтські події
Деякі взаємодії відбуваються без звернення до сервера, тому вони не з’являються у вкладці Network. Проте Inertia DevTools фіксує клієнтські візити та запити, отримані з prefetch-кешу, тож ви зможете інспектувати їх у загальному списку.
# Конфіденційність: дані залишаються локальними
Логи зберігаються у storage/inertia-devtools і видаляються автоматично. Налаштувати шлях, ліміти та термін зберігання можна в config/inertia.php у секції devtools.storage. Жодна інформація не передається на сторонні сервіси.
Чутливі дані, як-от паролі, токени чи заголовки авторизації, автоматично маскуються (redacted) перед збереженням. Список ключів для маскування можна змінити в devtools.redact. Службові маршрути на кшталт Telescope та Horizon не записуються.
# Як почати роботу
Вам не потрібно встановлювати додаткові пакунки — інструмент уже вбудований у ядро бібліотек. Достатньо оновити client-side adapter до версії ^3.6, а Laravel adapter — до ^3.2. Встановіть розширення, відкрийте Chrome DevTools і перейдіть на вкладку Inertia. Для повної функціональності запустіть Vite.
Більше подробиць — у документації Inertia DevTools. Сирцевий код розширення доступний на GitHub під ліцензією MIT.