הפניית API של Console Utilities

בדוגמה הבאה נעשה שימוש ב-$$() to create an array of all <img> elements in the current document and displays the value of each element's src property:

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) כדי להפסיק את העצירה בפונקציה, או משתמשים בממשק המשתמש כדי להשבית את כל נקודות העצירה.

מידע נוסף על נקודות עצירה זמין במאמר השהיית הקוד באמצעות נקודות עצירה.

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 לאובייקטים ב-heap של JavaScript.

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



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

getEventListeners(object)

הפונקציה getEventListeners(object) מחזירה את פונקציות ה-event listener שרשומים באובייקט שצוין. הערך המוחזר הוא אובייקט שמכיל מערך לכל סוג אירוע רשום (click או keydown, לדוגמה). המשתתפים בכל מערך הם אובייקטים שמתארים את המאזין הרשום לכל סוג. לדוגמה, בקוד הבא מפורטים כל בוררי האירועים הרשומים באובייקט המסמך:
getEventListeners(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' באובייקט החלון:
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()
completes the profile and displays the results in the Performance > Main track.



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

כדי להפסיק את יצירת הפרופיל ולראות את התוצאות בעמודה ביצועים > ראשי:
profileEnd("Profile 1")

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



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



queryObjects(Constructor)

קוראים ל-queryObjects(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);



undebug(function)

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

unmonitor(function)

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

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) מפסיק את המעקב אחר האירועים של האובייקט והאירועים שצוינו. לדוגמה, הקוד הבא מפסיק את כל מעקב האירועים באובייקט החלון:
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);