Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

วิธี Debug JavaScript บน iPad (Safari Web Inspector)

Debug JavaScript บน iPad ต้องใช้ Safari Web Inspector ผ่านการเชื่อมต่อกับ Mac

ขั้นตอนการตั้งค่า

  1. บน iPad/iPhone: ไป Settings → Safari → Advanced → เปิด Web Inspector
  2. บน Mac: เปิด Safari → Preferences (⌘,) → แท็บ Advanced → ติ๊ก Show Develop menu in menu bar
  3. เชื่อมต่อ: ใช้สาย USB Lightning/USB-C เชื่อม iPad กับ Mac
  4. บน 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