รูปแบบที่คำนวณแล้วและตัวตรวจสอบโมเดลกล่อง

Chrome DevTools → องค์ประกอบ → แท็บคำนวณแล้วจะแสดงค่าที่คำนวณสุดท้ายของคุณสมบัติ CSS ทุกคุณสมบัติบนองค์ประกอบที่เลือก หลังจากพิจารณาลำดับการซ้อน การสืบทอด และความเจาะจงแล้ว แผงนี้ตอบคำถามว่า "มีการใช้ค่าใดจริง" แทนที่จะตอบว่า "เขียนค่าใดไว้"

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

พิมพ์ในกล่องตัวกรองเพื่อค้นหาคุณสมบัติที่คำนวณแล้วเฉพาะรายการได้อย่างรวดเร็ว เลือก "แสดงทั้งหมด" เพื่อรวมคุณสมบัติที่สืบทอดและคุณสมบัติค่าเริ่มต้นของเบราว์เซอร์ ยกเลิกการเลือกเพื่อแสดงเฉพาะคุณสมบัติที่ไม่ใช่ค่าเริ่มต้น ซึ่งเป็นวิธีที่สั้นที่สุดในการค้นหาสไตล์ที่ถูกใช้และเกี่ยวข้อง

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

การเขียน margin: 16px 8px จะขยายเป็นค่าที่คำนวณแล้วสี่ค่า ได้แก่ ระยะขอบด้านบน ระยะขอบด้านขวา ระยะขอบด้านล่าง และระยะขอบด้านซ้าย แผงคำนวณแล้วจะแสดงคุณสมบัติแบบเต็มแยกกันเสมอ ซึ่งมีประโยชน์สำหรับการแก้ไขปัญหาระยะห่างที่ไม่เท่ากัน

ค่าที่คำนวณแล้วของสีจะแสดงในรูปแบบ rgb() หรือ rgba() เสมอ ไม่ว่าจะเขียนค่าเดิมด้วยรูปแบบใด คลิกตัวอย่างสีในแผงสไตล์เพื่อสลับรูปแบบการแสดงผลระหว่าง hex, hsl และ rgb แผงคำนวณแล้วจะแสดงสีที่ผ่านการแก้ค่าจนได้ผลลัพธ์แล้วเสมอ

ตรวจสอบขนาดแบบอักษร ตระกูลแบบอักษร ความสูงบรรทัด และระยะห่างตัวอักษรที่คำนวณแล้ว เพื่อยืนยันว่าโทเค็นตัวอักษรถูกใช้อย่างถูกต้อง ฟอนต์สำรองของเบราว์เซอร์จะแสดงในตระกูลแบบอักษรที่คำนวณแล้วเมื่อฟอนต์ที่ร้องขอโหลดไม่สำเร็จ

การกำหนดขนาดกล่องแบบรวมเส้นขอบทำให้ความกว้างรวมช่องว่างภายในและเส้นขอบ ส่วนการกำหนดขนาดกล่องแบบรวมเฉพาะเนื้อหา (ค่าเริ่มต้น) จะไม่รวมสิ่งเหล่านี้ แผนภาพโมเดลกล่องใน DevTools จะแสดงตามโมเดลที่ใช้ เปรียบเทียบความกว้างของเนื้อหากับความกว้างทั้งหมดเพื่อยืนยันพฤติกรรมการกำหนดขนาดกล่อง

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

แผงสไตล์จะแสดงกฎทั้งหมดที่กำหนดเป้าหมายไปยังองค์ประกอบ โดยเรียงตามความเจาะจง กฎที่ถูกขีดฆ่าคือกฎที่ถูกแทนที่ หากต้องการค้นหาว่ากฎใดชนะในการขัดแย้งของคุณสมบัติ ให้มองหาคำประกาศบนสุดที่ไม่ถูกขีดฆ่าในแผงสไตล์

กฎจากสไตล์ชีตของตัวแทนผู้ใช้เบราว์เซอร์จะแสดงที่ด้านล่างของแผงสไตล์ โดยมีป้ายกำกับว่า "สไตล์ชีตของตัวแทนผู้ใช้" แผงคำนวณแล้วจะแสดงค่าที่ได้จากกฎเหล่านั้น รีเซ็ตค่าเหล่านี้ด้วยการรีเซ็ต CSS หรือ Normalize.css เพื่อสร้างค่าพื้นฐานที่สอดคล้องกันในเบราว์เซอร์ต่าง ๆ

แผงสไตล์ที่คำนวณแล้วและแผนภาพโมเดลกล่องจะแสดงค่าผลลัพธ์สุดท้ายของคุณสมบัติ CSS ทั้งหมดหลังจากแก้ไขตามลำดับการซ้อนแล้ว ใช้สิ่งเหล่านี้เพื่อติดตามการสืบทอด แก้ไขการขยายไวยากรณ์แบบย่อ ตรวจสอบการกำหนดขนาดกล่อง และระบุว่ากฎใดชนะความขัดแย้งด้านความเจาะจงบนองค์ประกอบใด ๆ