คู่มือนี้มีสมมติฐานว่าคุณคุ้นเคยกับการตรวจสอบ CSS ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โปรดดูที่ดูและเปลี่ยน CSS เพื่อเรียนรู้พื้นฐาน
ตรวจสอบ CSS ที่คุณเขียน
สมมติว่าคุณเพิ่ม CSS ลงในองค์ประกอบหนึ่ง และต้องการใช้รูปแบบใหม่อย่างถูกต้อง เมื่อคุณรีเฟรชหน้า องค์ประกอบจะมีลักษณะเหมือนเดิม เกิดข้อผิดพลาดบางอย่าง
สิ่งแรกที่ต้องทำคือตรวจสอบองค์ประกอบ และตรวจสอบว่าได้นำ CSS ใหม่ไปใช้กับองค์ประกอบแล้วจริงๆ
บางครั้งคุณจะเห็น CSS ใหม่ในแผงองค์ประกอบ > รูปแบบ แต่ CSS ใหม่จะเป็นข้อความสีอ่อน แก้ไขไม่ได้ ขีดฆ่า หรือมีไอคอนคำเตือนหรือคำแนะนำอยู่ข้างๆ
ทำความเข้าใจ CSS ในแผงรูปแบบ
แผงรูปแบบจะจดจำปัญหา CSS ได้หลายประเภทและไฮไลต์ปัญหาเหล่านั้นในลักษณะที่แตกต่างกัน
ตัวเลือกที่ตรงกันและไม่ตรงกัน
แผงรูปแบบจะแสดงตัวเลือกที่ตรงกันในข้อความปกติ และแสดงตัวเลือกที่ไม่ตรงกันในข้อความสีอ่อน
ค่าและการประกาศไม่ถูกต้อง
แผงรูปแบบจะขีดฆ่าและแสดงไอคอนคำเตือน 
รายการถัดจากรายการต่อไปนี้
- การประกาศ CSS ทั้งหมด (พร็อพเพอร์ตี้และค่า) เมื่อพร็อพเพอร์ตี้ CSS ไม่ถูกต้องหรือไม่รู้จัก
- เฉพาะค่าที่คุณสมบัติ CSS ถูกต้องแต่ค่าไม่ถูกต้อง
แทนที่แล้ว
แผงรูปแบบจะตัดพร็อพเพอร์ตี้ที่พร็อพเพอร์ตี้อื่นๆ ลบล้างออกตามลำดับการเรียงซ้อนกัน
ในตัวอย่างนี้ แอตทริบิวต์รูปแบบ width: 300px; ในองค์ประกอบจะลบล้าง width: 100% ในคลาส .youtube
ไม่ได้ใช้งาน
แผงรูปแบบจะแสดงเป็นข้อความสีอ่อน และวางไอคอนข้อมูล 
รายการไว้ข้างคุณสมบัติที่ถูกต้องแต่ไม่มีผลเนื่องจากพร็อพเพอร์ตี้อื่นๆ
พร็อพเพอร์ตี้สีอ่อนเหล่านี้ไม่ทำงานเนื่องจากตรรกะ CSS ไม่ใช่ลำดับการเรียงซ้อน
ในตัวอย่างนี้ พร็อพเพอร์ตี้ display: block; จะปิดใช้ justify-content และ align-items ที่ควบคุมเลย์เอาต์แบบยืดหยุ่นหรือตารางกริด
รับค่าเดิมและไม่รับค่ามา
แผงรูปแบบจะแสดงพร็อพเพอร์ตี้ในส่วน Inherited from <element-name> ตามการรับช่วงค่าเริ่มต้น ดังนี้
- ค่าที่รับช่วงมาโดยค่าเริ่มต้นจะอยู่ในข้อความปกติ
- ค่าที่ไม่รับค่าเดิมมาโดยค่าเริ่มต้นจะเป็นข้อความสีอ่อน
ชวเลข
คุณสมบัติ Shorthand (กระชับ) ช่วยให้คุณสามารถตั้งค่าคุณสมบัติ CSS หลายรายการพร้อมกันและทำให้สไตล์ชีตอ่านได้ง่ายขึ้น อย่างไรก็ตาม เนื่องจากพร็อพเพอร์ตี้ดังกล่าวมีลักษณะที่สั้น คุณจึงอาจพลาดพร็อพเพอร์ตี้ที่ยาว (แม่นยำ) จะลบล้างพร็อพเพอร์ตี้ที่บอกเป็นนัยด้วยชวเลข
แผงรูปแบบจะแสดงพร็อพเพอร์ตี้ชวเลขเป็นรายการแบบเลื่อนลง 
ที่มีพร็อพเพอร์ตี้ทั้งหมดที่ถูกตัดให้สั้นลง
ในตัวอย่างนี้ พร็อพเพอร์ตี้ที่ย่อ 2 จาก 4 รายการถูกลบล้างจริงๆ
แก้ไขไม่ได้
แผงรูปแบบจะแสดงคุณสมบัติที่แก้ไขในข้อความตัวเอียงไม่ได้ ตัวอย่างเช่น คุณจะแก้ไข CSS จากแหล่งที่มาต่อไปนี้ไม่ได้
user agent stylesheet- สไตล์ชีตเริ่มต้นของ Chrome
แอตทริบิวต์ HTML ที่เกี่ยวข้องกับสไตล์ในองค์ประกอบ เช่น ความสูง ความกว้าง สี ฯลฯ คุณแก้ไขแอตทริบิวต์เหล่านี้ได้ในแผนผัง DOM และการดำเนินการนี้จะอัปเดต CSS ในแผงรูปแบบ แต่ไม่ใช่ในทางกลับกัน
ในตัวอย่างนี้ แอตทริบิวต์
height="48"ในองค์ประกอบ<svg>ตั้งค่าเป็น50การดำเนินการนี้จะอัปเดตคุณสมบัติที่เกี่ยวข้องภายใต้svg[Attributes Style]ในแผงรูปแบบ
ตรวจสอบองค์ประกอบที่ยังไม่ได้จัดรูปแบบตามที่คุณคิด
คุณอาจต้องตรวจสอบสิ่งต่อไปนี้เพื่อค้นหาข้อผิดพลาด
- เอกสารประกอบของ CSS และความจำเพาะของตัวเลือกในเคล็ดลับเครื่องมือในแผงรูปแบบ
- แผงที่คำนวณแล้วเพื่อดู CSS ที่ใช้กับองค์ประกอบ "สุดท้าย" แล้วเปรียบเทียบกับองค์ประกอบที่คุณประกาศ
แผงองค์ประกอบ > รูปแบบ จะแสดงชุดกฎ CSS เหมือนกับที่เขียนในสไตล์ชีตต่างๆ ในทางกลับกัน แผงองค์ประกอบ > ที่คำนวณจะแสดงค่า CSS ที่แก้ไขแล้วซึ่ง Chrome ใช้ในการแสดงผลองค์ประกอบ ดังนี้
- CSS ที่มาจากการรับช่วงมา
- ผู้ชนะ Cascade
- คุณสมบัติแบบยาว (แม่นยำ) ไม่ใช่ชวเลข (กระชับ)
- ค่าที่คำนวณแล้ว เช่น
font-size: 14pxแทนที่จะเป็นfont-size: 70%
ทำความเข้าใจ CSS ในแผงที่คำนวณ
แผงที่คำนวณแล้วยังแสดงพร็อพเพอร์ตี้ต่างๆ แตกต่างกันด้วย
ประกาศและรับค่าแล้ว
แผงที่คำนวณแล้วจะแสดงพร็อพเพอร์ตี้ที่ประกาศในสไตล์ชีตใดๆ โดยใช้แบบอักษรปกติ ทั้งขององค์ประกอบเองและองค์ประกอบที่รับช่วงมา คลิกไอคอนขยาย 
ด้านข้างเพื่อดูแหล่งที่มา
หากต้องการดูการประกาศในแผงรูปแบบ ให้วางเมาส์เหนือคุณสมบัติที่ขยายแล้วคลิกปุ่มลูกศร 
หากต้องการดูการประกาศในแผงแหล่งที่มา ให้คลิกลิงก์ไปยังไฟล์แหล่งที่มา
สำหรับที่พักที่มีแหล่งที่มาหลายแหล่ง แผงที่คำนวณแล้วจะแสดงผู้ชนะแบบ Cascade ก่อน
รันไทม์
แผงที่คำนวณจะแสดงค่าพร็อพเพอร์ตี้ที่คำนวณระหว่างรันไทม์ในข้อความสีอ่อน
ในตัวอย่างนี้ Chrome จะคำนวณสิ่งต่อไปนี้สำหรับองค์ประกอบ <ul>
- ญาติของ
widthซึ่งก็คือ<div> heightที่สัมพันธ์กับองค์ประกอบย่อย องค์ประกอบ<li>ทั้ง 2 องค์ประกอบ
ไม่ได้รับค่ามาและกำหนดเอง
หากต้องการให้แผงที่คำนวณแล้วแสดงพร็อพเพอร์ตี้ทั้งหมดและค่า ให้เลือก
แสดงทั้งหมด พร็อพเพอร์ตี้ทั้งหมดมีดังนี้
- ค่าเริ่มต้นสำหรับพร็อพเพอร์ตี้ที่ไม่ได้รับค่ามาในข้อความสีอ่อน
- พร็อพเพอร์ตี้ที่กำหนดเอง โดยมี
--นำหน้าในข้อความธรรมดา พร็อพเพอร์ตี้ดังกล่าวจะรับค่าเดิมมาโดยค่าเริ่มต้น
หากต้องการแบ่งรายการใหญ่ๆ นี้เป็นหมวดหมู่ ให้เลือก 
กลุ่ม
ตัวอย่างนี้แสดงค่าเริ่มต้นสำหรับพร็อพเพอร์ตี้ที่ไม่ได้รับค่ามาในส่วนภาพเคลื่อนไหวและพร็อพเพอร์ตี้ที่กำหนดเองในตัวแปร CSS
ค้นหารายการซ้ำ
หากต้องการตรวจสอบพร็อพเพอร์ตี้หนึ่งๆ และพร็อพเพอร์ตี้ที่อาจซ้ำกัน ให้พิมพ์ชื่อพร็อพเพอร์ตี้นั้นในช่องข้อความตัวกรอง ซึ่งทำได้ทั้งในแผงรูปแบบและที่คำนวณ
ดูค้นหาและกรอง CSS ขององค์ประกอบ