> ## Documentation Index > Fetch the complete documentation index at: https://inertiajs-vi.tuantq.online/llms.txt > Use this file to discover all available pages before exploring further. # DevTools Inertia DevTools là Chrome extension ghi lại mọi Inertia visit và hiển thị trong DevTools panel riêng, cho biết chính xác mỗi visit đã gửi và nhận gì: prop nào được trả về, chúng deferred hay merged, request header nào được gửi và route/controller nào xử lý. DevTools là công cụ development local, được thiết kế để chạy cùng local development server. Recorder mặc định bị tắt ngoài local environment, nên DevTools không đi vào production trừ khi bạn cho phép rõ ràng. ## Cài đặt 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`. Cài Inertia DevTools từ [Chrome Web Store](https://chromewebstore.google.com/detail/inertiajs-devtools/cbaffpghpcbmgbnlpamegieokkpdlnih), hoặc tải release mới nhất từ [GitHub](https://github.com/inertiajs/inertia-devtools/releases) rồi load unpacked. 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](#enabling-devtools). 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](/v3/data-props/partial-reloads), [deferred prop load](/v3/data-props/deferred-props), [poll](/v3/data-props/polling), [prefetch](/v3/data-props/prefetching) và [Precognition validation](/v3/the-basics/forms#precognition). 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. Inertia DevTools panel Inertia DevTools panel ## 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ằng `share()`, 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](/v3/the-basics/manual-visits#client-side-visits) và request được phục vụ từ cache [prefetch](/v3/data-props/prefetching). ## 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](https://github.com/inopinatus/sublime_url). ## 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](/v3/advanced/devtools-protocol) 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 variable `INERTIA_DEVTOOLS_ENABLED`, tự bật trong local environment. Bạn có thể đặt rõ giá trị để override mặc định. ```env theme={null} INERTIA_DEVTOOLS_ENABLED=false ``` Client hook được kiểm soát bằng tùy chọn `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. ```js theme={null} createInertiaApp({ // ... dev: import.meta.env.DEV, }) ``` Để tắt chính panel, tắt extension trong `chrome://extensions`. ## Cấu hình Recorder được cấu hình dưới key `devtools` 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ưới `devtools.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ào `storage/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 variable `INERTIA_DEVTOOLS_GATE`. ```php theme={null} // app/Providers/AppServiceProvider.php use Illuminate\Support\Facades\Gate; Gate::define('viewInertiaDevTools', function ($user) { return $user->isAdmin(); }); ``` ```env theme={null} INERTIA_DEVTOOLS_ENABLED=true INERTIA_DEVTOOLS_GATE=viewInertiaDevTools ``` Ngoài local environment, DevTools endpoint authorize mỗi request qua gate và từ chối nếu không cấu hình gate. Local environment luôn được phép nên gate không thể khóa bạn khỏi DevTools khi làm việc local. Endpoint chạy middleware group `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. *** ## Tài liệu chính thức Bài dịch này được đối chiếu từ [tài liệu Inertia.js v3 chính thức](https://inertiajs.com/docs/v3/advanced/devtools). Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.