Safari สำหรับ iOS มีคอนโซลแก้ไขจุดบกพร่องที่เป็นตัวเลือกเพื่อช่วยนักพัฒนาเว็บติดตามและแก้ไขปัญหาเกี่ยวกับหน้าเว็บบน iPhone และ iPad

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

iOS เวอร์ชันเก่าก็มีความสามารถนี้เช่นกัน และแม้ว่าจะไม่ครอบคลุมเท่ากับเครื่องมือแก้ไขข้อบกพร่องและเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Safari บนเดสก์ท็อป แต่ก็ยังมีประโยชน์และสามารถเปิดใช้งานหรือปิดใช้งานได้ง่ายบน iPhone และ iPad

มาเรียนรู้วิธีเปิดใช้งานฟีเจอร์นี้บน iOS ทั้งเวอร์ชันใหม่และเวอร์ชันเก่า และเรียนรู้ความแตกต่างระหว่างเวอร์ชันด้วย

วิธีเปิดใช้งานและใช้ตัวตรวจสอบเว็บใน Safari สำหรับ iPhone และ iPad

ใน iOS และ iPadOS เวอร์ชันใหม่ วิธีการทำงานของตัวตรวจสอบเว็บของ Safari มีดังนี้

1. เปิดการตั้งค่า > Safari > ขั้นสูง แล้วแตะเพื่อเปิดใช้ “ตัวตรวจสอบเว็บ”
2. เชื่อมต่อ iPhone หรือ iPad เข้ากับเครื่อง Mac จากนั้นไปที่ Safari และเปิดใช้งานเมนูนักพัฒนาหากคุณยังไม่ได้ดำเนินการ โดยไปที่ Safari > ค่ากำหนด > ขั้นสูง > แสดงแถบเมนูพัฒนา
3. ดึงแถบเมนู “Develop” ลงมาและค้นหา iPhone หรือ iPad จากนั้นเปิดหน้าเว็บที่คุณต้องการแก้ไขข้อบกพร่อง
4. Safari Web Inspector จะเปิดขึ้นซึ่งคุณสามารถดีบักและตรวจสอบองค์ประกอบของเว็บจากอุปกรณ์ iOS หรือ IPadOS ได้โดยตรงใน Safari บน Mac

ตอนนี้ เมื่อคุณนำทางบน iPhone หรือ iPad คุณจะพบ Web Inspector ใน Safari บน Mac ซึ่งจะอัปเดต

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

คุณยังสามารถใช้เคล็ดลับ View Source สำหรับ iOS และ iPadOS ขณะเดินทางได้อีกด้วย หากจำเป็น

วิธีเปิดใช้งาน Debug Console บน iOS เวอร์ชันเก่า

หากคุณมี iOS เวอร์ชันเก่าบน iPhone หรือ iPad รุ่นเก่า ประสบการณ์การแก้ไขจุดบกพร่องทั้งหมดจะอยู่ในอุปกรณ์ และคุณจะไม่สามารถเชื่อมต่อกับ Safari บน Mac ได้ อย่างไรก็ตาม มันยังค่อนข้างมีประโยชน์ นี่คือวิธีการทำงาน:

1. เปิด “การตั้งค่า” และแตะที่ “Safari”
2. แตะที่ “ขั้นสูง”
3. เลื่อน “Debug Console” ไปที่ ON

เมื่อเปิดใช้งานแล้ว ให้แตะที่ Debug Console ที่ด้านบนของหน้าจอ Safari เพื่อดูข้อผิดพลาดของหน้าเว็บ

รายการเริ่มต้นแสดงข้อผิดพลาดทั้งหมด แต่คุณสามารถเจาะลึกไปยังข้อผิดพลาด HTML, JavaScript และ CSS ที่เฉพาะเจาะจงมากขึ้นได้โดยการแตะทีละรายการ

เครื่องมือที่มีประโยชน์อีกอย่างสำหรับนักพัฒนาเว็บบนมือถือคือ Firebug Lite สำหรับ iOS ซึ่งใช้บุ๊กมาร์กเล็ต javascript เพื่อโหลดเครื่องมือพัฒนา Firebug ยอดนิยมเวอร์ชันที่เรียบง่าย ฟังก์ชันดังกล่าวน่าจะมีประโยชน์มากที่สุดสำหรับ iOS เวอร์ชันเก่าด้วยเช่นกัน เนื่องจากเวอร์ชันใหม่มีความสามารถใหม่

คุณใช้เครื่องมือสำหรับนักพัฒนาเว็บสำหรับ iPhone หรือ iPad หรือไม่ แบ่งปันเคล็ดลับ กลเม็ด แอป หรือเทคนิคใดๆ กับเราในความคิดเห็นด้านล่าง