ตัววิเคราะห์ไฟล์ HAR
โหลดไฟล์ HAR จาก Chrome หรือ Firefox วิเคราะห์ใน browser ได้ waterfall, request ที่ช้าที่สุด, สรุป status code และขนาด transfer รวมทันที
Loading tool...
ตัววิเคราะห์ไฟล์ HAR คืออะไร?
ตัววิเคราะห์ไฟล์ HAR โหลดไฟล์ HTTP Archive (HAR) ที่ export จาก Chrome, Firefox หรือ Edge DevTools แล้วเปลี่ยนเป็นหน้า dashboard ด้าน performance ไม่ว่าจะเป็น request waterfall, request ที่ช้าที่สุด, สรุป status code, host ยอดนิยม, ขนาด transfer รวม และ duration เฉลี่ย แทนที่จะเลื่อนดู request หลายร้อยแถวใน DevTools คุณโหลดไฟล์เดียวแล้วเห็นทันทีว่า request ตัวไหนช้า พัง หรือตัวไหนใหญ่เกินจำเป็น ทุกอย่างประมวลผลในเครื่องของคุณ ไฟล์ capture ที่อ่อนไหวจึงอยู่กับเครื่องคุณเอง
ประโยชน์หลัก
- เห็น request ที่ช้าที่สุดทันที โดยไม่ต้องเลื่อนดูทีละแถวใน DevTools
- สรุป status code ช่วยจับ error 4xx และ 5xx ที่ซ่อนอยู่ใน capture ยาว ๆ
- มุมมอง waterfall เผย request ที่นานหรือทำงานเรียงกันได้ในพริบตา
- ขนาด transfer รวมบอกได้ว่าหน้าเว็บหนักแค่ไหนจริง ๆ
- Export CSV และรายงานสรุป แชร์ผลการวิเคราะห์ให้ทีมได้ง่าย ๆ
กรณีการใช้งาน
- •หาสาเหตุหน้าเว็บโหลดช้าที่ user หรือระบบ monitoring แจ้งเข้ามา
- •ตรวจสอบว่า third-party script หรือ tag manager ดาวน์โหลดอะไรไปบ้าง
- •ตรวจน้ำหนักหน้าเว็บก่อนรีวิว performance budget
- •เช็ค capture จาก production ว่ามี request ที่ fail หรือถูก block หรือไม่
- •สรุป network อย่างกระชับแชร์ให้เพื่อนร่วมทีม backend หรือ QA
วิธีวิเคราะห์ไฟล์ HAR
- Export ไฟล์ HAR: เปิด DevTools ของ Chrome หรือ Firefox ไปที่แท็บ Network โหลดหน้าเว็บที่ช้าซ้ำ ๆ แล้วคลิกขวาที่ลิสต์ request เลือก Save all as HAR with content
- โหลดไฟล์ capture: อัปโหลดไฟล์ .har หรือวาง JSON ลงในช่องข้อความ แล้วกดปุ่มวิเคราะห์
- อ่านภาพรวม: เช็คการ์ดจำนวน request, ขนาด transfer รวม, duration เฉลี่ย และเวลาโหลดหน้าเว็บ แล้วสังเกต badge ของ status code ว่ามี error หรือไม่
- หาคอขวด: ดูตาราง request ที่ช้าที่สุดและ waterfall เพื่อหา request ที่ใช้เวลานานหรือทำงานเรียงกัน แล้ว export ตารางเป็น CSV ถ้าต้องนำไปใช้ต่อ
คุณสมบัติหลัก
- Request waterfall แบบ visual พร้อมระบายสีตาม HTTP status class
- Top 5 request ที่ช้าที่สุด เรียงตาม duration พร้อม method, status และขนาด
- สรุป status-code และจำนวน request ต่อ host ยอดนิยมในหน้าเดียว
- การ์ดภาพรวม จำนวน request, transfer รวม และ duration เฉลี่ย
- Export ตาราง request ทั้งหมดเป็น CSV หรือคัดลอกรายงานสรุป
- ทำงาน offline ทั้งหมด - ไฟล์ HAR ไม่ออกจาก browser ของคุณ
คำถามที่พบบ่อย
ไฟล์ HAR คืออะไร และหาได้จากที่ไหน?
HAR (HTTP Archive) คือไฟล์ JSON ที่บันทึก request HTTP ทั้งหมดที่ browser เรียก ทั้ง URL, status code, timing และขนาด เปิด DevTools ของ Chrome, Firefox หรือ Edge ไปที่แท็บ Network โหลดหน้าเว็บ แล้วคลิกขวาที่ลิสต์ request เลือก Save all as HAR with content
ไฟล์ HAR ของฉันถูกอัปโหลดไปที่ server หรือไม่?
ไม่มีการอัปโหลด เครื่องมืออ่าน JSON ทั้งหมดใน browser ของคุณ ไฟล์ capture ที่มี cookie, token หรือ traffic ของ API ภายในจึงไม่ออกจากเครื่องของคุณเลย
ทำไม waterfall ดูต่างจากใน DevTools เล็กน้อย?
Waterfall นี้สร้างใหม่จากช่อง startedDateTime และ time ของแต่ละ entry โดยวางแท่งกราฟตามเวลาเริ่มต้นเทียบกับ request แรก ส่วน DevTools วาดได้ละเอียดกว่าเพราะมีข้อมูล phase อย่าง blocked, DNS, connect และ SSL
เวลาโหลดหน้าเว็บกับ duration เฉลี่ยต่างกันอย่างไร?
เวลาโหลดหน้าเว็บมาจากค่า pageTimings onLoad ที่ browser บันทึกไว้ หมายถึงจังหวะที่ load event ทำงาน ส่วน duration เฉลี่ยคือค่าเฉลี่ยของเวลา request แต่ละตัว ซึ่งใช้ชี้จุด endpoint ที่ช้าได้ แต่ไม่ได้บอก timeline ภาพรวม