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

&NewLine;<figure class&equals;"wp-block-video"><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">วิธีการตรวจสอบเว็บไซต์ หาปัญหาที่ทำให้เว็บไซต์ไม่สามารถทำงานได้ หรือที่เรียกว่าการ debug โดยส่วนใหญ่แล้วในขั้นตอนการพัฒนาเราใช้วิธีการ Web Inspect ผ่าน Simulator ของแต่ละ Device เช่นถ้าต้องการทดสอบการแสดงผลบน iPhone 8 หรือ iPad ก็แค่คลิกขวา เลือก inspect บน Google Chrome หรือเลือก Inspect Element บน Safari จากนั้นก็ดูที่ Tab Console สำหรับ Error หรือ Warning ส่วนของ Frontend <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">กรณีต้องการดูการรับส่งข้อมูลระหว่าง Sever ก็เลือก Tab Network ระบบจะสามารถให้ข้อมูลปัญหาต่าง ๆ ที่อาจจะทำให้เว็บไซต์ใช้งานไม่ได้ Browser ส่วนใหญ่รองรับการ Debug แบบนี้อยู่แล้ว ใช้งานง่าย ตรวจสอบง่าย<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">แต่ปัญหาอีกอย่างหนึ่งที่นักพัฒนามักเจอคือการทำงานบน Simulator กับ Device จริง ไม่เหมือนกัน ทดสอบบน Simulator สามารถทำงานได้ปกติทุก Device แต่พอใช้งานบน Device จริงกับเจอปัญหา หน้าเว็บไซต์ไม่แสดงผลบ้าง โหลดข้อมูลไม่ได้บ้าง แล้วจะหาสาเหตุได้อย่างไร หาเมนู Inspect Element บน Mobile Browser ไม่เจอ วิธีการคือต้องเปิดใช้งานก่อนครับ <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>วิธีเปิดใช้งาน Inspect Element บน Mobile iOS Safari<&sol;strong><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>อันดับแรกไปที่อุปกรณ์สมาร์ทโฟน iPhone&comma; iPad เลือก Setting -&gt&semi; Safari -&gt&semi; Advance เปิดใช้งาน Web Inspector หรือภาษาไทย &&num;8216&semi;ตัวตรวจสอบเว็บ&&num;8217&semi;<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2019&sol;06&sol;Web-Inspect-วิธีตรวจสอบเว็บไซต์&period;png" alt&equals;"" class&equals;"wp-image-4711" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2019&sol;06&sol;Web-Inspect-วิธีตรวจสอบเว็บไซต์&period;png" data-full-size&equals;"768x414" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>จากนั้น เสียบสาย เชื่อมต่อกับเครื่องตั้งโต๊นะครับ Macbook สังเกตุบน mobile จะขึ้น popup ให้กดอนุญาติการเชื่อมต่อ<&sol;li><li>เปิด Safari บน Macbook ไปที่ Safari -&gt&semi; Preference -&gt&semi; Advance ติ๊กถูกที่ &&num;8216&semi;Show Develop Menu in Menu Bar&&num;8217&semi; จะสังเกตุว่ามี Tab Develop โผล่มา <&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2019&sol;06&sol;Web-Inspect-วิธีตรวจสอบเว็บไซต์-1-940x605&period;png" alt&equals;"" class&equals;"wp-image-4703" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2019&sol;06&sol;Web-Inspect-วิธีตรวจสอบเว็บไซต์-1&period;png" data-full-size&equals;"1764x1136" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>เปิด Safari บน mobile iPhone&comma; iPad ขึ้นมาครับ เข้าเว็บไซต์ที่เราต้องการจะ Inspect Element <&sol;li><li>เปิด Safari บนเครื่อง Macbook ไปที่เมนู Develop เลือก Device ที่เรากำลังเชื่อมต่ออยู่ ตอนนี้เราจะสามารถใช้ Inspect Element เพื่อดูข้อมูลหน้าเว็บที่อยู่ใน mobile แล้วนะครับ ทดสอบโดยการกด Refresh หน้าเว็บบน mobile หรือ ใช้เม้าที่ไปที่ Element ต่าง ๆ บนเครื่องตั้งโต๊ะ จะสังเกตุเห็นว่าเป็นการใช้งาน Inspect บนเครื่อง Macbook แต่ข้อมูลหน้าเว็บอยู่บน Safari mobile <&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2019&sol;06&sol;Web-Inspect-วิธีตรวจสอบเว็บไซต์-2-940x457&period;png" alt&equals;"" class&equals;"wp-image-4705" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2019&sol;06&sol;Web-Inspect-วิธีตรวจสอบเว็บไซต์-2&period;png" data-full-size&equals;"2308x1122" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">จะสังเกตุว่าถ้าเราเปิด Tab ของ Safari ไว้หลาย Tab บน mobile ระบบก็จะแสดงรายการเว็บไซต์ตามที่เราเปิดไว้ เราสามารถเลือกที่จะทดสอบแต่ละหน้าเว็บไซต์ได้ผ่านเมนู Develop บนเครื่อง Macbook ได้เลยครับ<&sol;p>&NewLine;