הפניית 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);
}

l10n-placeholder3() כדי ליצור מערך של כל רכיבי <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, שמציין רכיב או צומת שמהם יש לחפש רכיבים.



clean()

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

Copy(object)

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

debug(function)

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



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

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

dir(object)

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

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



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

dirxml(object)

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

inspect(object/function)

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

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



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

getEventListeners(object)

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



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



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



למידע נוסף, ראו בדיקת מאפייני אובייקטים.

מפתחות(אובייקט)

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])

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

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



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

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

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

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

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



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

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

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



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

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

תוצאות במסלול ביצועים > ראשי:

 Main Track."width="800" גובה="606">

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



undebug(function)

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

unMonitor(פונקציה)

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

unmonitorEvents(object [, events])

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

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

ערכים(אובייקט)

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

values(player);