วิธีเปิดใช้งาน iPhone Debug Console หรือ Web Inspector

ก่อน iOS 6 เว็บเบราว์เซอร์ Safari ของ iPhone มี Debug Console ในตัวซึ่งนักพัฒนาใช้เพื่อค้นหาข้อบกพร่องของหน้าเว็บ iOS เวอร์ชันล่าสุดใช้ Web Inspector แทน Web Inspector ใช้โดยนักพัฒนาเว็บเพื่อแก้ไขแก้ไขข้อบกพร่องและเพิ่มประสิทธิภาพเว็บไซต์บน Mac และอุปกรณ์ iOS

หากต้องการใช้ Web Inspector ให้เชื่อมต่อ iPhone ของคุณกับคอมพิวเตอร์ Mac ด้วยสายเคเบิลเปิด Safari ของ Mac จากนั้นเปิดใช้งานเมนู Develop ใน Safari Advanced Preferences

ข้อมูลในบทความนี้ใช้กับ iPhone และอุปกรณ์ iOS อื่น ๆ ที่ใช้ iOS 6 ถึง iOS 12 และ Mac บน Mac OS X Leopard (10.5) ขึ้นไปเว้นแต่จะระบุไว้เป็นอย่างอื่น

Miguel Co / Lifewire 

เปิดใช้งาน Web Inspector บน iPhone iOS 6 และใหม่กว่า

Web Inspector ถูกปิดใช้งานโดยค่าเริ่มต้นเนื่องจากผู้ใช้ iPhone ส่วนใหญ่ไม่ได้ใช้งาน อย่างไรก็ตามนักพัฒนาสามารถเปิดใช้งานได้ในไม่กี่ขั้นตอนสั้น ๆ วิธีการมีดังนี้

1. แตะที่ การตั้งค่า ไอคอนบนหน้าจอโฮมของ iPhone

   บน iPhone ที่มี iOS เวอร์ชันก่อนหน้าให้เข้าถึง Debug Console ผ่าน การตั้งค่า > Safari > ผู้พัฒนา > Debug Console. เมื่อใดก็ตามที่ Safari บน iPhone ตรวจพบข้อผิดพลาด CSS, HTML และ JavaScript รายละเอียดของแต่ละข้อจะแสดงในดีบักเกอร์

2. เลื่อนลงและแตะ Safari เพื่อเปิดหน้าจอที่มีทุกอย่างที่เกี่ยวข้องกับเว็บเบราว์เซอร์ Safari บน iPhone, iPad หรือ iPod touch ของคุณ

3. เลื่อนไปที่ด้านล่างสุดของหน้าจอแล้วแตะ ระดับสูง.

4. ย้าย Web Inspector สลับไปที่ On ตำแหน่ง

   

เชื่อมต่อ iPhone กับ Safari บน Mac

หากต้องการใช้ Web Inspector ให้เชื่อมต่อ iPhone หรืออุปกรณ์ iOS เครื่องอื่นกับ Mac ที่ใช้งานเว็บเบราว์เซอร์ Safari เสียบอุปกรณ์ของคุณเข้ากับคอมพิวเตอร์โดยใช้สายเคเบิล

เมื่อเปิด Safari ให้ทำดังต่อไปนี้:

1. คลิก Safari ในแถบเมนูแล้วเลือก การตั้งค่า

   

2. คลิก ระดับสูง แถบ

   

3. เลือก แสดงเมนูพัฒนาในแถบเมนู กล่องกาเครื่องหมาย

   

4. ออกจากหน้าต่างการตั้งค่า

5. ในแถบเมนู Safari คลิก พัฒนาจากนั้นเลือก เชื่อมต่อ Web Inspector.

   

iPhone ที่เชื่อมต่อของคุณหรืออุปกรณ์ iOS อื่น ๆ จะปรากฏในไฟล์ พัฒนา เมนูแบบเลื่อนลง เมื่อเปิด Web Inspector นักพัฒนาสามารถตรวจสอบทรัพยากรทั้งหมดบนหน้าเว็บได้ หน้าต่าง Web Inspector ประกอบด้วย HTML ที่แก้ไขได้และหมายเหตุเกี่ยวกับสไตล์และเลเยอร์ของหน้าเว็บในแผงควบคุมแยกต่างหาก

ด้วย Safari 9 และ OS X Mavericks (10.9) Apple ได้เปิดตัวโหมด Responsive Design ใน Web Inspector นักพัฒนาใช้โปรแกรมจำลองในตัวนี้เพื่อดูว่าหน้าเว็บปรับขนาดตามขนาดหน้าจอความละเอียดและการวางแนวที่แตกต่างกันอย่างไร