ปัญหา: ค้นหาและแก้ไขปัญหา

Sam Dutton

Sofia Emelianova

ใช้แผงปัญหาเพื่อค้นหาวิธีแก้ปัญหาที่เบราว์เซอร์ตรวจพบ เช่น ปัญหาเกี่ยวกับคุกกี้และเนื้อหาที่ผสมกัน

ภาพรวม

แผงปัญหาจะรวบรวมและจัดกลุ่มปัญหาที่พบได้ทั่วไป ซึ่งช่วยลดการแจ้งเตือนที่รบกวนสายตาและลดความกระจัดกระจายในคอนโซล

ขณะนี้แผงปัญหาจะรายงานข้อมูลต่อไปนี้

• ปัญหาเกี่ยวกับคุกกี้
• เนื้อหาแบบผสม
• ปัญหาเกี่ยวกับ COEP
• ข้อผิดพลาด CORS
• ปัญหาเกี่ยวกับโหมดที่ไม่มาตรฐาน
• (เวอร์ชันตัวอย่าง) ปัญหาคอนทราสต์ต่ำ
• ปัญหาเกี่ยวกับกิจกรรมในเว็บซึ่งเชื่อถือได้
• ปัญหาในการโหลดสไตล์ชีต
• กฎ @property CSS ไม่ถูกต้อง
• การละเมิดนโยบายความปลอดภัยของเนื้อหา
• ปัญหาเกี่ยวกับแอตทริบิวต์การเติมข้อความอัตโนมัติ

Chrome เวอร์ชันในอนาคตจะรองรับปัญหาประเภทอื่นๆ เพิ่มเติม

เปิดแผงปัญหา

1. ไปที่หน้าเว็บที่มีปัญหา เช่น samesite-sandbox.glitch.me
2. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ

3. คลิกปุ่มเปิดปัญหาข้าง การตั้งค่าที่มุมขวาของแถบการดำเนินการที่ด้านบน ปุ่มอาจมีไอคอนสีแดง สีเหลือง หรือสีน้ำเงิน ทั้งนี้ขึ้นอยู่กับความรุนแรงของปัญหา

   

   หรือเลือกปัญหาจากเมนู เครื่องมือเพิ่มเติม

   

4. เมื่ออยู่ในแผงปัญหา คุณอาจต้องโหลดหน้าเว็บซ้ำเพื่อจับปัญหาเพิ่มเติม ซึ่งครั้งนี้เกิดขึ้นระหว่างการโหลดหน้าเว็บ

   

คอนโซลอาจแสดงปัญหาที่เบราว์เซอร์รายงานด้วย อย่างไรก็ตาม คุณจะเห็นว่าปัญหาดังกล่าว (เช่น คำเตือนเกี่ยวกับคุกกี้ในภาพหน้าจอด้านล่าง) นั้นเข้าใจยาก เราไม่แน่ใจว่าคุณต้องทําอะไรเพื่อแก้ไขปัญหานี้

ในทางกลับกัน แผงปัญหาจะให้ข้อมูลเชิงลึกที่นําไปใช้ได้จริง

ดูรายการในแผงปัญหา

แผงปัญหาจะแสดงคำเตือนจากเบราว์เซอร์ในรูปแบบที่มีโครงสร้าง รวบรวม และนําไปใช้ได้

1. คลิกรายการในแผงปัญหาเพื่อขยายปัญหาและดูคําแนะนําเกี่ยวกับวิธีแก้ไขและค้นหาทรัพยากรที่ได้รับผลกระทบ

   

   แต่ละรายการประกอบด้วยองค์ประกอบ 4 อย่าง ได้แก่

   • บรรทัดแรกที่อธิบายปัญหา
   • คำอธิบายที่ให้บริบทและวิธีแก้ปัญหา
   • ส่วนทรัพยากรที่ได้รับผลกระทบซึ่งลิงก์ไปยังทรัพยากรภายในบริบท DevTools ที่เหมาะสม เช่น เครือข่าย แหล่งที่มา องค์ประกอบ และแผงอื่นๆ
   • ลิงก์ไปยังคําแนะนําเพิ่มเติม

2. คลิกรายการในทรัพยากรที่ได้รับผลกระทบเพื่อดูปัญหาในบริบท

จัดกลุ่มปัญหาตามประเภท

แผงปัญหาจะนับจํานวนทรัพยากรที่ได้รับผลกระทบสําหรับปัญหาแต่ละรายการและแสดงไว้ข้างพาดหัว นอกจากนี้ คุณยังจัดระเบียบปัญหาตามความรุนแรงเป็นกลุ่มได้ 3 ประเภท ดังนี้

• ข้อผิดพลาดของหน้าเว็บที่ Chrome รายงาน
• การเปลี่ยนแปลงที่ส่งผลกับส่วนอื่นในระบบ เช่น การเลิกใช้งาน
• การปรับปรุงที่เครื่องมือสำหรับนักพัฒนาเว็บแนะนำ

หากต้องการจัดกลุ่มปัญหา ให้เลือก จัดกลุ่มตามประเภทในแถบการดำเนินการที่ด้านบนของแผงปัญหา

รวมปัญหาของบุคคลที่สาม

แผงปัญหาจะแสดงปัญหาเกี่ยวกับคุกกี้ของบุคคลที่สามโดยค่าเริ่มต้น

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

หากต้องการซ่อนปัญหาดังกล่าว ให้ล้าง รวมปัญหาคุกกี้ของบุคคลที่สามในแถบการดำเนินการที่ด้านบนของแผงปัญหา

ซ่อนปัญหา

หากต้องการซ่อนปัญหา ให้เลือกซ่อนปัญหาที่คล้ายกันจากเมนู 3 จุด ข้างปัญหา

หากต้องการดูรายการปัญหาที่ซ่อนอยู่ ให้เลื่อนลงไปที่ส่วนปัญหาที่ซ่อนอยู่ แล้วขยายส่วนนั้น

หากต้องการแสดงปัญหาทั้งหมด ให้คลิกเลิกซ่อนทั้งหมด หากต้องการแสดงปัญหาที่เฉพาะเจาะจง ให้เลือกเลิกซ่อนปัญหาลักษณะนี้จากเมนู 3 จุดข้างปัญหา

นอกจากนี้ เมื่อเปิดใช้การจัดกลุ่ม คุณจะซ่อนกลุ่มปัญหาทั้งหมดได้โดยใช้เมนูจุด 3 จุดเดียวกันข้างกลุ่ม

ดูปัญหาในบริบท

วิธีตรวจสอบปัญหา

1. ในส่วนทรัพยากรที่ได้รับผลกระทบ ให้คลิกลิงก์ทรัพยากรเพื่อดูรายการในบริบทที่เหมาะสมภายในเครื่องมือสำหรับนักพัฒนาเว็บ ในตัวอย่างนี้ ให้คลิก samesite-sandbox.glitch.me เพื่อแสดงคุกกี้ที่แนบมากับคําขอนั้น ลิงก์จะนำคุณไปยังแผงเครือข่าย

   

2. เลื่อนเพื่อดูสินค้าที่มีปัญหา ซึ่งในกรณีนี้คือคุกกี้ ck02 วางเมาส์เหนือไอคอนข้อมูลทางด้านขวาเพื่อดูปัญหาและวิธีแก้ไข