DevTools ลับๆ ที่ช่วยจับบั๊กเว็บเร็วขึ้นใน 5 นาที: Network + Performance + Lighthouse ใช้ร่วมกันให้ปัง 🧰?
หลายคนเปิด DevTools แล้วดูแค่ Console
แต่บั๊กที่ทำให้เว็บช้า โหลดค้าง หรือ ?บางเครื่องเป็น บางเครื่องไม่เป็น? มักซ่อนอยู่ใน 3 แท็บนี้
Network + Performance + Lighthouse ถ้าไล่เป็นลำดับ จะหาสาเหตุได้เร็วแบบเป็นระบบ
นาทีที่ 1: เริ่มที่ Network ตั้งค่าก่อนจับจริง
เปิด DevTools แล้วไปที่ Network
ติ๊ก Preserve log เพื่อเก็บรายการ request ตอนหน้าเปลี่ยน/redirect
ติ๊ก Disable cache เพื่อกันผลหลอกจาก cache ตอนดีบั๊ก
ตั้ง Throttling เป็น Fast 3G หรือ Slow 4G เพื่อจำลองโลกจริง
แล้วกด Hard reload (กดค้างปุ่มรีเฟรช แล้วเลือก Empty cache and hard reload)
นาทีที่ 2: อ่าน Network แบบคนจับบั๊ก ไม่ใช่คนดูกราฟ
มอง 4 จุดนี้ก่อน
1) Status แปลกๆ 304/401/403/404/500 ที่โผล่เฉพาะบางครั้ง
2) Size ที่ ?ใหญ่ผิดปกติ? เช่นภาพ 4MB หรือ JS bundle 2MB
3) Waterfall ช่องว่างยาวๆ ก่อนเริ่มโหลด มักเกี่ยวกับ DNS/TCP/TLS หรือ request ไปติดคอที่อื่น
4) Initiator บอกว่า request นี้ถูกยิงจากไฟล์/บรรทัดไหน (ช่วยตัดวงจรไล่หาโค้ดต้นเหตุ)
ทริคที่คนไม่ค่อยรู้
คลิก request แล้วดูแท็บ Timing
ถ้า TTFB สูงมาก แปลว่าเซิร์ฟเวอร์ตอบช้า หรือมีคิว/แคชพลาด ไม่ใช่ ?ไฟล์ใหญ่? อย่างเดียว
ถ้า Stalled/Queueing สูง แปลว่ามี request เยอะจนชนเพดาน (ต่อโดเมนมีลิมิต) หรือ service worker/extension แทรก
นาทีที่ 3: ต่อด้วย Performance เพื่อจับ ?ค้าง? ที่ Network มองไม่เห็น
ไปแท็บ Performance แล้วกด Record
ทำสิ่งที่ผู้ใช้ทำจริง เช่นเปิดหน้า กดปุ่ม ค้นหา เลื่อน
หยุด Record แล้วมอง 3 อย่าง
1) Main thread ยาวเป็นสีเหลือง/ม่วงต่อเนื่อง แปลว่า JS ทำงานหนักจน UI ไม่ตอบสนอง
2) Long task เกิน 50ms มักทำให้คลิกแล้วหน่วง
3) Layout/Style recalculation ถี่ๆ มักมาจาก DOM เปลี่ยนเยอะ หรืออ่าน-เขียน layout สลับไปมา
ตัวอย่างบั๊กยอดฮิต
ปุ่มกดแล้วหน่วง 1-2 วิ แต่ Network ไม่มีอะไร
Performance มักจะเห็น long task จากการ render list ใหญ่ๆ หรือ JSON parse หนัก
แนวแก้ไวๆ เช่น
เลื่อนงานหนักไปหลัง interaction (requestIdleCallback / setTimeout)
ทำ virtual list
แยกงานเป็น chunk เล็กๆ
นาทีที่ 4: เปิด Lighthouse เพื่อสรุป ?ภาพใหญ่? แบบจับประเด็นให้ครบ
Lighthouse ไม่ได้มีไว้โชว์คะแนนอย่างเดียว
ใช้เป็น checklist ว่าเราพลาดอะไรอยู่
แนะนำให้รัน 2 รอบ
รอบแรก Mobile + Performance
รอบสอง Best Practices + SEO (ถ้าเป็นเว็บ public)
ดูหัวข้อที่คุ้มสุดต่อเวลา
Largest Contentful Paint ชี้เป้าของ ?ของใหญ่สุดที่ผู้ใช้รอ? (มักเป็นรูป hero หรือ block แรก)
Total Blocking Time ชี้ว่า JS บล็อก UI แค่ไหน (โยงกลับ Performance ได้ตรงๆ)
Properly size images / Serve images in next-gen formats ช่วยลด MB แบบเห็นผล
Eliminate render-blocking resources ชี้ไฟล์ที่ทำให้หน้าเริ่มวาดช้า
นาทีที่ 5: เอา 3 แท็บมาประกบกันเป็นเส้นเรื่องเดียว
เริ่มจาก Lighthouse บอกปัญหาอะไรหนักสุด
ย้อนไป Network หา request ตัวการ (ไฟล์ใหญ่ ช้า หรือยิงซ้ำ)
แล้วไป Performance ดูว่าหลังโหลดเสร็จ ยังมี long task หรือ reflow ทำให้หน่วงต่อหรือไม่
สูตรจำง่าย
Lighthouse ชี้ ?อาการ?
Network ชี้ ?ไฟล์/ปลายทาง?
Performance ชี้ ?ช่วงเวลาที่ค้างบนเครื่องผู้ใช้?
โบนัส: เช็คลิสต์ 30 วินาทีที่ช่วยลดเวลาหาบั๊กครึ่งหนึ่ง
ดูว่ามี request ซ้ำๆ ทุกครั้งที่คลิก (มักเกิดจาก effect ทำงานซ้ำ)
ดูว่า JS bundle โหลดหลายก้อนไหม และก้อนแรกใหญ่ไปหรือเปล่า
ดูว่ามี font โหลดช้าแล้วทำให้ตัวหนังสือกระตุก (FOIT/FOUT)
ดูว่าใช้ third-party script เยอะไหม (แอด แชท analytics) เพราะมักเป็นตัวป่วนเงียบๆ
พอจับเป็นระบบแบบนี้ ต่อให้บั๊กโผล่แค่บนเน็ตช้า หรือเครื่องกลางๆ ก็ไล่เจอได้ในไม่กี่นาที
เก็บเป็นนิสัย แล้ว DevTools จะกลายเป็น ?เรดาร์? มากกว่า ?ที่ไว้เปิด Console? 🚀
