Web Inspect วิธีตรวจสอบเว็บไซต์ ( Debug ) บน iOS Real Device

วิธีการตรวจสอบเว็บไซต์ หาปัญหาที่ทำให้เว็บไซต์ไม่สามารถทำงานได้ หรือที่เรียกว่าการ debug โดยส่วนใหญ่แล้วในขั้นตอนการพัฒนาเราใช้วิธีการ Web Inspect ผ่าน Simulator ของแต่ละ Device เช่นถ้าต้องการทดสอบการแสดงผลบน iPhone 8 หรือ iPad ก็แค่คลิกขวา เลือก inspect บน Google Chrome หรือเลือก Inspect Element บน Safari จากนั้นก็ดูที่ Tab Console สำหรับ Error หรือ Warning ส่วนของ Frontend

กรณีต้องการดูการรับส่งข้อมูลระหว่าง Sever ก็เลือก Tab Network ระบบจะสามารถให้ข้อมูลปัญหาต่าง ๆ ที่อาจจะทำให้เว็บไซต์ใช้งานไม่ได้ Browser ส่วนใหญ่รองรับการ Debug แบบนี้อยู่แล้ว ใช้งานง่าย ตรวจสอบง่าย

แต่ปัญหาอีกอย่างหนึ่งที่นักพัฒนามักเจอคือการทำงานบน Simulator กับ Device จริง ไม่เหมือนกัน ทดสอบบน Simulator สามารถทำงานได้ปกติทุก Device แต่พอใช้งานบน Device จริงกับเจอปัญหา หน้าเว็บไซต์ไม่แสดงผลบ้าง โหลดข้อมูลไม่ได้บ้าง แล้วจะหาสาเหตุได้อย่างไร หาเมนู Inspect Element บน Mobile Browser ไม่เจอ วิธีการคือต้องเปิดใช้งานก่อนครับ

วิธีเปิดใช้งาน Inspect Element บน Mobile iOS Safari

  • อันดับแรกไปที่อุปกรณ์สมาร์ทโฟน iPhone, iPad เลือก Setting -> Safari -> Advance เปิดใช้งาน Web Inspector หรือภาษาไทย ‘ตัวตรวจสอบเว็บ’
  • จากนั้น เสียบสาย เชื่อมต่อกับเครื่องตั้งโต๊นะครับ Macbook สังเกตุบน mobile จะขึ้น popup ให้กดอนุญาติการเชื่อมต่อ
  • เปิด Safari บน Macbook ไปที่ Safari -> Preference -> Advance ติ๊กถูกที่ ‘Show Develop Menu in Menu Bar’ จะสังเกตุว่ามี Tab Develop โผล่มา
  • เปิด Safari บน mobile iPhone, iPad ขึ้นมาครับ เข้าเว็บไซต์ที่เราต้องการจะ Inspect Element
  • เปิด Safari บนเครื่อง Macbook ไปที่เมนู Develop เลือก Device ที่เรากำลังเชื่อมต่ออยู่ ตอนนี้เราจะสามารถใช้ Inspect Element เพื่อดูข้อมูลหน้าเว็บที่อยู่ใน mobile แล้วนะครับ ทดสอบโดยการกด Refresh หน้าเว็บบน mobile หรือ ใช้เม้าที่ไปที่ Element ต่าง ๆ บนเครื่องตั้งโต๊ะ จะสังเกตุเห็นว่าเป็นการใช้งาน Inspect บนเครื่อง Macbook แต่ข้อมูลหน้าเว็บอยู่บน Safari mobile

จะสังเกตุว่าถ้าเราเปิด Tab ของ Safari ไว้หลาย Tab บน mobile ระบบก็จะแสดงรายการเว็บไซต์ตามที่เราเปิดไว้ เราสามารถเลือกที่จะทดสอบแต่ละหน้าเว็บไซต์ได้ผ่านเมนู Develop บนเครื่อง Macbook ได้เลยครับ

กระทู้ใกล้เคียง

Photoshop ออนไลน์ ทำงานได้ทุกที่ด้วย photopea.com... โดยปกติถ้านึกถึงโปรแกรมที่ใช้สำหรับงานออกแบบในสายงานต่าง ๆ เราจะต้องนึกถึงโปรแกรมอย่าง Adobe Photoshop, Sketch, GIMP, Adobe XD, CorelDraw เป็นอัน...
วิธีทำ LINE Login เข้าสู่ระบบด้วย Line (PHP) บนเว็... LINE Login API คือการเข้าสู่ระบบหรือสมัครสมาชิกแบบ SSO ( Single Sign On ) ความหมายคือการใช้ข้อมูลเดียวกันกับแพลตฟอร์มใด แพลตฟอร์มหนึ่งในการลงทะเบ...
เทคนิคเพิ่มความเร็วเว็บไซต์ Google Page Speed ด้วย... เทคนิคเพิ่มความเร็วเว็บไซต์ Google Page Speed ด้วย Google Fonts เทคนิคเพิ่มความเร็วเว็บไซต์ Google Page Speed Insight ตอน : Google Fonts ทดสอบโดยใช้ ...
วิธี Update ระบบปฏิบัติการ Android เครื่อง Samsung... ไปที่แอพ การตั้งค่า หรือถ้าเครื่องเราตั้งค่าเป็นภาษาอังกฤษ Setting ที่ติดมากับเครื่องที่ใช้ระบบปฏิบัติการ Android เลื่อนหาตัวเลือกที่ชื่อว่า อ...

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.