QA/Tester มารู้จักกับ Alice [Flutter (Mobile app)] และวิธีการดู Debug Log กันเถอะ — ep.7.3

Credit

😸 สวัสดีครับ วันนี้จะมาพาทัวร์ทำความรู้จักกับ Alice [สำหรับ Flutter (Mobile app)] และวิธีการดู Debug Log กันครับ ถ้าพร้อมแล้วก็มาเริ่มกันดีกว่าครับ

Alice 🧐

Alice เป็น HTTP Inspector สำหรับ Mobile app ที่พัฒนาโดย Flutter (Flutter คือเฟรมเวิร์กที่ใช้เขียน Mobile App (และยังเขียน Web, Desktop ได้ด้วย))ใช้งานร่วมกับไลบรารี HTTP อย่างเช่น Dio, HttpClient, หรือ Chopper เพื่อแสดงรายละเอียดของการเรียก HTTP ทั้งหมดภายใน App Alice เป็น Debug tool ซึ่งเมื่ออยู่ใน Mode Debug Inspection เราจะสามารถเห็น Request และ Response ของ HTTP call แบบ Realtime ได้

FYI, ในการเรียกใช้ Alice จะใช้การ “เขย่าโทรศัพท์” (Shake gesture) ซึ่งเมื่อเข้า App ที่พัฒนาโดย Flutter และมีการเปิด Debug Alice ไว้ ให้เขย่าโทรศัพท์เพื่อเรียกดู

Mode Debug Inspection 😎

Mode Debug Inspection หมายถึง Alice จะแสดง Log การเชื่อมต่อ HTTP/HTTPS ทั้งหมดอย่างละเอียด ซึ่งจะเปิดใช้งานเฉพาะตอน App ถูกเปิด Debug mode เท่านั้น ซึ่งจะสามารถเห็นพวกนี้ได้

• ตรวจสอบการส่ง Request
• ตรวจสอบ Response body / Status code
• ตรวจสอบ Headers, Cookies
• ดูเวลาเชื่อมต่อ (Latency), Error, SSL ฯลฯ

หน้าตาของ Alice 🤠

มาดูหน้าตากันครับ ซึ่งจะประกอบด้วย 4 Tab

• Overview
• Method: ประเภท HTTP เช่น GET, POST
• Server: Hostname ของ API ที่เรียก
• Endpoint: Path ที่ถูกเรียก
• Started / Finished: เวลาเริ่มต้นและสิ้นสุดของ Call
• Duration: เวลาในการดำเนินการทั้งหมด (ms)
• Bytes sent/received: ขนาดข้อมูลที่ถูกส่งหรือได้รับ
• Client: ไลบรารี HTTP ที่ใช้ (เช่น Dio)
• Secure: ใช้ HTTPS (true) หรือไม่ (false)
• Request
• Response
• Error (กรณีมี Error เกิดขึ้น)

Tips เล็กน้อย 😤

เมื่อเข้า App มาแล้ว เมื่อเขย่าเพื่อดู Log เราจะเห็น Status ว่าเส้นไหนผ่านหรือไม่ผ่านได้ด้วยนะ ผ่านก็ขึ้น 200 สีเขียว ไม่ผ่านก็ขึ้นสีแดงตามด้วย Status สามารถ Search หาเส้นที่ต้องการได้ โดยกดด้านบนรูปแว่นขยายแล้วพิมพ์หาได้เลย

สามารถ Clear log ได้นะ ถ้ามันมีเยอะเกิน ทำให้งงตอนกำลังจะดูเส้นที่ต้องการ สามารถไปกดที่ปุ่ม Hamburger ด้านขวาบน แล้วกด Delete ได้เลย

สามารถส่ง Request หรือ Response ทั้งดุ้นได้ โดยการกดแชร์ด้านขวาล่าง แล้วเลือกช่องทางส่งหรือจะก็อปแล้วแล้วส่งไปก็ได้เลยครับ

คร่าวๆก็จะประมาณนี้ครับ อาจจะมีอะไรที่ผมตกหล่นไปหรือมีผิดพลาดบ้าง ก็ขออภัยมา ณ ที่นี้ด้วยครับ

ทิ้งท้าย 😇 พอพูดถึง Alice ผมนี่นึกถึงแต่ซีรี่ย์เรื่อง Alice in borderland ทาง Netflix เลยครับ55 ก็สนุกครับไปดูได้ครับ55

🫠 ทั้งหมดก็จะมีประมาณนี้ ถ้าชอบก็อย่าลืมกดตบมือและแชร์เพื่อเป็นกำลังใจให้ผมด้วยนะครับ และอย่าลืมติดตามบทความถัดๆไปของผมด้วย ขอบคุณทุกๆท่านที่อ่านจนจบนะครับ ขอบคุณมากครับ 🥳