วิธีใช้ Web Inspector เพื่อดีบัก Mobile Safari (iPhone หรือ iPad)

การพัฒนาหน้าเว็บสำหรับอุปกรณ์เคลื่อนที่หรือการดีบักแอปไฮบริดมักเป็นเรื่องยาก แต่โชคดีสำหรับผู้ที่ออกแบบบน iOS โดยเริ่มต้นจาก iOS 6 นั้น Apple เสนอคุณสมบัติตัวตรวจสอบเว็บระยะไกลใน iOS

Web Inspector ช่วยให้นักพัฒนาเว็บและแอพมือถือสามารถใช้ macOS และ OS X Safari Developer Tools เพื่อดีบักเนื้อหาเว็บหรือแอพไฮบริดจากระยะไกลใน Safari บนมือถือบน iPad หรือ iPhone

เป็นวิธีที่ง่ายและใช้งานได้จริงในการดีบัก เพิ่มประสิทธิภาพ และแก้ไขหน้าเว็บหรือแอปไฮบริดบน iOS

ในการเข้าถึงเครื่องมือการพัฒนาเหล่านี้ ให้เปิดใช้งานเมนู Develop บนการตั้งค่าขั้นสูงของ Safari ของ Mac

เคล็ดลับง่ายๆ

ปฏิบัติตามคำแนะนำง่ายๆ เหล่านี้เพื่อให้ตัวตรวจสอบเว็บทำงาน เพื่อให้คุณแก้ไขจุดบกพร่องของเว็บไซต์หรือแอปสำหรับ Safari

• รีเซ็ตการตั้งค่าตำแหน่งและความเป็นส่วนตัวของคุณบน iPhone, iPad หรือ iPod touch ไปที่ การตั้งค่า > ทั่วไป > รีเซ็ต > รีเซ็ตตำแหน่งและความเป็นส่วนตัว
• ตรวจสอบให้แน่ใจว่าคุณลงชื่อเข้าใช้ Apple ID เดียวกันกับคอมพิวเตอร์กับ iPhone, iPad หรือ iPod touch ของคุณ
• เปิดการซิงค์ Safari iCloud สำหรับทั้งคอมพิวเตอร์และ iPhone, iPad หรือ iPod touch
• บน iPhone หรือ iPad ให้ไปที่ การตั้งค่า > Safari > ขั้นสูง และเปิด สารวัตรเว็บ
• บนคอมพิวเตอร์ เปิด Safari แล้วไปที่ เมนู Safari > ค่ากำหนด > ขั้นสูง และเครื่องหมายถูก แสดงเมนูพัฒนาในแถบเมนู

บทความที่เกี่ยวข้อง

• ดูซอร์สโค้ด HTML ของหน้าเว็บบน iPad หรือ iPhone ไม่ต้องใช้แอพ!
• วิธีดูซอร์สโค้ด HTML ใน Safari
• วิธีดู Favicons ใน Safari สำหรับ iPhone และ Mac

ต้องใช้คอมพิวเตอร์ Mac

ขออภัยชาว Windows แต่ Web Inspector ของ Safari ใช้งานได้กับ Mac เท่านั้น!

ใช้ Apple ID และ iCloud Sync เดียวกัน!

ตรวจสอบให้แน่ใจว่าทั้ง iDevice และ Mac ของคุณลงชื่อเข้าใช้ด้วย Apple ID เดียวกัน และคุณสลับบน Safari ใน iCloud

สำหรับ iDevice ของคุณ: การตั้งค่า > โปรไฟล์ Apple ID > iCloud > Safari > สลับ ON

สำหรับ Mac ของคุณ: Apple Menu > System Preferences > Apple ID หรือ iCloud > Safari > Checkmarked

และตรวจสอบว่า Safari เป็นเวอร์ชันเดียวกันด้วย

ตรวจสอบให้แน่ใจว่า Safari บน Mac ของคุณเป็นเวอร์ชันเดียวกับ Safari บน iDevice ของคุณ คุณอาจต้องอัปเดตเวอร์ชัน iOS หรือเวอร์ชันของ Safari ที่ทำงานบน Mac

รีเซ็ตการตั้งค่าตำแหน่งและความเป็นส่วนตัวของคุณ

1. ไปที่ ตั้งค่า > ทั่วไป
2. เลือก รีเซ็ต
3. เลือกที่จะ รีเซ็ตตำแหน่งและความเป็นส่วนตัว

เคล็ดลับแป้นพิมพ์ลัด Pro บน Mac สำหรับ Web Devs

หากคุณกด CTRL+Command+R ใน Safari คุณสามารถดูได้ว่าเว็บไซต์จะมีลักษณะอย่างไรในอุปกรณ์เฉพาะโดยการเลือกอุปกรณ์

ใช้ Web Inspector เพื่อดีบัก Safari บนมือถือ

1. บน iPad, iPhone หรือ iPod touch ของคุณ ให้แตะ การตั้งค่า > Safari > ขั้นสูง และเปิด สารวัตรเว็บ. และเปิดใช้งาน JavaScript หากยังไม่ได้เปิด

2. บน Mac ของคุณ ให้เปิด Safari แล้วไปที่ เมนู Safari > ค่ากำหนด > ขั้นสูง แล้วตรวจสอบ “แสดงเมนูพัฒนาในแถบเมนู” ถ้ายังไม่ได้ทำ

3. เชื่อมต่ออุปกรณ์ iOS ของคุณกับ Mac ด้วยสาย USB นี่เป็นสิ่งสำคัญ คุณต้องเชื่อมต่ออุปกรณ์ด้วยตนเองโดยใช้สายเคเบิล มันไม่ทำงานผ่าน WiFi!

4. ตอนนี้บน iPad ของคุณ ให้เปิดเว็บไซต์ที่คุณต้องการแก้ไข จากนั้นบน Mac ของคุณ ให้เปิด Safari แล้วไปที่ "พัฒนา" เมนู. ตอนนี้คุณเห็น iDevice ของคุณที่คุณเชื่อมต่อกับ Mac ของคุณ หากคุณไม่มีหน้าใดเปิดอยู่บน iDevice คุณจะเห็นข้อความว่า "ไม่มีแอปพลิเคชันที่ตรวจสอบได้"

5. ตอนนี้แก้ไขข้อบกพร่องของหน้าเว็บที่เปิดอยู่บน Safari บนมือถือ เช่นเดียวกับที่คุณจะดีบั๊กบน Mac ตรวจสอบองค์ประกอบ DOM แก้ไข CSS วัดประสิทธิภาพของหน้า และเรียกใช้คำสั่ง Javascript

ใช้เครื่องมือดีบักเกอร์เพื่อช่วยคุณค้นหาสาเหตุของข้อผิดพลาด JavaScript บนหน้าเว็บของคุณ คุณสามารถเพิ่มเบรกพอยต์ ดีบักจาวาสคริปต์ และตรวจสอบค่าของตัวแปรขณะรันไทม์ได้

Safari ยังควรตรวจพบข้อผิดพลาด CSS, HTML และ JavaScript และคุณจะเห็นรายละเอียดของแต่ละข้อผิดพลาดในตัวดีบั๊ก

iDevice ไม่ปรากฏในเมนูพัฒนาใน Safari?

•  ล้างแคชและคุกกี้ Safari ของคุณ
• อัปเดต Safari บน Mac และ iDevice ของคุณหากมีการอัปเดต
  • หากคุณใช้เวอร์ชันเบต้าของ iOS หรือ macOS คุณอาจต้องเรียกใช้เวอร์ชันเบต้าล่าสุดบนอุปกรณ์ทั้งหมด
• ลองใช้สายเคเบิลและ/หรือพอร์ตอื่นบน Mac ของคุณ ทำให้เเน่นอน สายเป็นสาย Lightning แท้ของ Apple หรือ MFI Certified (Made For iPhone)
• ตรวจสอบว่า Web Inspector เปิดอยู่ บางครั้งการอัปเดต iOS จะสลับกลับเป็นการตั้งค่าปิดเริ่มต้น ดังนั้นอย่าลืมตรวจสอบ การตั้งค่า > Safari > ขั้นสูง > Web Inspector
  • ลองสลับปิด Web Inspector รอ 10 วินาทีแล้วเปิดใหม่
• ลองใช้เบราว์เซอร์ Safari Technology Preview แทน
• ออกจาก Safari บน Mac ของคุณและเริ่มต้นใหม่ ดูว่า Safari ของ Mac ของคุณรู้จักอุปกรณ์ของคุณหรือไม่และอนุญาตให้ทำการดีบั๊ก
• ตรวจสอบว่าคุณไม่ได้ใช้โหมดการดูเว็บแบบส่วนตัวของ Safari if iDevice ของคุณจะแสดงขึ้นในเมนู Develop ของ Safari แล้วหายไป
• เปิดตัวตรวจสอบกิจกรรมและตรวจสอบว่าเกิดอะไรขึ้นกับ Safari

เคล็ดลับผู้อ่าน 

• หากคุณใช้ iDevice รุ่นเก่ากับ iOS 6 หรือเก่ากว่า เว็บเบราว์เซอร์ Safari ของอุปกรณ์ของคุณจะมี Debug Console ในตัว! เพียงเข้าไปที่ Debug Console ของ Safari โดยไปที่ การตั้งค่า > ซาฟารี > นักพัฒนา > ดีบักคอนโซล