בדר"כ רוב המתכנתים שעובדים עם 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