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

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

dir(object)

dir(object) מציג רשימה בסגנון אובייקט של כל המאפיינים של האובייקט שצוין. השיטה הזו היא קיצור דרך ל-method‏ 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, לדוגמה). החברים בכל מערך הם אובייקטים שמתארים את ה-listener שרשום לכל סוג. לדוגמה, בקוד הבא מפורטים כל בוררי האירועים הרשומים באובייקט המסמך:
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' באובייקט 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()
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);