F12 | Inspect Element, Console

ผมสร้าง F12 Browser ขึ้นมาเพราะเบื่อที่จะต้องเสียบโทรศัพท์เข้ากับพีซีด้วยสายทุกครั้งที่ต้องการตรวจสอบเลย์เอาต์บนมือถือหรือการเรียกใช้ API อย่างรวดเร็ว

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

สิ่งที่คุณสามารถทำได้ด้วยมัน:

เรียกใช้โค้ด JavaScript ในหน้าเว็บโดยตรงเพื่อดูว่าเกิดอะไรขึ้น

คลิกไปรอบๆ โครงสร้าง HTML เพื่อดูคลาส สไตล์ และไฮไลต์องค์ประกอบต่างๆ

ดูการเรียกใช้ fetch และ XHR แบบเรียลไทม์ เพื่อตรวจสอบรหัสสถานะและอ่านข้อมูล JSON

เปิดคำขอเครือข่ายเพื่อดูส่วนหัวและพารามิเตอร์การค้นหา

ดึงลิงก์สื่อต่างๆ เช่น รูปภาพหรือสตรีมวิดีโอที่โหลดโดยหน้าเว็บ

ตรวจสอบบันทึกคอนโซลและข้อผิดพลาด

หากคุณเป็นนักเรียน นักศึกษา ผู้ที่อยากรู้ว่าเว็บไซต์บนมือถือทำงานอย่างไร หรือเพียงแค่ต้องการตรวจสอบความถูกต้องของ API อย่างรวดเร็วขณะอยู่ห่างจากโต๊ะทำงาน หวังว่าบทความนี้จะเป็นประโยชน์สำหรับคุณ