אחת מהדרכים בג׳אווה סקריפט לדעת מה מחזיק משתנה מסויים או מה פונקציה מסויימת מחזירה( או כל סוג של output) היא כתיבה לקונסול באמצעות console.log. בשונה מ- alert היא לא חוסמת את הרנדור של האפליקציה ולא מופיעה כפופאפ בתוך הדף אלא רק בקונסול של הדפדפן(chrome,firefox..). מפתחים רבים נורא אוהבים את השיטה הזו ומשתמשים בה לצורך דיבאג(Debugging) של הקוד שלהם.
ישנם שיטות נוספות לדבג את הקוד שלנו אך בפוסט זה לא נעסוק בהן אלא בצורך "להסתיר" את כל ההדפסות לקונסול בסביבת פרודקשיין
למה נרצה קונסול נקי?
כאשר אנו מדבגים או רוצים לבדוק תשובות מ- API כלשהו , אנו נוטים לרשום מידע רב לקונוסול, כולל נתונים שמוכרחים לא להשאר בקונסול.
אם אתם כמוני אתם תבקרו בקונסול גם באתרים שלא פיתחתם אם זה סתם מסקרנות או לראות משהו מעניין שעשו ב- css/js. לא היינו רוצים שמישהו יכנס לאפליקציה שפיתחנו ויראה מידע שלא היה צריך לראות.
מפתחי ריאקט נייטיב שימו לב – כאשר נריץ גרסת פרודקשיין כל ההדפסות לקונסול(גם כאלה אשר מגיעות מספריות) עלולות לגרום לצוואר בקבוק ב- js thread ובעצם להאט את האפליקציה.(אם יש לכםן סיבות נוספות מוזמנים להשאיר תגובה)
אז איך נשמור על הקונסול נקי? כמובן יש את האופציה לעבור על כל פיצ׳ר שאתם מפתחים ולהסיר בסוף הפיתוח את כל ה- console.log. אבל אם אתם לא רוצים לעשות את זה ידני יש כמה אופציות.
Babel plugin
מעבר למתודת לוג לקונסול יש עוד הרבה אפשרויות שבהן אנו יכולים להשתמש לצורך דיבאג .באמצעות פלאגין של babel נוכל לבטל את כולן. כל מה שנצטרך לעשות הוא להתקין את הפלאגין באמצעות הפקודה
כעת נערוך את הקובץ babelrc.
זהו סיימנו,כעת לאחר build הקונסול שלנו יהיה נקי מכל מה שהדפסנו אליו. יש לשים לב שאם אתם משתמשים ב- CRA אין לכם גישה לקובץ הנל אלא אם כן עשיתם eject לפרוייקט או קינפגתם אותו בעצמכם.
במידה ואין לכם גישה לקובץ זה הייתי מוותר על שימוש בפלאגין זה כי לאחר eject תצטרכו לדאוג לכל הקונפיגורציה בעצמכם מאותו רגע והלאה.
pre-commit hook
במצב זה אנו קצת גולשים ממה שמפתח פרונט עושה ביום יום. אבל הרעיון הוא שברגע שננסה לעשות קומיט לקוד שלנו תרוץ בדיקה בעזרת pre-commit שתבדוק האם יש לנו console.log בקוד.
(אם יש לכם devops .בחברה זה הזמן לפתוח לו task :))
במידה ויש console.log בקוד הקומיט יכשל, במידה והקוד נקי מ- console.log הקומיט יעבור.
הדפסה דרך global עם תנאי
דרך נוספת היא לכתוב פונקציה שבודקת אם אנחנו בסביבת פיתוח ואם כן אז היא תדפיס console.log. לאחר שסיימנו לרשום את הפונקציה נשים את הפונקציה על גבי ה global ואז נוכל לקרוא לה מכל קובץ שנרצה וההדפסה תרוץ רק במצב פיתוח
דריסת פונקציית console.log
דרך נוספת היא בעצם דריסה של פונקציית הלוג לפונקציה ריקה כאשר אנחנו בסביבה שהיא לא סביבת פיתוח.
סיכום
בפוסט זה סקרנו ארבעה דרכים שיאפשרו לנו אי הצגה של כל ההדפסות לקונסול בסביבת פרודקשיין.
- babel plugin
- pre-commit
- הדפסה דרך global עם תנאי
- דריסת פונקציית console.log
אם אהבתם את המאמר אשמח אם תשתפו/תמליצו לאחרים, אם יש לכם שאלות או הערות תוכלו להשאיר אותם בתגובות מתחת.
