DevTools

Trình duyệt nhúng cho phép bạn truy cập đầy đủ Chrome DevTools — cùng bộ inspector, console, và network monitor mà bạn dùng trong cửa sổ Chrome thông thường. Dùng nó để debug những gì AI agent của bạn đã xây dựng, kiểm tra lỗi JavaScript, hoặc inspect cách một request được tạo ra.

Mở DevTools

Nhấn vào nút DevTools (🔧) trong header của panel trình duyệt. Chrome DevTools sẽ mở trong một cửa sổ riêng bên cạnh workspace của bạn. Bạn có thể đặt cửa sổ này ở bất kỳ đâu thuận tiện — hầu hết developer đặt nó trên màn hình phụ hoặc dock xuống dưới panel trình duyệt.

Bạn cũng có thể mở DevTools giống như trong Chrome: click chuột phải vào bất kỳ đâu trên trang trong panel trình duyệt và chọn Inspect. DevTools sẽ mở với tab Elements tập trung vào phần tử bạn đã click chuột phải.

Những Gì Có Sẵn

Bộ công cụ DevTools đầy đủ đều có sẵn:

• Elements — inspect và chỉnh sửa HTML và CSS của bất kỳ phần tử nào trên trang. Click vào phần tử trong tree để highlight nó trên trình duyệt, hoặc click vào phần tử trên trang để tìm nó trong tree. Chỉnh sửa style trực tiếp để thử thay đổi mà không cần đụng đến file nguồn.
• Console — xem output console.log, lỗi JavaScript, và cảnh báo. Chạy trực tiếp JavaScript expression trong console để test mà không cần chỉnh sửa file.
• Network — giám sát mọi HTTP request mà app của bạn tạo ra. Xem request headers, response bodies, timing, và status codes. Hữu ích để kiểm tra xem API calls có được gửi đúng không và response có chính xác không.
• Sources — step through JavaScript với breakpoints. Đặt breakpoint, kích hoạt action trên trình duyệt, và execution sẽ dừng lại để bạn inspect giá trị biến.
• Application — inspect local storage, session storage, cookies, và IndexedDB. Hữu ích để debug trạng thái authentication hoặc bất kỳ thứ gì được lưu trong trình duyệt.

Các Tình Huống Debug Thường Gặp

Kiểm tra những gì AI agent đã xây dựng: Mở panel Elements và khám phá cấu trúc HTML. Điều này cho bạn biết agent có wiring đúng không — class names đúng, nesting phù hợp, và attributes chính xác.

Tìm lỗi JavaScript: Mở Console trước khi load trang. Mọi uncaught errors sẽ hiện ra ở đây kèm tên file và số dòng. Chia sẻ thông báo lỗi với AI agent để nó sửa nguyên nhân gốc.

Debug API calls: Mở tab Network và click vào action trong app của bạn để kích hoạt request (như click nút login). Request sẽ hiện ra trong danh sách. Click vào nó để xem đầy đủ request và response — hữu ích để chẩn đoán vấn đề authentication hoặc request body bị malformed.

Mẹo: Giữ tab Console mở trong khi AI agent đang thực hiện thay đổi. Lỗi sẽ hiện ra ở đây trước khi chúng xuất hiện trên trang, cho bạn phản hồi sớm hơn về những gì cần sửa.