ใช้แผงภาพรวม CSS เพื่อทำความเข้าใจ CSS ของหน้าเว็บให้ดียิ่งขึ้นและระบุการปรับปรุงที่เป็นไปได้
เปิดแผงภาพรวม CSS
- เปิดหน้าเว็บใดก็ได้ เช่น หน้านี้
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
เลือก
ปรับแต่งและควบคุมเครื่องมือสำหรับนักพัฒนาเว็บ > เครื่องมือเพิ่มเติม > ภาพรวมของ CSS
หรือใช้เมนูคำสั่งเพื่อเปิดแผงภาพรวมของ CSS
เรียกใช้รายงานภาพรวม CSS อีกครั้ง
คลิกปุ่มบันทึกภาพรวมเพื่อสร้างรายงานภาพรวม CSS ของหน้าเว็บ
หากต้องการเรียกใช้ภาพรวม CSS อีกครั้ง ให้คลิกไอคอนล้างภาพรวม
และทำซ้ำขั้นตอนแรก
ทำความเข้าใจรายงานภาพรวม CSS
รายงานประกอบด้วย 5 ส่วนต่อไปนี้
- สรุปภาพรวม สรุประดับสูงของ CSS ของหน้าเว็บ
สี ทุกสีในหน้าเว็บของคุณ สีจะจัดกลุ่มตามประเภท เช่น สีพื้นหลัง สีข้อความ ฯลฯ ส่วนนี้จะแสดงข้อความที่มีปัญหาคอนทราสต์ต่ำด้วย
แต่ละสีสามารถคลิกได้ เช่น สมมติว่าสีเส้นขอบ
#DADCE0ไม่ตรงกับรูปแบบสีของเว็บไซต์ หากต้องการดูรายการองค์ประกอบที่ใช้สีนี้ ให้คลิกสี
หากต้องการไฮไลต์องค์ประกอบในหน้า ให้วางเมาส์เหนือองค์ประกอบในรายการ
หากต้องการเปิดองค์ประกอบในแผงองค์ประกอบ ให้คลิกองค์ประกอบในรายการ
ข้อมูลแบบอักษร แบบอักษรทั้งหมดในหน้าเว็บและแบบอักษรต่างๆ โดยจัดกลุ่มตามขนาดแบบอักษร น้ำหนักของแบบอักษร และความสูงของบรรทัดที่แตกต่างกัน คลิกรายการขององค์ประกอบที่ได้รับผลกระทบซึ่งคล้ายกับส่วนสี
การประกาศที่ไม่ได้ใช้ สไตล์ทั้งหมดที่ไม่มีผลซึ่งจัดกลุ่มตามเหตุผล
ตัวอย่างเช่น ไม่ได้ใช้การประกาศ 2 รายการข้างต้นเนื่องจากเนื้อหาเป็นตัวกําหนดความสูงและความกว้างขององค์ประกอบในบรรทัด หากต้องการดูองค์ประกอบที่เกี่ยวข้อง ให้คลิกรายการ
คำค้นหาสื่อ คำค้นหาสื่อทั้งหมดที่กำหนดไว้ในหน้าเว็บของคุณ โดยจัดเรียงตามจำนวนรายการในลำดับจากมากไปน้อย หากต้องการดูรายการองค์ประกอบที่ได้รับผลกระทบ ให้คลิกรายการขององค์ประกอบนั้นๆ
