הפניית API של Console Utilities

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}

רכיבי <img> שמופיעים במסמך הנוכחי אחרי הצומת שנבחר:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}





$x(path [, startNode])‎

‫$x(path) מחזירה מערך של רכיבי DOM שתואמים לביטוי ה-XPath הנתון.

לדוגמה, הפקודה הבאה מחזירה את כל רכיבי ה-<p> בדף:
$x("//p")



בדוגמה הבאה מוחזרים כל הרכיבים מסוג <p> שמכילים רכיבים מסוג <a>:
$x("//p[a]")



בדומה לפונקציות אחרות של בחירה, לפונקציה $x(path) יש פרמטר שני אופציונלי, startNode, שמציין אלמנט או צומת שממנו יתבצע החיפוש של אלמנטים.



clear()‎

‫clear() מנקה את ההיסטוריה של המסוף.
clear();

copy(object)

‫copy(object) מעתיקה ללוח את הייצוג של האובייקט שצוין כמחרוזת.
copy($0);

debug(function)‎

כשמפעילים את הפונקציה שצוינה, מאתחלים את מאתר הבאגים ומפסיקים את הפעולה בתוך הפונקציה בחלונית Sources. כך אפשר לעבור שלב אחר שלב בקוד ולבצע בו ניפוי באגים.
debug(getData);



אפשר להשתמש ב-undebug(fn) כדי להפסיק את העצירה בפונקציה, או להשתמש בממשק המשתמש כדי להשבית את כל נקודות העצירה.

מידע נוסף על נקודות עצירה זמין במאמר Pause Your Code With Breakpoints (השהיית הקוד באמצעות נקודות עצירה).

dir(object)

הפונקציה dir(object) מציגה רשימה בסגנון אובייקט של כל המאפיינים של האובייקט שצוין. השיטה הזו היא קיצור דרך לשיטה console.dir() של Console API.

בדוגמה הבאה מוצג ההבדל בין הערכת document.body ישירות בשורת הפקודה לבין שימוש ב-dir() כדי להציג את אותו רכיב:
document.body;
dir(document.body);



מידע נוסף זמין ברשומה console.dir() ב-Console API.

dirxml(object)‎

‫dirxml(object) מדפיס ייצוג XML של האובייקט שצוין, כפי שמופיע בחלונית Elements.
השיטה הזו זהה לשיטה console.dirxml().

inspect(object/function)

‫inspect(object/function) פותח את הרכיב או האובייקט שצוינו ובוחר אותם בחלונית המתאימה: בחלונית Elements לרכיבי DOM או בחלונית Profiles לאובייקטים של ערימת JavaScript.

בדוגמה הבאה, התג document.body נפתח בחלונית Elements:
inspect(document.body);



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

getEventListeners(object)

הפונקציה getEventListeners(object) מחזירה את רכיבי ה-event listener שרשומים באובייקט שצוין. הערך המוחזר הוא אובייקט שמכיל מערך לכל סוג אירוע רשום (לדוגמה, click או keydown). האיברים בכל מערך הם אובייקטים שמתארים את מאזין האירועים שנרשם לכל סוג. לדוגמה, הפקודה הבאה מציגה רשימה של כל רכיבי event listener שרשומים באובייקט document:
getEventListeners(document);



אם יותר ממאזין אחד רשום לאובייקט שצוין, המערך מכיל איבר לכל מאזין. בדוגמה הבאה, יש שני רכיבי event listener שרשומים באלמנט document לאירוע click:



אפשר להרחיב כל אחד מהאובייקטים האלה כדי לבדוק את המאפיינים שלהם:



מידע נוסף זמין במאמר בנושא בדיקת מאפייני אובייקטים.

keys(object)

‫keys(object) מחזירה מערך שמכיל את שמות הנכסים ששייכים לאובייקט שצוין. כדי לקבל את הערכים המשויכים של אותם מאפיינים, משתמשים בפונקציה values().

לדוגמה, נניח שהאפליקציה שלכם הגדירה את האובייקט הבא:
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

בהנחה ש-player הוגדר במרחב השמות הגלובלי (לצורך פשטות), הקלדה של keys(player) ו-values(player) במסוף תניב את התוצאה הבאה:



monitor(function)

כשקוראים לפונקציה שצוינה, הודעה נרשמת ביומן במסוף ומציינת את שם הפונקציה ואת הארגומנטים שמועברים לפונקציה כשהיא נקראת.
function sum(x, y) {
  return x + y;
}
monitor(sum);



כדי להפסיק את המעקב, משתמשים ב-unmonitor(function).

monitorEvents(object [, events])

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

הקוד הבא עוקב אחרי כל אירועי שינוי הגודל באובייקט החלון.
monitorEvents(window, "resize");



הקוד הבא מגדיר מערך למעקב אחרי אירועי resize ו-scroll באובייקט window:
monitorEvents(window, ["resize", "scroll"])

אפשר גם לציין אחד מ'הסוגים' הזמינים של אירועים, מחרוזות שממופות לקבוצות מוגדרות מראש של אירועים. בטבלה הבאה מפורטים סוגי האירועים הזמינים ומיפויי האירועים שמשויכים אליהם:

סוג האירוע והאירועים הממופים התואמים
עכבר
‫"mousedown",‏ "mouseup",‏ "click",‏ "dblclick",‏ "mousemove",‏ "mouseover",‏ "mouseout",‏ "mousewheel"
מקש
"keydown", "keyup", "keypress", "textInput"
מגע
‫'touchstart',‏ 'touchmove',‏ 'touchend',‏ 'touchcancel'
עוצמת הקול
‫"resize",‏ "scroll",‏ "zoom",‏ "focus",‏ "blur",‏ "select",‏ "change",‏ "submit",‏ "reset"

לדוגמה, הקוד הבא משתמש בסוג האירוע "key" כדי להפעיל את כל האירועים המרכזיים המתאימים בשדה טקסט קלט שנבחר כרגע בחלונית Elements.
monitorEvents($0, "key");

הנה דוגמה לפלט אחרי הקלדת תווים בשדה הטקסט:



כדי להפסיק את המעקב, משתמשים ב-unmonitorEvents(object[, events]).

‫profile([name]) ו-profileEnd([name])

הפונקציה profile() מתחילה סשן פרופיילינג של המעבד (CPU) ב-JavaScript עם שם אופציונלי. profileEnd()
משלים את הפרופיל, פותח אוטומטית את החלונית ביצועים ומציג את התוצאות בטראק הראשי.



כדי להתחיל את יצירת הפרופיל:
profile("Profile 1")

כדי להפסיק את יצירת הפרופיל ולראות את התוצאות בטראק Performance > Main:
profileEnd("Profile 1")

התוצאה בטראק ביצועים > ראשי:



אפשר גם להטמיע פרופילים בתוך פרופילים אחרים. לדוגמה, אפשר להשתמש בכל אחד מהסדרים הבאים:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');



queryObjects(Constructor)

קוראים ל-queryObjects(Constructor) מהמסוף כדי להחזיר מערך של אובייקטים שנוצרו באמצעות ה-constructor שצוין. לדוגמה:


‫queryObjects(Promise). הפונקציה מחזירה את כל המופעים של Promise.
queryObjects(HTMLElement). הפונקציה מחזירה את כל רכיבי ה-HTML.
‫queryObjects(foo), כאשר foo הוא שם הכיתה. מחזירה את כל האובייקטים שנוצרו באמצעות new foo().


ההיקף של queryObjects() הוא הקשר ההרצה שנבחר כרגע במסוף.

table(data [, columns])

כדי לתעד נתוני אובייקטים בפורמט של טבלה, מעבירים אובייקט נתונים עם כותרות עמודות אופציונליות.
זהו קיצור דרך אל console.table().

לדוגמה, כדי להציג רשימה של שמות באמצעות טבלה במסוף, מבצעים את הפעולות הבאות:
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



כדי להעתיק טבלה מתועדת ללוח כטבלת Markdown בפורמט או כנתוני CSV, לוחצים לחיצה ימנית על הטבלה במסוף ובוחרים באפשרות ההעתקה המתאימה מתפריט ההקשר.

undebug(function)‎

הפונקציה undebug(function) מפסיקה את ניפוי הבאגים של הפונקציה שצוינה, כך שכאשר הפונקציה נקראת, מנפה הבאגים לא מופעל יותר. המאפיין הזה משמש בשילוב עם debug(fn).
undebug(getData);

unmonitor(function)‎

‫unmonitor(function) מפסיק את המעקב אחרי הפונקציה שצוינה. משתמשים בה בשילוב עם monitor(fn).
unmonitor(getData);

unmonitorEvents(object [, events])

הפונקציה unmonitorEvents(object[, events]) מפסיקה את המעקב אחרי אירועים של האובייקט והאירועים שצוינו. לדוגמה, הפקודה הבאה מפסיקה את כל המעקב אחרי אירועים באובייקט window:
unmonitorEvents(window);

אפשר גם להפסיק באופן סלקטיבי את המעקב אחרי אירועים ספציפיים באובייקט. לדוגמה, הקוד הבא מתחיל לעקוב אחרי כל אירועי העכבר ברכיב שנבחר כרגע, ואז מפסיק לעקוב אחרי אירועי mousemove (אולי כדי לצמצם את הרעש בפלט של המסוף):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

values(object)‎

‫values(object) מחזירה מערך שמכיל את הערכים של כל המאפיינים ששייכים לאובייקט שצוין.
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);