🛠️ Chrome DevTools ≠ แค่ Debug โค้ด
มันคือ "สะพาน" ระหว่าง Figma → MCP → Production
หลายคนรู้จัก DevTools แค่ว่าเป็นเครื่องมือ debug สำหรับนักพัฒนา
แต่ในยุค AI Workflow แบบนี้ มันสำคัญกว่านั้นมาก โดยเฉพาะถ้าคุณใช้ Figma MCP
.
🔍 DevTools ช่วยอะไรใน MCP + Figma Workflow?
1. Inspect Design Token จริงๆ ที่ถูก Generate
เมื่อ Claude สร้างโค้ดจาก Figma MCP แล้ว DevTools ช่วยให้เราเห็นว่า CSS Variables / Tokens ถูก apply จริงไหม หรือมี override ที่ไม่ได้ตั้งใจ
.
2. Verify Spacing & Layout ที่ AI Generate
Figma บอกว่า padding 24px แต่โค้ดออกมา 16px? DevTools ตรวจเจอทันที ไม่ต้องเดา
.
3. Network Tab → Debug MCP Connection
ถ้า Figma MCP Server ไม่ตอบสนอง หรือ SSE connection มีปัญหา Network tab บอกทุกอย่าง — status code, latency, payload ที่ส่งไป
.
4. Console → ดู AI Output ก่อน Render
เวลา Claude generate component แล้วส่งกลับมา DevTools ช่วย inspect JSON structure ของ design data ที่ MCP ดึงมาจาก Figma
.
Figma Design
↓ (Figma MCP Server)
Claude Code สร้างโค้ด
↓
เปิด Browser + DevTools
↓
Inspect → ปรับ → Confirm
↓
Push to Production ✅
.
DevTools ทำให้ขั้นตอน "Inspect → ปรับ" เร็วขึ้น 10 เท่า เพราะไม่ต้องกลับไปแก้ใน Figma หรือรอ AI re-generate ใหม่
.
🎯 สิ่งที่ Designer ควรรู้ใน DevTools (ไม่ต้องเป็น Dev)
✅ Elements Panel — ดู HTML structure ที่ AI สร้าง
✅ Computed Styles — เช็ค Design Token ว่า apply จริงไหม
✅ Network Tab — monitor MCP Server connection
✅ Console — debug error จาก AI output
.
#FigmaMCP #ChromeDevTools #AIDesign #DesignSystem #UXDesign #WebDeveloper #AIWorkflow #ClaudeCode #DesignLazyyy