ผมเคยเปิด Chrome DevTools แล้วงงกับ tab ที่เยอะเกินจะกดได้ทุกปุ่ม — Performance, Lighthouse, Network, Console — แต่ละอันเหมือนพูดภาษาที่ต่างกัน
แต่เมื่อวานนี้ผมรัน web audit แบบมืออาชีพทั้งหมดจาก terminal บรรทัดเดียว โดยไม่ต้องเปิด DevTools เลย
เครื่องมือที่ทำให้เป็นไปได้คือ Chrome DevTools MCP — ตัว official จาก Google เอง เพิ่งออกมาไม่นาน เป็นสะพานที่เชื่อม Chrome DevTools Protocol เข้ากับ AI agent โดยตรง พูดง่ายๆ คือแทนที่ผมจะต้องเปิด Chrome แล้วกดเองทีละปุ่ม ผมแค่บอก Claude ว่า “ตรวจสุขภาพเว็บให้หน่อย” แล้วมันก็ทำให้ทุกอย่าง
ติดตั้งยากไหม?
ผมคิดว่าจะยาก แต่จริงๆ มีแค่ 2 ขั้นตอน
ขั้นแรก — เปิด Chrome แบบ remote debugging mode ซึ่งก็คือสั่งให้ Chrome เปิด port ไว้ให้ AI เข้ามาคุมได้
ขั้นที่สอง — ติดตั้ง MCP server ลงใน Claude Code ด้วยคำสั่งบรรทัดเดียว
แต่ตรงนี้ผมเจอ gotcha ที่ไม่มีใครบอก — Claude Code ต้อง restart session ทั้งหมดถึงจะเห็น MCP server ใหม่ การกด /mcp reconnect ไม่พอ มันแค่เชื่อมต่อ server ที่มีอยู่แล้ว ไม่ได้โหลดตัวใหม่เข้ามา ผมเสียเวลากับตรงนี้เกือบครึ่งชั่วโมงก่อนจะรู้
พอ restart แล้ว 44 tools ก็โผล่มาให้ใช้ทันที
ผลตรวจจริง — introvertlogic.com
ผมให้ Claude รัน Lighthouse audit ทั้ง desktop และ mobile แล้วดูผลเทียบกัน
Lighthouse Scores
Desktop กับ mobile ได้ใกล้กันมาก — Accessibility 97/96, Best Practices 96/96, SEO 92/92 ตัวที่น่าสนใจคือ Agentic Browsing ได้ 100 เต็มทั้งคู่ ซึ่งเป็น metric ใหม่ที่วัดว่าเว็บ “พร้อมให้ AI agent ใช้งาน” แค่ไหน
เว็บที่สร้างด้วย AI ได้คะแนนเต็มในหมวด “AI ใช้งานง่าย” — มันเป็น recursive loop ที่ตลกดี
Performance Trace
ตัวเลขที่ผมตื่นเต้นที่สุดคือ LCP 361ms — Largest Contentful Paint ที่วัดว่า content หลักของหน้าโหลดเสร็จเร็วแค่ไหน ค่านี้ดีมาก (threshold อยู่ที่ 2,500ms) และ CLS เป็น 0.00 — ไม่มี layout shift เลย หน้าไม่กระตุกตอนโหลด
แต่ performance trace ก็เปิดเผยปัญหาที่ผมไม่เคยรู้มาก่อน
สิ่งที่หาเจอ — ปัญหาจริงที่ซ่อนอยู่
Chrome DevTools MCP หาเจอ 3 ปัญหาที่ผมไม่เคยเห็นด้วยตาเปล่า
ปัญหาที่ 1 — ฟอนต์ผี
มี font file 4 ตัวที่ CSS อ้างถึงแต่ไม่มีอยู่จริงบน server — ทุกตัวคืนค่า 404 ทุกครั้งที่มีคนเปิดเว็บ เป็น IBM Plex Mono variants ที่น่าจะถูก reference ไว้ตอน setup ธีมแต่ไม่เคยถูก upload font files ไม่เคย error ที่ตาเห็นเพราะ browser มี fallback ให้อัตโนมัติ แต่มันกิน FCP ไป 130ms โดยไม่จำเป็น
ปัญหาที่ 2 — Contrast ratio
บาง text/background color pair ไม่ผ่าน WCAG threshold ซึ่งอาจทำให้คนที่สายตาไม่ดีอ่านยาก — ปัญหานี้ผมไม่มีทางเห็นเองเพราะตาผมปกติ
ปัญหาที่ 3 — Missing meta description
หน้าแรกไม่มี meta description เลย ซึ่งหมายความว่าเวลา Google แสดงผลค้นหา มันจะดึงข้อความมั่วๆ จากหน้ามาแสดงแทนที่จะเป็นประโยคที่ผมเลือกเอง
Mobile Emulation — ไม่ต้องหยิบมือถือ
ส่วนที่ทำให้ผมรู้สึกว่า “นี่มันอีกระดับ” คือ mobile emulation — Claude สั่ง emulate iPhone 14 Pro (390×844, 3x pixel density, touch enabled) แล้ว screenshot กลับมาให้ดูทันที ผมเห็นหน้าเว็บบนมือถือโดยไม่ต้องหยิบโทรศัพท์ขึ้นมา
ทั้งหมดนี้ทำจาก terminal ตัวเดียว ไม่ต้องสลับหน้าจอ ไม่ต้องเปิด browser ไม่ต้องจำว่า tab ไหนอยู่ตรงไหน
9 จาก 44 — ยังเหลืออีกเยอะ
ในการทดสอบครั้งนี้ผมใช้ไป 9 tools จาก 44 ที่มีให้ — navigate, lighthouse, performance trace, emulate, screenshot, console messages, network requests ยังไม่ได้แตะ memory snapshot สำหรับหา memory leak, JS evaluation สำหรับรันโค้ดบนหน้าเว็บ, form automation สำหรับทดสอบฟอร์ม
มันเหมือนได้กล่องเครื่องมือช่างมาทั้งกล่อง แล้ววันนี้ผมแค่หยิบไขควงกับค้อนมาใช้
สิ่งที่ได้เรียนรู้
Chrome DevTools MCP เปลี่ยน web audit จาก “สิ่งที่ต้องเป็น developer ถึงทำได้” เป็น “สิ่งที่ใครก็ทำได้ถ้ามี AI agent”
ผมไม่รู้ว่า Lighthouse score คืออะไรจนกระทั่ง Claude อธิบายให้ฟัง ไม่รู้ว่า CLS 0.00 ดียังไงจนกระทั่งเห็นตัวเลข ไม่รู้ว่ามีฟอนต์ผีซ่อนอยู่จนกระทั่ง AI ไปขุดเจอ
แต่สิ่งที่สำคัญกว่าตัวเลขคือ — ผมไม่ต้อง “เรียนรู้ DevTools” ก่อนถึงจะใช้ DevTools ได้ AI ข้ามขั้นตอนนั้นไปให้เลย ผมแค่ต้องรู้ว่า “อยากรู้อะไร” ไม่ใช่ “จะหายังไง”
ฟอนต์ผี 4 ตัวนั้น — มันนอนอยู่บนเว็บผมมาตั้งแต่วันแรก ไม่มี visitor คนไหนเห็น error แต่ทุกคนจ่ายค่า 130ms ที่ไม่จำเป็นทุกครั้งที่เปิดหน้า ถ้า AI ไม่ตรวจให้ ผมจะไม่มีทางรู้