Console Utilities API כולל אוסף של פונקציות נוחות לביצוע משימות נפוצות: בחירה ובדיקה של רכיבי DOM, שליחת שאילתות לאובייקטים, הצגת נתונים בפורמט קריא, עצירה והפעלה של Profiler, מעקב אחרי אירועי DOM וקריאות לפונקציות ועוד.
מנסה למצוא את console.log()
, console.error()
ואת שאר הפונקציות של console.*
? מידע נוסף זמין בחומר העזר בנושא API של המסוף.
$_
$_
מחזירה את הערך של הביטוי האחרון שנבדק.
בדוגמה הבאה, הביטוי הפשוט (2 + 2
) מוערך. לאחר מכן מתבצעת הערכה של המאפיין $_
, שמכיל את אותו הערך:
בדוגמה הבאה, הביטוי המוערך מכיל בהתחלה מערך של שמות. אם בודקים את $_.length
כדי למצוא את אורך המערך, הערך שמאוחסן ב-$_
משתנה והופך לביטוי האחרון שנבדק, 4:
0 ש"ח עד 16 ש"ח
הפקודות $0
, $1
, $2
, $3
ו-$4
פועלות כהפניה היסטורית לחמשת רכיבי ה-DOM האחרונים שנבדקו בחלונית רכיבים או בחמשת אובייקטי ה-heap של JavaScript האחרונים שנבחרו בחלונית 'פרופילים'. $0
מחזיר את הרכיב או את אובייקט ה-JavaScript האחרונים שנבחרו, $1
מחזיר את הרכיב השני שנבחר וכן הלאה.
בדוגמה הבאה, נבחר רכיב img
בחלונית Elements. בחלונית ההזזה של המסוף בוצעה הערכה של $0
והוא מציג את אותו הרכיב:
בתמונה שלמטה מוצג רכיב אחר שנבחר באותו הדף. הרכיב $0
מתייחס עכשיו לרכיב שנבחר לאחרונה, ואילו $1
מחזיר את הרכיב הקודם שנבחר:
$(selector [, startNode])
$(selector)
מחזירה את ההפניה לרכיב ה-DOM הראשון עם סלקטור ה-CSS שצוין. כשהיא מופעלת עם ארגומנט אחד, היא היא קיצור דרך של הפונקציה document.querySelector().
הדוגמה הבאה מחזירה הפניה לרכיב <img>
הראשון במסמך:
לוחצים לחיצה ימנית על התוצאה שהוחזרה ובוחרים באפשרות Reveal in Elements Panel כדי למצוא אותה ב-DOM, או Scroll in to View כדי להציג אותה בדף.
בדוגמה הבאה מוצגת הפניה לרכיב הנוכחי שנבחר ומציגה את המאפיין src
שלו:
הפונקציה הזו תומכת גם בפרמטר השני, startNode
, שמציין את 'Element' או 'Node' שמהם ניתן לחפש רכיבים. ערך ברירת המחדל של הפרמטר הזה הוא document
.
הדוגמה הבאה מחזירה הפניה לאלמנט img
הראשון שהוא צאצא של devsite-header-background
, ומוצגת בו המאפיין src
:
$$(selector [, startNode])
הדוגמה הבאה משתמשת ב-$$(הבורר) מחזיר מערך של רכיבים שתואמים לסלקטור הנתון ב-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);
}
$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")
תוצאות במסלול ביצועים > ראשי:
אפשר גם להגדיר יצירת פרופילים מקוננים. לדוגמה, הכתובת הזו תפעל בכל סדר שתרצו:
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);