דף זה תורגם על ידי Cloud Translation API.

הפניית API של Console Utilities

קייס בסקית

Twitter GitHub תקלה

סופיה אמליאנובה

GitHub

הממשק Console Utilities API כולל אוסף של פונקציות נוחות לביצוע משימות נפוצות: בחירה ובדיקה של רכיבי DOM, ביצוע שאילתות על אובייקטים, הצגת נתונים בפורמט קריא, עצירה והפעלה של יוצר הפרופילים, מעקב אחר אירועים ב-DOM וקריאות לפונקציות ועוד.

רוצה לחפש את הפונקציות console.log(), console.error() ואת שאר הפונקציות console.*? למידע נוסף, ראו חומר עזר בנושא ממשק ה-API של Console.

$_

$_ מחזירה את הערך של הביטוי האחרון שהוערך.

בדוגמה הבאה מתבצעת הערכה של ביטוי פשוט (2 + 2). לאחר מכן המאפיין $_ מוערך, ומכיל את אותו הערך:

$_ הוא הביטוי שהוערך לאחרונה.

בדוגמה הבאה, הביטוי המוערך מכיל בהתחלה מערך של שמות. כאשר מתבצעת הערכה של $_.length כדי למצוא את אורך המערך, הערך שמאוחסן ב-$_ משתנה לביטוי המוערך האחרון, 4:

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

4 ש"ח עד 16 ש"ח

הפקודות $0, $1, $2, $3 ו-$4 פועלות בתור הפניה היסטורית לחמשת רכיבי ה-DOM האחרונים שנבדקו בחלונית הרכיבים או לחמשת האובייקטים האחרונים של ערימה (heap) של JavaScript שנבחרו בחלונית 'פרופילים'. $0 מחזירה את הרכיב האחרון או אובייקט JavaScript שנבחר לאחרונה, $1 מחזירה את הרכיב השני האחרון שנבחר וכן הלאה.

בדוגמה הבאה, נבחר רכיב img בחלונית רכיבים. בחלונית ההזזה Console, בוצעה הערכה של $0 ומציג את אותו הרכיב:

דוגמה ל-0$.

התמונה הבאה מציגה רכיב אחר שנבחר באותו דף. השדה $0 מפנה עכשיו לרכיב החדש שנבחר, והרכיב $1 מחזיר את הרכיב שנבחר קודם לכן:

דוגמה ל-$1.

$(selector [, startNode])

$(selector) מחזיר את ההפניה לרכיב ה-DOM הראשון עם בורר ה-CSS שצוין. כשהיא נקראת עם ארגומנט אחד, הפונקציה הזו היא קיצור דרך לפונקציה document.querySelector().

הדוגמה הבאה מחזירה הפניה לרכיב <img> הראשון במסמך:

דוגמה של $('img').

לוחצים לחיצה ימנית על התוצאה שהוחזרה ובוחרים באפשרות Reveal in Elements Panel כדי למצוא אותה ב-DOM, או Scroll in to View (גוללים פנימה כדי להציג אותה בדף).

בדוגמה הבאה אפשר לראות הפניה לרכיב שנבחר כרגע ולהציג את המאפיין src:

דוגמה של $('img').src.

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

הדוגמה הבאה מחזירה הפניה לרכיב img הראשון שהוא צאצא של devsite-header-background, ומציגה את המאפיין src שלו:

דוגמה של $('img', div).src.

הערה: אם אתם משתמשים בספרייה כמו jquery שמשתמשת ב-$, הפונקציונליות הזו תוחלף ו-$ יתאים ליישום של הספרייה הזו.

הפונקציה$$(selector [, startNode])

$$(selector) מחזירה מערך של רכיבים שתואמים לסלקטור הנתון ב-CSS. הפקודה הזו זהה להפעלה של Array.from(document.querySelectorAll()).



בדוגמה הבאה השתמשנו ב-$$() 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);
}



הערה: כדי להתחיל שורה חדשה בלי להריץ את הסקריפט, מקישים על Shift + Enter במסוף.

$x(path [, startNode])

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

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



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



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



clear()

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

עותק(אובייקט)

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

ניפוי באגים(function)

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



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

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

dir(object)

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

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



מידע נוסף זמין בערך console.dir() ב-Play Console.

dirxml(object)

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

inspect(object/function)

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

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



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

getEventListeners(object)

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



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



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



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

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

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

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

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



monitor(function)

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



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

monitorEvents(object [, events])

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

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



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

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

סוג האירוע ואירועים ממופים תואמים
עכבר "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "גלגלי עכבר"
key "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() משלים את הפרופיל ומציג את התוצאות במסלול Performance (ביצועים) > Main (ראשי).

הערה: profile() ו-profileEnd() הם הקיצורים של console.profile() ושל console.profileEnd().

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

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

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

 ערוץ ראשי." width="800" height="606">

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

הערה: כמה פרופילים של מעבדים (CPU) יכולים לפעול בו-זמנית, ולא צריך לסגור אותם לפי סדר היצירה.

queryObjects(Constructor)

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


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


ההיקף של queryObjects() הוא הקשר ההפעלה שנבחר במסוף בשלב זה.

טבלה(נתונים [, עמודות])

מתעדים נתוני אובייקטים לפי עיצוב טבלה על ידי העברת אובייקט נתונים עם כותרות עמודות אופציונליות.
זהו קיצור דרך עבור 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) מחזירה מערך שמכיל את הערכים של כל המאפיינים ששייכים לאובייקט שצוין.
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);

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