Cài đặt
1
Bump the client-side and server-side libraries
Không có package riêng cần cài trong app. DevTools nằm trong các library bạn đã dùng; chỉ cần client-side adapter phiên bản
^3.6 và Laravel adapter ^3.2.2
Install the Chrome extension
Cài Inertia DevTools từ Chrome Web Store, hoặc tải release mới nhất từ GitHub rồi load unpacked.
3
Enable or disable (optional)
DevTools tự động bật trong development, nên phần lớn ứng dụng không cần cấu hình ban đầu. Để bật/tắt rõ ràng hoặc truy cập từ environment khác, xem Bật DevTools.
4
Open the panel
Mở Chrome DevTools trên ứng dụng Inertia rồi chọn panel “Inertia”. Điều hướng trong app và mỗi visit sẽ xuất hiện trên timeline.
Chạy Vite development server để có đầy đủ chức năng. Ở dev mode, Inertia expose hook panel cần cho chi tiết phía client như visit option và request grouping. Nếu không chạy, request vẫn được ghi nhưng một số client-side feature không có.
Timeline
Mỗi Inertia request được liệt kê trong timeline bên trái, có live indicator khi đang chạy. Bạn có thể filter theo method, request type hoặc status, hoặc tìm theo URL và component. Request type gồm full visit, partial reload, deferred prop load, poll, prefetch và Precognition validation. Request liên quan được group thay vì liệt kê riêng, nên page visit và follow-up request xuất hiện cùng nhau. Grouping được xác định phía client vì chỉ browser mới phân biệt poll với full navigation hoặc biết prefetch có được phục vụ từ cache hay không.
Kiểm tra một Request
Chọn request sẽ mở phần chi tiết, chia thành bốn tab. Tab Props liệt kê mọi prop dạng cây, có badge cho biết prop deferred, optional, merged hay shared bằngshare(), cùng link file:line vào editor. Value có thể expand inline. Tab HTTP hiển thị request/response header và body với giá trị nhạy cảm đã redact, còn tab Route hiển thị matched route name, URI và controller action.
Tab Page hiển thị full page state sau khi Inertia xử lý response. Partial reload có thể chỉ gửi một prop trên wire, nhưng Inertia merge nó vào page hiện có, nên tab này hiển thị kết quả hoàn chỉnh chứ không chỉ dữ liệu vừa tới.
Client-side events
Một số tương tác không bao giờ tới server nên Network tab không hiển thị gì. Extension ghi chúng thành timeline entry riêng: Client Side Visits và request được phục vụ từ cache prefetch.Editor links
File reference trong panel liên kết trực tiếp tới editor. Bạn có thể dùng editor picker trên toolbar để chọn editor. VS Code, PhpStorm, Cursor và Zed đăng ký URL scheme khi cài và hoạt động ngay. Sublime Text không có URL-scheme handler, nên link không hoạt động cho tới khi cài handler như SublimeUrl.Cách hoạt động
DevTools gồm hai phần chia việc trên mỗi request. Laravel adapter ghi server side khi response được chuẩn bị, còn Chrome extension capture client side; hai phần được ghép thành một timeline entry. Chúng giao tiếp qua protocol đã được tài liệu hóa mà bất kỳ server adapter nào cũng có thể implement, với Laravel adapter làm implementation tham chiếu. Entry được lưu local cùng origin nên không gửi gì tới remote service và không cần account hay cloud sync.Bật DevTools
DevTools có hai switch độc lập, một phía server và một phía client; cả hai mặc định bật trong development và tắt trong production. Server recorder được kiểm soát bằng environment variableINERTIA_DEVTOOLS_ENABLED, tự bật trong local environment. Bạn có thể đặt rõ giá trị để override mặc định.
dev trong createInertiaApp(), mặc định theo development mode của Vite. Các hook expose visit option và request grouping đã mô tả; tắt chúng vẫn ghi request trên timeline nhưng thiếu chi tiết phía client.
chrome://extensions.
Cấu hình
Recorder được cấu hình dưới keydevtools trong file config/inertia.php, với environment variable cho các option phổ biến.
Redaction
Sensitive prop key và header được redact trước khi entry được lưu, nên giá trị như password, token và authorization header không bao giờ đến panel. Bạn có thể tùy chỉnh key/header bị redact dướidevtools.redact trong config.
Một số path bị loại hoàn toàn khỏi recording, gồm chính DevTools endpoint và tooling route phổ biến như Telescope, Horizon. Có thể điều chỉnh mảng devtools.except để record hoặc ignore thêm path.
Storage
Entry được ghi vàostorage/inertia-devtools và tự động prune. Bạn có thể điều chỉnh retention, limit và storage path dưới devtools.storage trong config.
Bật ngoài Local
Recorder mặc định chỉ cho phép local environment. Để cho phép truy cập ngoài local, hãy định nghĩa gate và tham chiếu nó bằng environment variableINERTIA_DEVTOOLS_GATE.
web trước khi authorize, nên session đã resolve authenticated user khi gate chạy. Có thể điều chỉnh stack dưới devtools.middleware nếu ứng dụng xác thực user theo cách khác.