ต้องรู้
- เปิดใช้งาน Web Inspector บน iOS: ไปที่ Settings > Safari > Advanced และย้าย สวิตช์สลับ สารวัตรเว็บ สลับไปที่ตำแหน่ง เปิด
- ใช้ Web Inspector บน macOS: เชื่อมต่ออุปกรณ์ iOS ของคุณกับ Mac แล้วเลือก URL ที่จะตรวจสอบจากเมนู Develop
หากคุณพบข้อบกพร่องหรือปัญหาอื่นกับเว็บไซต์บน Safari บนมือถือ ให้ใช้เครื่องมือ Web Inspector เพื่อตรวจสอบ บทความนี้อธิบายวิธีใช้คอนโซล Safari สำหรับ iPhone เพื่อแก้ไขข้อผิดพลาดด้วยความช่วยเหลือของคอมพิวเตอร์ Mac ของคุณคำแนะนำใช้กับ iPhone ที่ใช้ iOS 14, iOS 12 หรือ iOS 11 และ Mac ที่มี macOS Big Sur (11.0), macOS Catalina (10.15) หรือ macOS Mojave (10.14)
เปิดใช้งาน Web Inspector บน iPhone หรืออุปกรณ์ iOS อื่นๆ ของคุณ
Web Inspector ถูกปิดใช้งานโดยค่าเริ่มต้น เนื่องจากผู้ใช้ iPhone ส่วนใหญ่ไม่สามารถใช้งานได้ อย่างไรก็ตาม หากคุณเป็นนักพัฒนาซอฟต์แวร์หรือสงสัย คุณสามารถเปิดใช้งานได้ในไม่กี่ขั้นตอนสั้นๆ วิธีการ:
-
เปิด iPhone การตั้งค่า menu.
บน iPhone ที่ใช้ iOS เวอร์ชันก่อนหน้า ให้เข้าถึง Debug Console ผ่าน Settings > Safari > ผู้พัฒนา > Debug Console เมื่อ Safari บน iPhone ตรวจพบข้อผิดพลาด CSS, HTML และ JavaScript รายละเอียดของแต่ละรายการจะแสดงในตัวดีบั๊ก
- เลื่อนลงแล้วแตะ Safari เพื่อเปิดหน้าจอที่มีทุกอย่างที่เกี่ยวข้องกับเว็บเบราว์เซอร์ Safari บน iPhone, iPad หรือ iPod touch ของคุณ
- เลื่อนไปที่ด้านล่างของหน้าและเลือก ขั้นสูง.
-
เลื่อนสวิตช์สลับ สารวัตรเว็บ ไปที่ตำแหน่ง เปิด
Image
เชื่อมต่ออุปกรณ์ iOS ของคุณกับ Safari บน Mac
ในการใช้ Web Inspector ให้เชื่อมต่อ iPhone หรืออุปกรณ์ iOS เครื่องอื่นกับ Mac ที่มีเว็บเบราว์เซอร์ Safari และเปิดใช้งานเมนู Develop
-
เมื่อเปิด Safari ให้เลือก Safari จากแถบเมนูแล้วเลือก Preferences
Image -
เลือกแท็บ ขั้นสูง
Image -
เลือกกล่องกาเครื่องหมาย แสดงเมนูพัฒนาในแถบเมนู แล้วปิดหน้าต่างการตั้งค่า
Image -
จากแถบเมนู Safari เลือก Develop และเลือกชื่ออุปกรณ์ iOS ที่เชื่อมต่อ จากนั้นเลือก URL ที่ปรากฏภายใต้ Safariเพื่อเปิดคอนโซลดีบักสำหรับไซต์นั้น
Image หลังจากที่คุณเชื่อมต่ออุปกรณ์ของคุณแล้ว ให้ใช้ Mac ของคุณเพื่อตรวจสอบเว็บไซต์ที่คุณต้องการแก้ไขจุดบกพร่องและเปิดขึ้นในเบราว์เซอร์มือถือ Safari
สารวัตรเว็บคืออะไร
นักพัฒนาเว็บใช้ Web Inspector เพื่อแก้ไข แก้จุดบกพร่อง และเพิ่มประสิทธิภาพเว็บไซต์บน Mac และอุปกรณ์ iOS เมื่อเปิด Web Inspector นักพัฒนาสามารถตรวจสอบทรัพยากรบนหน้าเว็บได้ หน้าต่าง Web Inspector ประกอบด้วย HTML ที่แก้ไขได้และหมายเหตุเกี่ยวกับสไตล์และเลเยอร์ของหน้าเว็บในแผงแยกต่างหาก
ก่อน iOS 6 เว็บเบราว์เซอร์ iPhone Safari มี Debug Console ในตัวที่นักพัฒนาใช้เพื่อค้นหาข้อบกพร่องของหน้าเว็บ iOS เวอร์ชันล่าสุดใช้ Web Inspector แทน
ด้วย Safari 9 และ OS X Mavericks (10.9) Apple ได้เปิดตัวโหมดการออกแบบที่ตอบสนองใน Web Inspector นักพัฒนาซอฟต์แวร์ใช้โปรแกรมจำลองในตัวนี้เพื่อดูตัวอย่างวิธีที่หน้าเว็บปรับขนาดตามขนาดหน้าจอ ความละเอียด และการวางแนวต่างๆ
