วิธีแก้จุดบกพร่องหน้าเว็บบน iPhone โดยไม่ต้องใช้ Mac

เริ่มจากการวินิจฉัย: การตรวจอัตโนมัติ

ก่อนจะไปแกะ DOM ให้การสแกนอัตโนมัติบอกสิ่งที่เห็นชัดก่อน การวินิจฉัยของ OpenHTML จะแสดงไฟล์ที่หน้าอ้างอิงแต่หายไป ทรัพยากรระยะไกลที่ถูกบล็อกด้วยค่าเริ่มต้นด้านความเป็นส่วนตัว ข้อผิดพลาดขณะทำงานของ JavaScript และปัญหาการเข้ารหัส พร้อมวิธีแก้ในแตะเดียวสำหรับรายการที่แก้ได้ (อนุญาตเครือข่าย เปิด JavaScript สลับไปใช้เซิร์ฟเวอร์ภายใน)

ในทางปฏิบัติ วิธีนี้แก้กรณี "ทำไมหน้าถึงว่าง / ไม่มีสไตล์ / ทำงานได้ครึ่งเดียว" ได้ในไม่กี่วินาที โดยเฉพาะกับหน้าที่สร้างด้วย AI ที่อ้างอิงไฟล์ซึ่งไม่เคยถูกสร้างขึ้นจริง

คอนโซล: หน้าเว็บกำลังบอกอะไร

คอนโซลเก็บเอาต์พุต log, warn และ error จาก JavaScript ของหน้าแบบสด ข้อยกเว้นที่ไม่ถูกดักจับจะมาปรากฏที่นี่พร้อมข้อความของมัน ซึ่งมักเป็นเบาะแสที่เร็วที่สุดเมื่อการโต้ตอบของหน้าหยุดทำงาน

ตัวตรวจสอบองค์ประกอบ: DOM บนอุปกรณ์ (Pro)

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

แผงเครือข่าย: ทุกคำขอ พร้อมเวลา (Pro)

เฝ้าดูการรับส่งข้อมูล fetch, XHR และ WebSocket พร้อม URL รหัสสถานะ ขนาด และเวลา เทียบเท่าแท็บเครือข่ายแต่อยู่บนอุปกรณ์ ส่งออกทั้งเซสชันเป็นไฟล์ HAR เพื่อไปวิเคราะห์ต่อใน DevTools บนเดสก์ท็อป Charles หรือ Proxyman

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

จำลองสภาพการใช้งานจริง

• โหมดเซิร์ฟเวอร์ภายใน (Pro) ให้บริการโปรเจกต์ที่ 127.0.0.1 เพื่อให้ fetch() โมดูล ES และการโหลด JSON ทำงานเหมือนบนโปรดักชัน ซึ่งจำเป็นสำหรับโปรเจกต์เว็บแบบ ZIP
• ค่าที่ตั้งไว้ของวิวพอร์ต (Pro) แสดงหน้าที่ความกว้างระดับโทรศัพท์ แท็บเล็ต และเดสก์ท็อป เพื่อไล่จับจุดบกพร่องของเลย์เอาต์แบบตอบสนอง
• ขอเว็บไซต์เดสก์ท็อป (Pro) โหลดเลย์เอาต์เดสก์ท็อปเมื่อหน้าปรับตัวเข้าหามือถือมากเกินไป

ตัวอย่างเซสชันจริง

1. นำเข้าหน้าเว็บหรือโปรเจกต์ การวินิจฉัยชี้ว่ามีสไตล์ชีตจาก CDN ถูกบล็อกและมีข้อผิดพลาดในคอนโซลหนึ่งรายการ
2. อนุญาตเครือข่ายให้เอกสารนั้น → สไตล์เข้ามาแล้ว แต่ข้อผิดพลาดยังอยู่
3. คอนโซลแสดงตัวแปรที่ไม่ได้กำหนดค่าใน app.js แล้วตัวดูซอร์สกระโดดไปยังบรรทัดนั้น
4. ยืนยันวิธีแก้ด้วยการแก้ไขแอตทริบิวต์ใน DOM ผ่านตัวตรวจสอบ แล้วค่อยแก้ไฟล์จริงเมื่อกลับไปที่โต๊ะทำงาน และนำเข้าอีกครั้งเพื่อตรวจสอบ