כיצד להשתמש ב-Google Chrome לאיתור באגים ב-CSS

הכלי Inspect Element נהדר בכל הנוגע לאיתור באגים בדפי האינטרנט שלך בזמן אמת. אתה יכול להשתמש בכלי זה כדי לעזור בתצוגה מקדימה ולשנות את העיצוב של אתר אינטרנט. זה גם מאפשר לך לעשות זאת ללא צורך לטעון מחדש את הדף, ומציג את השינויים ב-CSS שלך באופן מיידי.

מאמר זה יעבור על איך להציג מחלקות CSS והסגנונות המיושמים שלהן בחלון Inspect Element. זה גם יכסה איך אתה יכול להשתמש בזה כדי להציג תצוגה מקדימה של שינויים שאתה מבצע ב-CSS שלך בזמן אמת.

פתיחת Inspect Element ב-Google Chrome

אתה יכול לבקר בכל אתר אינטרנט ולפתוח את חלון Inspect Element כדי לראות איך נראה קוד ה-HTML או CSS שלו. הדרכה זו תשתמש אתר לדוגמה להדגים.

אתה יכול לפתוח את חלון Inspect Element ב-Google Chrome על ידי לחיצה על F12 מַפְתֵחַ. אתה יכול גם ללחוץ לחיצה ימנית בכל מקום בעמוד וללחוץ על לִבדוֹק.

חלון Inspect Element ייפתח לקוד ה-HTML של החלק באתר שבו לחצת לחיצה ימנית. כאן אתה גם יכול ערוך טקסט באתר באמצעות Google Chrome.

הכרטיסייה סגנונות בחלון Inspect Element

בחלון Inspect Element עצמו, מתחת ל- אלמנטים בכרטיסייה, יש מקום להציג גם את קוד ה-HTML וגם את קוד ה-CSS. אתה יכול לראות את קוד ה-HTML בצד שמאל של חלון Inspect Element. אתה יכול למצוא את קוד ה-CSS מימין, מתחת ל-

סגנונות לשונית.

נניח שהיה לך רכיב HTML עם מחלקה שנקראת "card-padding", עם ריפוד ימין ושמאל שהוחל עליו:

ריפוד כרטיס {
 ריפוד-ימין: 0vh;
 padding-left: 0vh;
}

אם הצגת תצוגה מקדימה של אתר זה בדפדפן, תוכל לבחור את div רכיב עם המחלקה "ריפוד כרטיסים". כל סגנון שיושם על המחלקה "ריפוד כרטיסים" יוצג בצד ימין, מתחת ל- סגנונות לשונית.

כאשר אתה מרחף מעל אלמנט בתצוגת קוד HTML, החלק הזה של דף האינטרנט יודגש בדפדפן האינטרנט. סוג רכיב ה-HTML, יחד עם שמות מחלקות כלשהם, יוצגו גם בתיבת דו-שיח ליד האלמנט.

במקרה זה, תראה את מיכל ה-div עם שמות הכיתות "שורה", "ריפוד כרטיס" ו-"pb-5" מסומנים בעמוד.

כיצד לבצע שינויים ב-CSS בזמן אמת

אתה יכול לשנות את ה-CSS ישירות מהכרטיסייה סגנונות:

1. באמצעות האתר הזה, לחץ לחיצה ימנית על הכותרת הראשונה.
2. בכותרת h4 הספציפית הזו, תראה מחלקה שהוחלה עליה בשם "טקסט-אפור" עם צבע #8a8a8a.
3. שנה את הצבע למשהו אחר במקום, כמו כתום. אתה רוצה לשנות רק את הערך עצמו, ולא את שם הנכס, "צבע".
4. תראה את הכותרת משתנה מאפור כהה לכתום.
5. אם ברצונך להשבית סגנון CSS מסוים, בטל את סימון התיבה משמאל לסגנון.
6. ניתן גם להוסיף סגנונות נוספים לסט המקורי. לחץ ממש מתחת או מימין לנכס כדי להתחיל להוסיף נכס חדש. עליך להשתמש באותו תחביר כפי שאתה משתמש בקובץ CSS רגיל בעת הוספת סגנונות חדשים.
7. אם אתה צופה בתצוגה מקדימה של אתר מקומי, אתה יכול להמשיך לערוך שינויים ב-CSS עד שתתקרב למראה ולתחושה הנדרשים עבור ממשק המשתמש שלך. לאחר מכן, תוכל להעתיק את שינויי ה-CSS שביצעת בחזרה לקוד המקומי שלך.

כיצד לשנות CSS מספריות או מסגרות של צד שלישי

אתה יכול גם לבצע שינויים ברכיבי HTML אם אתה משתמש בספריות או מסגרות של צד שלישי כגון Bootstrap.

1. באמצעות האתר הזה, לחץ לחיצה ימנית על אחד מכפתורי Bootstrap בעמוד.
2. תראה שתי מחלקות מוחלות על הכפתור, "btn" ו-"btn-primary". ל-Bootstrap כבר יש עיצוב משלה בשתי השיעורים הללו. הצבעים המשמשים כצבע הרקע והגבול הם #007bff. שנה את זה למשהו אחר, כמו ויולט.
3. אם אתה צופה בתצוגה מקדימה של אתר מקומי, לאחר מכן תוכל להוסיף את השינויים החדשים שלך בחזרה לקוד המקומי שלך. בהתאם לסדר ה-CSS שלך, ייתכן שיהיה עליך השתמש בבורר CSS ספציפי יותר. לדוגמה, הקדימו של הבורר עם ".btn". זה יעקוף את הסגנון המקורי של Bootstrap.

   .btn.btn-primary {
    צבע רקע: סגול;
    צבע גבול: סגול;
   }

מה המשמעות של element.style בכרטיסייה סגנונות?

לכל רכיב HTML שאתה מדגיש בחלון Inspect Element יש בלוק element.styles. זה שווה ערך להוספת סגנון מוטבע לרכיב ה-HTML, במקום למקד אותו באמצעות בורר.

1. לחץ לחיצה ימנית על אלמנט HTML. הוסף סגנון כלשהו למקטע element.style, כגון:

   צבע: עשן לבן;

2. תראה שגם הקוד של רכיב ה-HTML השתנה. לקוד בתוך אלמנט ה-HTML יש כעת את השורה החדשה:

   סגנון="צבע: עשן לבן;"

כיצד אלמנטי HTML של ילדים יורשים עיצוב

אם יש לך שני ערכי סגנון שונים שהוחלו על רכיב אב ורכיב צאצא, הערך ברכיב הצאצא יקבל עדיפות.

1. באמצעות האתר הזה, לחץ לחיצה ימנית בכל מקום בקצוות החיצוניים של האתר.
2. בקטע HTML של חלון Inspect Element, התמקד בשני רכיבי HTML מסוימים. יש אלמנט אב עם מחלקה "תוכן" שהוחלה עליו. לרכיב HTML זה יש רכיב צאצא h4, עם מחלקה "טקסט-אפור" שהוחלה עליו.
3. בחר את רכיב ה-HTML הילד h4, והשבת את סגנון הצבע בכיתה "טקסט-אפור".
4. בחר את רכיב HTML האב עם המחלקה "תוכן". הוסף את סגנון ה-CSS הבא לכיתה:

   צבע אדום;

   כל הטקסט בתוך div האב יהפוך לאדום. השינוי הזה ידלג גם לרכיבי הילד, כלומר ל-h4 יהיה גם צבע אדום.
5. בחר את רכיב HTML h4 הילד, והוסף סגנון חדש למחלקה "טקסט-אפור":

   צבע ירוק;

   זה יעקוף את הסגנון של כל כיתות הורים. אלמנט h4 HTML יהפוך מאדום לירוק.
6. תראה גם מחיקה אם תראה את הסטיילינג לשיעור "תוכן". זה מאשר שרכיב הצאצא h4 עוקף את צבע ההורה.

היתרונות של איתור באגים ב-CSS שלך בדפדפן

איתור באגים ב-CSS בדפדפן שלך יכול לחסוך זמן רב ולהאיץ את זרימת העבודה בקידוד שלך. זה נכון במיוחד אם אתה צריך לראות כיצד שינויים ב-CSS החדשים שלך משפיעים על ממשק המשתמש באתר שלך בזמן אמת.

אתה יכול להשתמש בטכניקה זו במקום לבצע שינויים בקוד המקומי שלך ולטעון מחדש את האפליקציה שלך. זה יחסוך ממך לנחש אילו ערכי CSS יעבדו, מכיוון שאתה יכול כעת לראות את השינויים בממשק המשתמש שלך בזמן שאתה מבצע אותם.

אתה יכול לבצע שינויים בחלון Inspect Element עד שתתקרב לעיצוב הרצוי. ברגע שיש לך, תוכל להעתיק את הקוד מחלון Inspect Element, בחזרה לקוד המקומי שלך. אתה עדיין יכול להפעיל מחדש את האפליקציה שלך כדי לבדוק ששינויי ה-CSS החדשים שלך עדיין עובדים.

מדריך זה כיסה את היסודות של איך לנפות באגים ב-CSS של אתר אינטרנט באמצעות חלון Inspect Element, כולל היכן למצוא את ה-CSS בלשונית סגנונות.

זה גם סיקר כיצד לבצע שינויים ב-CSS ולהציג את השינויים החזותיים בממשק המשתמש בזמן אמת. בתקווה, אתה גם מבין כיצד לבצע שינויים כאשר ה-CSS משתמש בספריית צד שלישי, וכיצד תורשת סטיילינג עובדת.

יש עוד הרבה דברים מעניינים שאתה יכול לעשות עם חלון Inspect Element.

7 דברים שובבים שאתה יכול לעשות עם Inspect Element

קרא הבא

על הסופר