המדריך הזה מתבסס על ההנחה שאתם מכירים את בדיקת 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> בהתאם לירושת ברירת המחדל שלהם:
- עוברות בירושה כברירת מחדל הן בטקסט רגיל.
- מודעות שלא עוברות בירושה כברירת מחדל מופיעות בטקסט בהיר.
קיצור דרך
מאפייני קיצור דרך (תמציתי) מאפשרים להגדיר כמה מאפייני CSS בו-זמנית, והם יכולים להפוך את גיליון הסגנונות לקריא יותר. עם זאת, בגלל האופי הקצר של נכסים כאלה, יכול להיות שתפספסו מאפיין ארוך (מדויק) שיעקוף מאפיין שמשתמע מקיצורים.
בחלונית סגנונות מוצגים מאפייני קיצורים כרשימות נפתחות של 
שמכילות את כל המאפיינים המקוצרים.
בדוגמה הזו, שניים מתוך ארבעה נכסים מקוצרים מבוטל��ם בפועל.
לא ניתנת לעריכה
בחלונית סגנונות מוצגים מאפיינים שלא ניתן לערוך בטקסט נטוי. לדוגמה, לא ניתן לערוך את שירות ה-CSS מהמקורות הבאים:
user agent stylesheet- ברירת המחדל של גיליון הסגנונות של Chrome.
מאפייני HTML הקשורים לסגנון ברכיב, לדוגמה, גובה, רוחב, צבע וכו'. תוכלו לערוך אותם בעץ ה-DOM וכך לעדכן את ה-CSS בחלונית סגנונות, אבל לא להיפך.
בדוגמה הזו, המאפיין
height="48"ברכיב<svg>מוגדר ל-50. הפעולה הזו תעדכן את המאפיין התואם בקטעsvg[Attributes Style]בחלונית סגנונות.
בדיקת רכיב שעדיין לא מעוצב בסגנון שאתם חושבים עליו
כדי לנסות לאתר מה משתבש, כדאי לבדוק:
- מסמכי תיעוד של CSS וספציפיות של הבורר בהסברים הקצרים בחלונית סגנונות.
- בחלונית Computed אפשר לראות את ה-CSS הסופי שהוחל על רכיב מסוים ולהשוות לזה שעליו הצהרת.
בחלונית רכיבים > סגנונות מוצגת הקבוצה המדויקת של כללי CSS כפי שהם כתובים בגיליונות אלקטרוניים שונים. לעומת זאת, בחלונית Elements > Computed מוצגים ערכי CSS מזוהים שבהם Chrome משתמש כדי לעבד רכיב:
- שירות CSS שנגזר מירושה
- הזוכים בCascade
- מאפייני לונג'נד (מדויק), לא מקוצר (תמציתי)
- ערכים מחושבים, למשל
font-size: 14pxבמקוםfont-size: 70%
הסבר על CSS בחלונית Computed
בחלונית Computed מוצגים גם נכסים שונים בצורה שונה.
הוצהר ועברו בירושה
בחלונית Computed מפורטים המאפיינים שהוצהרו בכל גיליון סגנונות בגופן רגיל, גם של הרכיב וגם של הרכיב שעברו בירושה. צריך ללחוץ על סמל ההרחבה 
שליד השם כדי לראות את המקור שלו.
כדי לראות את ההצהרה בחלונית סגנונות, מעבירים את העכבר מעל הנכס המורחב ולוחצים על לחצן החץ 
.
כדי לראות את ההצהרה בחלונית Sources, לוחצים על הקישור לקובץ המקור.
בנכסים עם מספר מקורות, בחלונית Computed מוצג קודם הזוכה ב-Cascade.
משך
בחלונית Computed מפורטים ערכי המאפיינים המחושבים בזמן הריצה ב-טקסט בהיר.
בדוגמה הזו, Chrome חישב את הנתונים הבאים עבור הרכיב <ul>:
width, קרוב משפחה, ההורה שלו,<div>heightביחס הצאצאים שלו, שני הרכיבים של<li>
לא עוברות בירושה ובהתאמה אישית
כדי שהחלונית Computed תציג את כל הנכסים והערכים שלהם, מסמנים את האפשרות 
Show all. כל הנכסים כוללים:
- ערכים ראשוניים של נכסים שלא עוברים בירושה בטקסט בהיר.
- מאפיינים מותאמים אישית – עם קידומת
--בטקסט רגיל. נכסים כאלה עוברים בירושה כברירת מחדל.
כדי לחלק את הרשימה הגדולה הזו לקטגוריות, מסמנים את הקבוצה 
.
בדוגמה הזו מוצגים הערכים הראשוניים של נכסים שלא עוברים בירושה בקטע אנימציה, ומאפיינים מותאמים אישית בקטע משתני CSS.
חיפוש כפילויות
כדי לחקור נכס ספציפי ואת הכפילויות הפוטנציאליות שלו, מקלידים את שם המאפיין בתיבת הטקסט Filter. אפשר לעשות את זה גם בחלוניות Styles ו-Computed.
למידע נוסף, ראו חיפוש וסינון ב-CSS של רכיב.
חיפוש שירות CSS שאינו בשימוש
מידע נוסף מופיע בקטע כיסוי: איתור JavaScript ו-CSS שלא נמצאים בשימוש.