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

Sam Dutton

Sofia Emelianova

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

ปัจจุบันแผงปัญหารองรับรายการต่อไปนี้

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

Chrome เวอร์ชันต่อๆ ไปจะรองรับปัญหาหลายประเภทมากขึ้น

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

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

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

   

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

   

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

   

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

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

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

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

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

   

   แต่ละรายการมีองค์ประกอบ 4 อย่างดังนี้

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

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

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

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

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

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

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

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

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

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

ซ่อนปัญหา

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

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

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

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

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

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

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

   

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