แผงปัญหาในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะลดความเหนื่อยล้าของการแจ้งเตือนและความยุ่งเหยิงในคอนโซล ใช้รายงานนี้เพื่อหาวิธีแก้ปัญหาที่เบราว์เซอร์ตรวจพบ เช่น ปัญหาคุกกี้และเนื้อหาผสม
ปัจจุบันแผงปัญหารองรับรายการต่อไปนี้
- ปัญหาของคุกกี้
- เนื้อหาผสม
- ปัญหาเกี่ยวกับ COEP
- ข้อผิดพลาด CORS
- ปัญหาเกี่ยวกับโหมดที่ไม่มาตรฐาน
- (ตัวอย่าง) ปัญหาคอนทราสต์ต่ำ
- ปัญหากิจกรรมบนเว็บที่เชื่อถือได้
- ปัญหาเกี่ยวกับการโหลดสไตล์ชีต
- กฎ CSS
@property
รายการไม่ถูกต้อง - การละเมิดนโยบายรักษาความปลอดภัยเนื้อหา
- ปัญหาเกี่ยวกับแอตทริบิวต์การเติมข้อความอัตโนมัติ
Chrome เวอร์ชันต่อๆ ไปจะรองรับปัญหาหลายประเภทมากขึ้น
เปิดแผงปัญหา
- ไปที่หน้าที่มีปัญหาที่ต้องแก้ไข เช่น samesite-sandbox.glitch.me
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
คลิกปุ่มเปิดปัญหาข้างการตั้งค่า ที่มุมขวาของแถบการดำเนินการที่ด้านบน ปุ่มดังกล่าวอาจมีไอคอน สีแดง สีเหลือง หรือสีน้ำเงิน โดยขึ้นอยู่กับความรุนแรงของปัญหา
หรือเลือกปัญหาจากเมนูเครื่องมือเพิ่มเติม
เมื่อคุณอยู่ที่แผงปัญหา คุณอาจต้องการโหลดหน้าซ้ำเพื่อให้ทราบถึงปัญหาเพิ่มเติม ซึ่งขั้นตอนนี้จะเกิดขึ้นระหว่างการโหลดหน้าเว็บ
คอนโซลอาจแสดงปัญหาที่เบราว์เซอร์รายงานด้วย อย่างไรก็ตาม คุณจะสังเกตเห็นว่าปัญหาเหล่านี้ (เช่น คำเตือนเกี่ยวกับคุกกี้ในภาพหน้าจอด้านล่าง) นั้นเข้าใจยาก ไม่ชัดเจนว่าคุณต้องทำอะไรเพื่อแก้ไข
ในทางตรงกันข้าม แผงปัญหาจะแสดงข้อมูลเชิงลึกที่นำไปใช้ได้จริง
ดูรายการในแผงปัญหา
แผงปัญหาจะแสดงคำเตือนจากเบราว์เซอร์ในรูปแบบที่มีโครงสร้าง รวบรวม และดำเนินการได้
คลิกรายการในแผงปัญหาเพื่อขยายปัญหา และรับคำแนะนำเกี่ยวกับวิธีแก้ไขปัญหาและค้นหาแหล่งข้อมูลที่ได้รับผลกระทบ
แต่ละรายการมีองค์ประกอบ 4 อย่างดังนี้
- บรรทัดแรกที่อธิบายปัญหา
- คำอธิบายที่ให้บริบทและวิธีแก้ปัญหา
- ส่วนแหล่งข้อมูลที่ได้รับผลกระทบซึ่งลิงก์ไปยังทรัพยากรภายในบริบทเครื่องมือสำหรับนักพัฒนาเว็บที่เหมาะสม เช่น เครือข่าย แหล่งที่มา องค์ประกอบ และแผงอื่นๆ
- ลิงก์ไปยังคำแนะนำเพิ่มเติม
คลิกรายการในแหล่งข้อมูลที่ได้รับผลกระทบเพื่อดูปัญหาในบริบท
จัดกลุ่มปัญหาตามประเภท
แผงปัญหาจะนับจำนวนทรัพยากรที่ได้รับผลกระทบสำหรับแต่ละปัญหา และแสดงถัดจากพาดหัว นอกจากนี้ คุณยังจัดระเบียบปัญหาตามความรุนแรงได้ 3 ประเภทดังนี้
- ข้อผิดพลาดของหน้าที่ Chrome รายงาน
- การแก้ไขการเปลี่ยนแปลง เช่น การเลิกใช้งาน
- การปรับปรุงที่เครื่องมือสำหรับนักพัฒนาเว็บแนะนำ
หากต้องการจัดกลุ่มปัญหา ให้เลือก จัดกลุ่มตามประเภทในแถบการดำเนินการที่ด้านบนของแผงปัญหา
รวมปัญหาของบุคคลที่สาม
แผงปัญหาจะแสดงปัญหาคุกกี้ของบุคคลที่สามโดยค่าเริ่มต้น
คุณสามารถดูปัญหาคุกกี้ของบุคคลที่สามได้ในส่วนแหล่งข้อมูลที่ได้รับผลกระทบโดยไม่มีลิงก์
หากต้องการซ่อนปัญหาดังกล่าว ให้ล้าง รวมปัญหาเกี่ยวกับคุกกี้ของบุคคลที่สามในแถบการดำเนินการที่ด้านบนของแผงปัญหา
ซ่อนปัญหา
หากต้องการซ่อนปัญหา ให้เลือกซ่อนปัญหาลักษณะนี้จากเมนู 3 จุด ข้างปัญหา
หากต้องการดูรายการปัญหาที่ซ่อนอยู่ ให้เลื่อนลงไปที่ส่วนปัญหาที่ซ่อนอยู่และขยายปัญหา
หากต้องการแสดงปัญหาทั้งหมด ให้คลิกเลิกซ่อนทั้งหมด หากต้องการดูปัญหาที่เฉพาะเจาะจง ให้เลือกเลิกซ่อนปัญหาลักษณะนี้จากเมนู 3 จุด ข้างปัญหา
นอกจากนี้ หากเปิดใช้การจับกลุ่ม คุณจะซ่อนกลุ่มปัญหาทั้งกลุ่มได้โดยใช้เมนู 3 จุดเดียวกันที่อยู่ข้างกลุ่ม
ดูปัญหาในบริบท
วิธีตรวจสอบปัญหา
ในส่วนแหล่งข้อมูลที่ได้รับผลกระทบ ให้คลิกลิงก์ทรัพยากรเพื่อดูรายการในบริบทที่เหมาะสมภายในเครื่องมือสำหรับนักพัฒนาเว็บ ในตัวอย่างนี้ ให้คลิก
samesite-sandbox.glitch.me
เพื่อแสดงคุกกี้ที่แนบกับคำขอนั้น ลิงก์จะนำคุณไปยังแผงเครือข่ายเลื่อนเพื่อดูรายการที่มีปัญหา: ในกรณีนี้ ให้ใช้คุกกี้
ck02
วางเมาส์เหนือไอคอนข้อมูล ทางด้านขวาเพื่อดูปัญหาและวิธีแก้ไข