การทำเว็บนั้นจำเป็นต้องตรวจสอบการแสดงผลให้ถูกต้อง ไม่ว่าจะเปิดใช้งานบนคอมพิวเตอร์ โทรศัพท์มือถือ และแท็บเล็ต ซึ่งมีขนาดหน้าหน้าจอที่แตกต่างกัน แต่เนื่องจากโทรศัพท์มือถือและแท็บเล็ตนั้นมีหลากยี่ห้อ หลายรุ่น มากขนาด การจะทดสอบโดยอุปกรณ์จริงให้ครบทั้งหมดทำได้ยากและแพง วิธีการง่ายและถูกกว่าคือทดสอบโดยใช้เบราเซอร์บนคอมพิวเตอร์ ซึ่งเบราเซอร์ส่วนใหญ่จะมีเครื่องมือชื่อ Developer tool สำหรับใช้จำลองการแสดงผลหน้าเว็บในตัวอยู่แล้ว โพสต์นี้จึงมีวิธีเปิดใช้ Developer tools บน Chrome, Firefox และ EDGE มาฝากครับ
Developer Tool คืออะไร
Developer Tool (เรียกสั้น ๆ ว่า DevTool) เป็นเครื่องมือสำหรับนักพัฒนาเว็บใช้ตรวจสอบและดีบักโค้ด ดูพรีวิวผลการปรับแต่งโค้ด หรือจำลองการแสดงผลหน้าเว็บบนโทรศัพท์มือถือ และแท็บเล็ต เป็นต้น เว็บเบราเซอร์ส่วนใหญ่รวมถึง Chrome, Firefox และ EDGE จะมีฟังก์ชัน DevTool แต่อาจจะเรียกชื่อแตกต่างกันไป
ประโยชน์อีกอย่างของ DevTool ที่หลายคนอาจยังไม่ทราบ คือ สามารถใช้เปิดเว็บไซต์ที่อนุญาตให้ใช้งานด้วยโทรศัพท์มือหรือหรือแท็บเล็ตเท่านั้นจากเครื่องคอมพิวเตอร์ได้อีกด้วย
โดยทั่วไป DevTool จะมี Option การทำงาน ดังนี้
Dimension: Responsive (ค่าดีฟอลท์) หรือเลือกรุ่นอุปกณ์ที่ EDGE เตรียมไว้ให้ เช่น iPhone 12 Pro Max, Pixle 5, Samsung Galaxy 20 Ultra, iPad Air, Surface Pro 7 เป็นต้น สามารถเพิ่มรายชื่อออุปกรณ์ได้โดยเลือก Edit จากนั้นคลิกเลือกรุ่นอุปกรณ์ที่ต้องการ
ทั้ง Chrome, Firefox และ EDGE มีรุ่นอุปกรณ์ให้เลือกจำลองการทำงานมาให้หลายรุ่นแต่จะไม่ได้แสดงไว้ทั้งหมด ถ้าหากไม่พบรายการอุปกรณ์ที่ต้องการให้คลิก Dimension แล้วคลิก Edit จากนั้นเลือกอุปกรณ์ที่ต้องการ และยังสามารถทำการเพิ่มอุปกรณ์เองได้โดยคลิก Add custom device แล้วกรอกรายละเอียดของอุปกรณ์
รูปหน้าจอ Chrome DevTools Emulated Devices (หน้าจอ DevTools Emulated Devices ของ EDGE คล้ายกับของ Chrome)
Chrome DevTools Emulated Devices
รูปหน้าจอ Firefox DevTools Emulated Devices
Firefox DevTools Emulated Devices
ZOOM: ซูมได้ 50% – 200%
Throttling: เลือกได้ 4 แบบ No throttling, Mid-teir mobile, Low-end mobile และ Offline
Emulate Medias Features: เลือกได้ 6 แบบ
Emulate Vision Deficiency: เลือกได้ 6 แบบ No vision deficiency emulation, Blurred vision, Protanopia, Deuteranopia, Tritanopia และ Archomatopsia
Rotate: เลือก Portrait หรือ Landscape
วิธีเปิด Developer tool ใน Chrome
1. เปิด Chrome จากนั้นคลิกเมนู Customize and control Google Chrome
2. คลิก More tools จากนั้นคลิก Developer tool หรือใช้คีย์ลัดโดยการกดปุ่ม Ctrl + Shift + i หรือกดปุ่ม F12
3. บนหน้าจอ DevTools ทำการเปิดเว็บไซต์ที่ต้องการตรวจสอบ จากนั้นปรับเลือก Option และเลือกเครื่องมือต่าง ๆ ตามความต้องการ
เปิด Developer tool ใน Firefox
1. เปิด Firefox จากนั้นคลิกเมนู Open application menu
2. คลิก More tools จากนั้นคลิก Web Developer tool หรือใช้คีย์ลัดโดยการกดปุ่ม Ctrl + Shift + i หรือกดปุ่ม F12
3. บนหน้าจอ DevTools ทำการเปิดเว็บไซต์ที่ต้องการตรวจสอบ จากนั้นปรับเลือก Option และเลือกเครื่องมือต่าง ๆ ตามความต้องการ
เปิด Developer tool ใน EDGE
1. เปิด EDGE จากนั้นคลิกเมนู Settings and more
2. คลิก More tools จากนั้นคลิก Developer tool หรือใช้คีย์ลัดโดยการกดปุ่ม Ctrl + Shift + i หรือกดปุ่ม F12
3. บนหน้าจอ Microsoft EDGE DevTools ทำการเปิดเว็บไซต์ที่ต้องการตรวจสอบ จากนั้นปรับเลือก Option และเลือกเครื่องมือต่าง ๆ ตามความต้องการ
ประวัติการเผยแพร่
30 กันยายน 2566: แก้ไขตัวสะกด
29 กันยายน 2566: เผยแพร่ครั้งแรก
by 