BeginningDeveloperFeaturedGoogle DevelopersNewbie

วิธีการแก้เว็บไซต์ Responsive ด้วย Chrome Inspect Element ผ่าน Emulation

การดีไซน์เว็บไซต์แบบ Responsiveในปัจจุบันตอนนี้ ต้องทดสอบกับ User Agent ของอุปกรณ์ทั้ง Mobile, Tablet และ PC เราสามารถใช้ Chrome Inspect ตัว Emulation ได้ครับ

cover

ส่วนมากคนทำเว็บไซต์มักจะแก้ไข Layout และตรวจสอบพวก CSS หรือโครงสร้าง HTML ผ่าน Chrome โดยการใช้ Inspect Element กันบ่อยๆ ทีนี้มีหลายคนที่ยังไม่รู้ว่ามันทดสอบเรื่องของ Device Render แต่ละอุปกรณ์ได้ด้วย อย่างผมเองเมื่อก่อนก็จะทดสอบกับ Device จริงๆ คือ FTP ขึ้นไปแล้วเอามือถือ หรือ แท็บเล็ตมาเปิดหน้าเว็บว่ามันแสดงผลถูกต้องหรือเปล่า มาช่วงหลังๆ มีน้องที่ทำโปรแกรมเมอร์มาแนะนำให้รู้วิธี Render ผ่าน Google Chorme ด้วย Inspect Element กับ Emulation ก็ถือว่าตาสว่าง และประหยัดเวลาขึ้นครับ

ก่อนอื่นเลย มีโครงงานที่ทำอยู่เป็น Responsive Website ให้เปิด Chrome Inspect Element ขึ้นมาครับ

ตัวอย่างเว็บไซต์ ลูกค้า บริษัท Adways Labs Thailand Co., Ltd.
ตัวอย่างเว็บไซต์ ลูกค้า บริษัท 

หลังจากนั้นก็ลองคลิกที่ drawer เพื่อเปิดส่วนของ Console ต่อจากนั้นเลือกแทบชื่อ Emulation ครับ

เปิด drawer
เปิด drawer

ต่อมาเลือก Emulation

10-6-2557 16-22-44

เมื่อกดแล้วก็เลือก Device รุ่นที่เราต้องการจะแสดงผล หรือรุ่นหน้าจอที่เราต้องการแล้วกด Emulate

เลือกรุ่น
เลือกรุ่น

 

ได้รุ่นแล้วก็ Emulate
ได้รุ่นแล้วก็ Emulate

พอหน้าจอเปลี่ยนให้ ใจเย็นๆ แล้วกด Refresh หน้าเว็บ 1 ครั้ง

กด refresh เบาๆ
กด refresh เบาๆ

การแสดงผลก็จะ โอเค รองรับหน้าจอ ของ Responsive ครับ

โอเค แก้ Element ได้แล้ว
โอเค แก้ Element ได้แล้ว

ทดสอบกับหลายๆ Device หน่อย

ลองกับ iPad
ลองกับ iPad

ถ้าจะยกเลิกโหมดก็กดเพียงปุ่ม Reset เท่านั้นเองครับ

สำหรับเทคนิคนี้นั้นช่วยเหลือเรื่องอะไรบ้าง ลองดูบางเว็บไซต์ครับที่เค้าใช้ Flash หรือ SilverLight เรียกไฟล์ Video แล้วเอา Script ของ Video.js มาทำให้เป็น HTML5 Player เราก็จะสามารถ ทำการ Emulation ให้เห็นโครงสร้างอีกแบบ และเห็น Path ของ ไฟล์ Video ที่ใช้บน Mobile ได้เลยโดยไม่ต้องไปขอร้องคนดูแลเว็บไซต์ทำให้ครับ

ตัวอย่างบางเว็บเป็น Silver Light เปิด บน iPhone ไม่ได้
ตัวอย่างบางเว็บเป็น Silver Light เปิด บน iPhone ไม่ได้
พอ Emulate แล้ว Script หน้านี้เป็นคนละชุดคำสั่งเลย
พอ Emulate แล้ว Script หน้านี้เป็นคนละชุดคำสั่งเลย

นั่นหมายความว่า บางคนเขียน Script ที่จะ Render ขึ้นมาเฉพาะหน้าจอของสมาร์ทโฟน ถ้ามาเปิดที่หน้าจอคอมพิวเตอร์ก็จะ Disabled หรือปิดฟังก์ชันนั้นไม่ให้เห็น ก็กลายเป็นว่า เราจะต้องใช้ User Agent ในการเช็ค Script จริงๆ ซึ่งเจ้า Emulation นี้ช่วยเหลือเราได้มาก ณ จุดนี้

เทคนิคง่ายๆ เบาๆ น่าจะเป็นประโยชน์นะครับ ใครที่รู้แล้วก็ไม่เป็นไร ใครที่ยังไม่รู้ก็ฝึกลองใช้ไปนะครับ “เข้าใจตรงกันนะ”

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน