DevTools

Embedded browser ให้คุณเข้าถึง Chrome DevTools เต็มรูปแบบ — inspector, console และ network monitor เดียวกันกับที่คุณใช้ในหน้าต่าง Chrome ปกติ ใช้เพื่อ debug สิ่งที่ AI agent สร้างขึ้น ตรวจสอบ JavaScript errors หรือดูว่า request ถูกสร้างอย่างไร

เปิด DevTools

คลิกปุ่ม DevTools (🔧) ใน header ของ browser panel Chrome DevTools จะเปิดในหน้าต่างแยกต่างหากคู่กับ workspace ของคุณ คุณสามารถวางหน้าต่างนี้ wherever ที่สะดวก — นักพัฒนาส่วนใหญ่วางไว้ที่จอที่สองหรือ dock ไว้ด้านล่าง browser panel

คุณยังสามารถเปิด DevTools แบบเดียวกับใน Chrome: คลิกขวาที่ใดก็ได้บนหน้าภายใน browser panel แล้วเลือก Inspect DevTools จะเปิดโดยโฟกัสที่ Elements tab ตรง element ที่คุณคลิกขวา

มีอะไรบ้าง

ชุดเครื่องมือ DevTools เต็มรูปแบบพร้อมใช้งาน:

• Elements — ตรวจสอบและแก้ไข HTML และ CSS ของ element ใดๆ บนหน้า คลิก element ใน tree เพื่อ highlight ใน browser หรือคลิก element บนหน้าเพื่อหาใน tree แก้ไข styles inline เพื่อลองเปลี่ยนแปลงโดยไม่ต้องแตะไฟล์ต้นฉบับ
• Console — ดู output ของ console.log, JavaScript errors และ warnings รัน JavaScript expressions โดยตรงใน console เพื่อทดสอบสิ่งต่างๆ โดยไม่ต้องแก้ไขไฟล์
• Network — ติดตามทุก HTTP request ที่แอปของคุณทำ ดู request headers, response bodies, timing และ status codes มีประโยชน์สำหรับตรวจสอบว่า API calls ถูกส่งถูกต้องและ responses ดูโอเค
• Sources — เดินผ่าน JavaScript ด้วย breakpoints ตั้ง breakpoint, กระตุ้น action ใน browser และการดำเนินการจะหยุดลงเพื่อให้คุณตรวจสอบค่าตัวแปร
• Application — ตรวจสอบ local storage, session storage, cookies และ IndexedDB มีประโยชน์สำหรับ debug สถานะ authentication หรือสิ่งที่เก็บไว้ใน browser

สถานการณ์ Debug ทั่วไป

ตรวจสอบสิ่งที่ AI agent สร้าง: เปิด Elements panel และสำรวจโครงสร้าง HTML บอกคุณว่า agent ต่อสายถูกต้องหรือไม่ — class names ถูกต้อง, การซ้อนที่เหมาะสม และ attributes ที่ถูกต้อง

หา JavaScript errors: เปิด Console ก่อนโหลดหน้า errors ที่ไม่ได้ catch จะปรากฏที่นี่พร้อมชื่อไฟล์และเลขบรรทัด แชร์ข้อความ error กับ AI agent เพื่อให้แก้ไขต้นเหตุ

Debug API calls: เปิด Network tab และคลิก action ในแอปที่กระตุ้น request (เช่น คลิกปุ่ม login) request จะปรากฏในรายการ คลิกเพื่อดู request และ response เต็ม — มีประโยชน์สำหรับวินิจฉัยปัญหา authentication หรือ request bodies ที่ผิดรูปแบบ

เคล็ดลับ: เปิด Console tab ค้างไว้ขณะที่ AI agent กำลังทำการเปลี่ยนแปลง errors จะปรากฏขึ้นที่นี่ก่อนจะมองเห็นบนหน้า ให้ feedback เร็วขึ้นว่าต้องแก้ไขอะไร