Debug JavaScript บน iPad ต้องใช้ Safari Web Inspector ผ่านการเชื่อมต่อกับ Mac
ขั้นตอนการตั้งค่า
- บน iPad/iPhone: ไป Settings → Safari → Advanced → เปิด Web Inspector
- บน Mac: เปิด Safari → Preferences (⌘,) → แท็บ Advanced → ติ๊ก Show Develop menu in menu bar
- เชื่อมต่อ: ใช้สาย USB Lightning/USB-C เชื่อม iPad กับ Mac
- บน Mac Safari: เมนู Develop → เลือกชื่อ iPad → เลือกหน้าเว็บที่ต้องการ Debug
การ Debug
- แท็บ Elements: Inspect DOM, CSS
- แท็บ Console: Log, Errors, REPL
- แท็บ Sources: Breakpoints, Step Debugging, Call Stack
- แท็บ Network: Requests, Responses
- แท็บ Storage: LocalStorage, Cookies, IndexedDB
ข้อจำกัด
- ต้องใช้ Mac + Safari (ไม่รองรับ Windows/Linux ตรงๆ)
- iOS Simulator (Xcode) ใช้ได้เหมือนกัน
- Chrome DevTools บน iPad ไม่มี (iOS ไม่อนุญาต Browser Engine อื่น)
ทางเลือกอื่น
- Weinre (WEb INspector REmote) - Remote Debugging ผ่าน Network (เก่า ไม่คุ้มค่า)
- Chrome DevTools + Port Forwarding - ผ่าน USB แต่ใช้ Chrome บน Android (ไม่ใช่ iPad)
- Console.log + Remote Logging - ส่ง Log ไป Server (Sentry, LogRocket)
หมายเหตุ: รูปภาพในต้นฉบับแสดงหน้า Settings > Safari > Advanced > Web Inspector