מדריך: איך להשתמש ב- console של JavaScript

בדר”כ רוב המתכנתים שעובדים עם javascript נעזרים ב console.log על מנת לדבג את הקוד ולבדוק תוצאות בינתיים של הקוד שרץ, אבל לא כולם מכירים את האפשרויות הנוספות שמביא איתו ה console.

מה זה ה- console 

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

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

console.log

האפשרות הראשונה שאסביר והיותר נפוצה שמשתמשים בה, היא ה- console.log. בעזרתה ניתן להדפיס הודעות ל- console. למשל:

console.log('david'); //david
console.log(2); //2
var hello = 'world';
console.log(hello); //world

כמובן שניתן גם לעשות חישובים ושרשור מחרוזות:

console.log(2+2); //4
console.log(‘hello ’ + ‘world’); //hello world
console.log(‘hello’ + hello); //hello world

או להדפיס תוצאה של פונקציה:

function add(x,y){
    return x+y;
}

console.log(add(1,1)); //2

אבל כדאי לשים לב כאשר רוצים להדפיס אובייקט

var myObject = {name:’david’, age: 33};
console.log(myObject); //{name:’david’, age: 33} - GOOD :-)
console.log(‘watch this ’ + myObject); // watch this: [object Object] – BAD :-(

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

לכן, כאשר נרצה להדפיס אובייקט בשילוב מחרוזת, נוכל להשתמש ב- overload של ה- console.log שמאפשר לנו להדפיס את הטקסט במקדים ואת האובייקט ביחד:

console.log('watch this: ' , myObject); // watch this: {name: "david", age: 33}

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

console.warn

ידפיס הודעה צהובה עם סימן אזהרה

console.warn(‘warning!’);

console.error

ידפיס הודעת שגיאה אדומה עם סימן של איקס

console.error(‘error!’);

console.trace

ידפיס את ה-stack trace, שזה למעשה ההיסטוריה של הפונקציות שנקראו עד שהרצנו את שורת הקוד הזאת.

בדוגמא הבאה הגדרתי שתי פונקציות, test2 שמריצה את הפונקציה test והיא בתורה מדפיסה את ה stack trace. לאחר מכן הרצתי את הפונקציה test2 וכך קיבלתי את ה stack trace הבא שמראה לי בדיוק איך הגעתי לפונקציה test

function test (){
console.trace();
};

function test2 (){
test();
};

test2();

//output:
//test @ VM1868:1
//test2 @ VM1908:1
//(anonymous) @ VM1929:1

console.clear

מנקה את ה console מההודעות שהיו רשומות בו.

console.assert

מאפשר לנו להדפיס הודעת שגיאה רק במידה והפרמטר הראשון שהפונקציה מקבלת הוא false.

אפשר להשתמש בזה על מנת להדפיס שגיאה רק אם קיבלנו תוצאה לא רצויה

console.assert(false, 'something went wrong'); // Assertion failed: something went wrong
console.assert(true, 'something went wrong'); //*nothing*

var result = 2;
console.assert(1+2===result, 'not good result') // Assertion failed: not good result

console.table

מדפיס ל- console בצורה טבלאית וקריאה יותר.

למשל, הדפסה של מערך:

var table = [{name:'david', lastName:'cohen', age: 33},{name:'osher', age: 30}]
console.table(table); 

או הדפסה של אובייקט:

console.table({name:'david', age:33})

console.group

מאפשר הדפסה של מספר הודעות מאוגדות בתוך שורה אחת. כאשר רוצים להתחיל לאחד הודעת מתחילים עם לכתוב console.group ובפרמטר מעבירים את הכותרת של קבוצת ההודעות הבאה, ממשיכים עם console.log כמה שרוצים ולאחר מכן מסיימים עם console.groupEnd.

console.group('title');
console.log('line 1');
console.log('line 2');
console.groupEnd();

ונקבל

ניתן גם לאחד מספר שורות יחד או להשתמש ב console.warn או console.error כמו בדוגמא הבאה:

console.group('title');
console.group('group 1'); 
console.warn('warning'); 
console.error('error');
console.groupEnd(); 
console.group('group 2');
console.log('line 1');
console.log('line 2');
console.groupEnd();
console.groupEnd();

ונקבל:

אפשר גם להחליף את ה- console.group ב- console. groupCollapsed וכך נקבל את הקבוצה של ההודעת במצב התחלתי סגור, שבוא רואים רק את הכותרת ולא את התוכן עד שלוחצים על החץ בצד.

console.count

מאפשר לספור את מספר הפעמים שהרצנו את הפונקציה. ניתן להריץ כמה counters כאלה עם שמות שונים ולאפס את הספירה באמצעות הפקודה console.countReset. 

במידה ולא נעביר שם לפונקצית ה count הערך ברירת המחדל יהיה default

console.count('counter 1'); // counter 1: 1
console.count('counter 1'); // counter 1: 2
console.count('counter 2'); // counter 2: 1
console.count('counter 1'); // counter 1: 4
console.countReset('counter 1');
console.count('counter 1'); // counter 1: 1
console.count(); // default: 1

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

console.time

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

לפונקציה console.time יש מספר פונקציות עזר: console.timeLog שמדפיסה את הזמן הנוכחי בלי לעצור את הריצה, והפונקציה console.timeEnd שמדפיסה את הזמן הנוכחי, עוצרת את ה timer ומוחקת אותו, לאחר מכן ה timer הזה לא יהיה קיים יותר ואם נריץ שוב console.timeEnd נקבל הודעת הזהרה.

console.time();
console.timeLog(); //default: 6947.9970703125ms
console.timeLog(); //default: 10867.780029296875ms
console.timeEnd(); //default: 17221.733154296875ms
console.timeEnd(); // Timer 'default' does not exist