แอบมองเธออยู่นะจ๊ะ! มาใช้ inspector จับผิด developer กัน!

สวัสดีมิตรรักนักอ่านทุกท่านค่ะ หัวข้อนี้จะขอนอกใจน้องเหลือม (Python) มาแชร์เทคนิคการใช้ inspector ที่อยู่บน web browser (Google Chrome, Safari, Brave, etc.) เพื่อจับผิด developer กันค่ะ ซึ่งสามารถใช้ได้ทั้ง QA, designer, developer หรือแม้กระทั่งประชาชนคนทั่วไปที่สงสัยว่าพวกเราทำอิหยังกัน

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

disclaimer 2: บทความนี้จะใช้ Google Chromeในการอ้างอิงนะคะ แต่ tool ภายในของเจ้าอื่นๆ ก็จะมี function ประมาณนี้ค่ะ

Google Chrom with Inspector

จุดเจ็บปวด (Pain point) 🧨

เคยเกิดคำถามนี้ภายในทีมระหว่างพัฒนา web application กันไหมคะ?

• Design: Padding/Margin ตรง design หรือเปล่านะ? สีเพี้ยนๆ แปลกๆ มั้ยนะ?
• QA 1: Web ไม่โหลดเลย ใครเป็นคนทำ! Front-End หรือ Back-End! ฉันจะตีบั๊ค!
• QA 2: จะเขียน test case ไปหา class ที่ไหนกันนะ
• Dev: เอ๋~ จุดนี้มันทำไมมันดูเบี้ยวๆ นะ? ทำไม style ไม่ทำงานกันหว่า? แล้วค่าช่องนี้หายไปไหน? ผีหลอก!
• ฯลฯ

ถ้าเคย ก็ถือว่าบทความนี้ค่อนข้างตอบโจทย์เลยค่ะ เพราะทั้งหมดนี้ สามารถหาสาเหตุเบื้องต้นได้จาก inspector ค่ะ

Inspector คืออิหยัง? 🤔

inspector คือ tool ตัวหนึ่งที่มีอยู่ใน web browser ทุกๆ เจ้า เพื่อเอาไว้สำหรับดูการทำงานเบื้องหลังของหน้า website ค่ะ ทั้ง design, API call, log, script, และอื่นๆ อีกมากมาย โดยการจะเข้า inspect นั้นก็ง่ายมากๆ ค่ะ เพียงแค่คลิ๊กขวาแล้วจะมีเมนู inspect ขึ้นมาให้เลือกเลยค่ะ แล้วเราก็จิ้มเลยค่ะ จะเห็น Panel ขึ้นมาฝั่งขวามือ

Google Chrome Console Panel

หากใครได้หน้าตา inspector ไม่เหมือนในรูปภาพ ก็อย่าเพิ่งตกใจนะคะ เพราะ inspector ก็แยกย่อย Panel เป็นอีกหลายๆ Panel ตามหัวข้อที่เราเลือกข้างบนค่ะ

“Elements” Panel 🪨 🌊 🌪️🔥

Elements panel: Inspect one of `div` element

ใน Panel นี้จะประกอบไปด้วย 2 ส่วนหลัก ๆ นะคะ:

• html section: ไว้สำหรับดู​ element tag, parent element, ชื่อ class, และ lib config ต่างๆ ใน header นอกจากนี้ เรายังเห็นสีพื้นที่ของ content, margin, และ padding ได้จากการเลือก element อย่างในรูปด้วยค่ะ ส่วนแต่ละสีจะหมายถึงอะไรนั้นสามารถดูต่อได้ที่ computed tab ใน css section ค่ะ
• css section: ไว้สำหรับดู​ style ต่างๆ ทั้งสี, ขนาด, margin, padding และยังสามารถลองเขียน style ได้ด้วยในช่อง `element.style` (เป็นประโยชน์มากๆ เวลาเราอยาก overwrite style)

“Console” Panel ✍️

Console panel

ใน Panel นี้ ส่วนใหญ่จะถูกใช้โดย developer เพื่อ log ข้อมูลต่างๆ ออกมาดูความถูกต้องของข้อมูลใน development process ค่ะ

log ก็จะถูกแบ่งออกเป็น 3 ส่วนหลักๆ คือ error, warning, และ info โดยส่วนใหญ่แล้ว developer จะลบ log ออกทั้งหมดก่อนที่จะ deploy code ขึ้น production นะคะ แต่ในบางกรณีก็จะยังเหลือ log ไว้เป็น Easter Egg ค่ะ (ลอง inspect Medium ดูสิคะ :D)

“Network” Panel 🌏

Network panel

ใน Panel นี้ จะเอาไว้สำหรับการดูข้อมูลการรับส่งระหว่าง Front-End (a.k.a. website, client) กับ Back-End (a.k.a. API, server) ค่ะ ถ้าหากข้อมูลมาไม่ครบ web แสดงผลไม่ถูกต้อง หรือ loading ค้างที่แรกที่เราควรมองหาคือที่นี่เลยค่ะ

ซึ่ง Panel นี้เป็น panel ที่มีลูกเล่นเยอะมากๆ เลยค่ะ เลยจะขอเล่าแบบคร่าวๆ ที่ใช้บ่อยๆ นะคะ

• เราสามารถ network record api ได้จากปุ่ม `สี่เหลี่ยมในวงกลม` ซ้ายบนค่ะ มีประโยชน์มากๆ เวลาเรา refresh หน้า website แต่ยังอยากเห็น log เดิมอยู่
• ตัว Network สามารถกรอง Assets (API, Font, CSS, Media, etc.) ให้เราได้ในระดับหนึ่งเลยค่ะ เพียงเราเลือกหัวข้อ หรือกรอก filter search ค่ะ แน่นอนว่านัทใช้ Fetch/XHR เพื่อดู​ API detail และ export curl ให้เพื่อนร่วมทีมประจำเลยค่ะ (ดู detail ได้จากการกดเลือก API แต่ละเส้นนะคะ)
• เราสามารถสมมติสถานการณ์ API ช้าหรือไม่มี API เลยได้จากการเลือก drop down ที่ชื่อว่า No throttling ค่ะ จะมี options ให้เลือก หรือถ้าอยาก advance ขึ้นก็ config network ที่ icon wifi ข้างๆ ได้เลยค่ะ

ของแถม 🎁

สงสัยกันไหมคะว่า ถ้า website ต้องรองรับการเปิดบนหน้า mobile หรือ iPad ด้วย (a.k.a. responsive website) หาก QA ไม่มี device จะต้องทำยังไงเพื่อเทสกันนะ? คำตอบง่ายสุดๆ เลยอาจจะเป็นของบบริษัทเพื่อซื้อค่ะ 5555 แต่ว่าแล้วถ้าเราต้องเทสกันบนขนาดหน้าจอหลายๆ แบบ หรือหน้าจอขนาดแปลกๆ การของบบริษัทมาซื้อก็อาจทำให้เสียทรัพย์โดยใช่เหตุค่ะ

ปิ๊งป่อง~ คำตอบอยู่ใน เจ้า inspector ค่ะ เพียงเรากดที่ icon device มุมซ้ายบน เราก็จะได้ emulator ขนาดของจอทุกขนาดที่เราต้องการแล้วค่ะ :)

Device emulators

บทสรุปและสรรเสริญเจ้าของคำถาม 🫡

เป็นอย่างไรกันบ้างคะ? สำหรับ inspector tool ในบทความนี้ เราคัดมาเฉพาะตัวที่ใช้บ่อยๆ นะคะ ที่จริงแล้วยังมีอีกหลายเมนูที่เป็นประโยชน์ในการ learning & development process website นะคะ

ทั้งนี้ เราไม่สนับสนุนการ inspect เพื่อไปงัดแงะ ทำมิดีมิร้ายระบบใครนะคะ เพียงแต่ต้องการแชร์ความรู้และประสบการณ์บางส่วนของเราให้กับ community ค่ะ

จุดเริ่มต้นของบทความนี้ โดนสะกิดจากน้องป้อนทีม design ที่ถามถึงวิธีการที่จะสามารถรู้ได้ว่า developer ทำเว็บได้ออกมาตรงตาม design จริงหรือจ้อจี้กันแน่ รวมไปถึงเคสต่างๆ ที่เกิดขึ้นกับทีม QA ในการ test web application ค่ะ ขอบพระคุณเป็นอย่างสูงสำหรับ inspiration ในครั้งนี้นะคะ (และอย่าตี developer บ่อยๆ น้า พี่ขอโต๊ดด) หากถูกใจหรือไม่ถูกใจบทความนี้ตรงไหนก็ตบมือแปะๆ ก่อนไปได้นะคะ (ฮา) แล้วพบกันใหม่ในบทความหน้าค่ะ บะบายยย~