วันจันทร์ที่ 14 กรกฎาคม พ.ศ. 2557

ตรวจสอบหน้าจอแบบ Responsive ด้วย Chrome Dev Tool




    ในเวลาที่เราได้ออกแบบหน้าจอของเว็บไซต์ ให้แสดงผลแบบ Responsive อาจจะใช้ front-end framework อย่าง Bootstrap ช่วยสร้างสรรค์หน้าจอแบบ Resposive ขึ้นมา หรือเขียนขึ้นมาเองโดยใช้ Css3+Html 5 เพื่อสำหรับแสดงผลบนอุปกรณ์ Smart Device อย่าง Smart Phone,Tablet  ซึ่งเวลาออกแบบนั้นเราจะพัฒนาบนโน๊ตบุคหรือพีซี ทำให้ไม่สะดวกต่อการนำไปทดสอบบนอุปกรณ์ Smart Device
     Google Chrome จึงมีสิ่งที่เรียกว่า Chrome Dev Tool เพื่อช่วยให้นักพัฒนาสามารถดูผลลัพธุ์ของหน้าจอที่เราได้ออกแบบ ผ่านทางหน้าจอของ Google Chorme ได้เลย

    วิธีใช้งาน  Chrome Dev Tool เพื่อดูการแสดงผลแบบ Responsive

- เปิด Browser ของ Google Chrome ขึ้นมา แล้วไปที่เว็บของเราหรือเว็บตัวอย่างที่ออกแบบหน้าจอแบบ Responsive
จากนั้นให้คลิกขวา เลือก ตรวจองค์ประกอบ ดังรูป



- จะมีแถบ Chrome Dev Tool แสดงขึ้นมาด้านล่าง ให้คลิกเปิดการใช้งานตามขั้นตอนดังนี้



1.คลิกที่สัญลักษณ์เวลาเอาเมาส์ชี้จะขึ้นคำว่า Show drawer.
2.เลือกแท็บ Emulation
3.เลือก Device ซึ่งจะมียี่ห้อ/รุ่นอุปกรณ์ Smart Device หลายยี่ห้อ/รุ่นให้เลือก รวมถึง iPad,iPhone ด้วย ในตัวอย่างผมเลือก Samsung Galaxy Note 3
4.กดปุ่ม Emulate เพื่อดูผลลัพธุ์ ดังนี้


ไม่มีความคิดเห็น :

แสดงความคิดเห็น