אחד הדברים החשובים כשמפתחים ממשק משתמש / אתר אינטרנט וכו' זה לאתר תקלות. תמיד כשמפתחים תוכנה צצות תקלות, באגים בתכנית. בפוסט הזה נלמד לאתר תקלות (debugging) בתכנית, כך שנוכל למצוא פתרון בקלות.

הפוסט הזה מיועד למפתחי פרונט אנד / ממשק משתמש.

החברה הכי טובה של כל מפתח אינטרנט היא הקונסולה, או בשמה הרשמי: Chrome DevTools.

אתם מפתחים אתר / אפליקציה ולא מבינים למה משתנה מסויים לא מציג את הערך הנכון. או למה משתנה מסויים לא מוצג על המסך וכו'. מה תעשו?

הפתרון הפשוט ביותר שכל מפתח מתחיל מכיר (ואם לא – אז כדאי מאוד שיכיר..) זו הפקודה console.log. הפקודה cosole.log פשוט כותבת את מה שאנחנו מבקשים בקונסולת המפתחים. בדרך כלל אנחנו נדפיס לקונסולה משתנים שלא מתנהגים כמו שאנחנו מצפים, כך שבזמן ריצת התוכנית נוכל לראות איזה ערך הם מקבלים ונוכל להבין מה הבעיה.

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

זה יפתח את הקונסולה.

הקונסולה מחולקת לטאבים:

Elements, Console, Sources, Network, Performance, Memory, Application, Security, Lighthouse

אם התקנו פלאגינים נוספים הם יקבלו גם טאב משלהם. למשל, פלאגין פופולארי הוא Redux במידה ומשתמשים ב – state management.

לחיצה על הטאב Console ונראה את הקונסולה. לשם מודפסות כל פקודות ה – console.log. בדרך כלל אם תפתחו את הקונסולה מתוך כל מיני אתרים שונים תראו הרבה דברים. כיוון שכל מיני פלאגינים וספריות מדפיסים הודעות שגיאה, וכו' לקונסולה. שם גם תראו את ההודעות שאתם כתבתם. אגב, מומלץ למעט את השימוש ב – console.log, כשבדרך כלל ב – production נמנע בכלל מלשים console.log, ואם היו לנו תוך כדי הפיתוח, נמחק אותם לפני ה – production.

עכשיו בואו נעבור טאב טאב ונבין מה כל טאב עושה ואיך הוא עוזר לנו:

Elements:

הטאב elements כשמו כן הוא – מראה לנו את כל האלמנטים של דף ה – html. כלומר, את כל תגיות ה – html שמרכיבות את הדף. כך שאם הדף לא נראה טוב, האלמנטים לא מסתדרים נכון, div אחד עולה על השני או לא מתיישר ליד, כותרת לא ממוקמת נכון, וכו' – קליק ימני על האלמנט בדף שאותו אנחנו רוצים לבחון, לחיצה על Inspect בתפריט שנפתח ונגיע לקונסולה. בדרך כלל הטאב הראשון יהיה Elements.

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

בצד ימין של הטאב Element נוכל לראות את ערכי גליון העיצוב (css) של כל אלמנט, תחת Styles. ככה אפשר לתחקר בקלות כל אלמנט בדף לרמת הפיקסל.

אופציה מאוד שימושית בקונסולה היא לשנות את מראה הדף מתוך הקונסולה.

נניח שאחנו צריכים ליישר איזה div, או לשחק עם הגודל של טקסט/כותרת וכו', אפשרות אחת היא כל פעם לשנות את הקוד, לשמור את השינויים, לרפרש את הדף ולראות את השינויים. מאוד לא יעיל ונוח – נכון? כי למשל באפליקציות מורכבות צריך לבנות את הכל מחדש, להריץ, וכו'. ממש לא יעיל ומבזבז זמן פיתוח יקר. במקום, אנחנו יכולים פשוט לשנות ערכים מהקונסולה ולראות מייד איך הדף יראה לאחר השינוי. כמובן שלאחר שנגיע לתוצאה הרצויה נשנה בהתאם את הקוד, הרי הקונסולה לא משפיעה על הקוד. אבל זו דרך מהירה ונוחה לאתר תקלות מהר ולתקן.

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

לא רק את העיצוב ניתן לשנות, אלא אפילו להוריד ולהוסיף אלמנטים של html.

איך בפועל עושים את זה?

נורא פשוט: דאבל קליק על האלמנט , או על מאפיין העיצוב תחת Styles, והאלמנט / מאפיין העיצוב אותו אנחנו רוצים לשנות יודגש בכחול בהיר. עכשיו אפשר להקליד מה שרוצים ולראות את התוצאה. נזכיר שוב: זה לא משנה את הקוד, ברגע שנרענן את הדף (Refresh) השינויים יעלמו. לכן, כשנמצא את הערך הנכון, נשנה את הקוד בהתאם. הקונסולה רק עוזרת לנו לחקור את הדף ואת האלמנטים השונים, ולמצוא את הערך הנכון שאנחנו צריכים.

Console:

Sources:

Network: