מה אפשר לעשות עם js console

בואו נראה מה אפשר לעשות עם console, נכון שכולם משתמשים בעיקר ב-console.log אבל יש עוד שימושים מעניינים שאפשר לעשות איתו.

1. console.log() – באופן פשוט מאוד, מדפיס את מה שיש בסוגריים, יכול לקבל מספר משתנים בסוגריים בהפרדות של פסיקים.
2. console.clear() – מנקה את הקונסול, רצוי לעשות אם הפרוייקט מדפיס לקונסול דברים בדרך והם מפריעים לאתר את ההדפסה שלכם או במידה שיש לולאה שמדפיסה ולא רוצים להעמיס את הקונסול.
3. console.dir() – מקבל בתוך הסוגריים אובייקט, מדפיס אותו כאובייקט שאפשר לפתוח ולראות בצורה היררכית את כל המאפיינים שלו.
4. console.error() – מדפיס כמו log אבל הפלט יוצא בקטגוריה של שגיאה אל הקונסול.
5. console.info() – כמו log אבל הפלט יוצא בקטגוריה של מידע אל הקונסול.
6. console.warn() – כמו log אבל הפלט יוצא בקטגוריה של אזהרה אל הקונסול.
7. console.group() & console.groupCollapsed() – מקבצים בתוכם את כל שאר הכתיבות לקונסול כאשר אחד במצב פתוח והשני במצב סגור ואם רוצים לראות מה כתוב בפנים אז צריך ללחוץ עליו. במידה שכותבים מלל בסוגריים, אז יהיה שם הקבוצה.
8. console.groupEnd() – מסמן את סוף הקבוצה, כל כתיבה לקונסול שתגיע אחרי תרשם לקונסול ולא בתוך הקבוצה.
9. console.table() – מקבל בתוך הסוגריים אובייקט או מערך וממיר אותם לטבלה כאשר אם מדובר על מערך, העמודה הראשונה תהיה index והעמודה השניה תהיה המידע. אם מדובר על אובייקט אז העמודה הראשונה תהיה ה-key שמוצמד לערך והעמודה השניה תהיה הערך.
10. console.trace() – מדפיס את כל הדרך (הפונקציות) שהוא עבר עד שהגיע להדפסה הזו. מאוד טוב בחיפוש של ערך לא תקין באפליקציה מסועפת.

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

עיצוב

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

צורת הכתיבה היא כך:

console.log('%c hi, how are you?','background:#ff0000;color:#00ff00')

כאשר אחוז C מאפשר את האופציה של עיצוב על אותו מלל שמופיע איתו ואת הערכים/העיצוב הוא לוקח מהחלק האחרון שכתבנו.

איך כותבים את זה?

console.clear();

console.log('i am log');

console.log(document.getElementsByTagName('div')[0]);
console.dir(document.getElementsByTagName('div')[0]);

console.error('error');
console.info('info');
console.warn('warn');

console.group('i am group');
console.log('i am log');
console.error('error');
console.info('info');
console.warn('warn');
console.groupEnd();

console.groupCollapsed('collapsed');
console.log('i am log');
console.error('error');
console.info('info');
console.warn('warn');
console.groupEnd();

console.table(['item-1','item-2','item-3']);
console.table({key1:'item-1',key2:'item-2',key3:'item-3'});

function aFunc(){
bFunc();
}
function bFunc(){
cFunc();
}
function cFunc(){
dFunc();
}
function dFunc(){
console.trace();
}
aFunc();

console.log('%c hi, how are you?','background:#ff0000;color:#00ff00');

ממליץ להריץ את השורות ולראות מה התוצאות שיוצאות 🎁

פוסטים קשורים:

מדריך css | מה כבר אפשר לעשות עם box-shadow Map vs. ForEach מדריך javascript למתחיל 101 (שיטת כתיבה) המרה של אקסל למערך וממערך חזרה לאקסל בעזרת JS