הפניית API של Console Utilities

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

$_

הפונקציה $_ מחזירה את הערך של הביטוי שהוערך לאחרונה.

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

‫$_ הוא הביטוי האחרון שעבר הערכה.

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

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

‫0$ – 4$

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

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

דוגמה: 0$.

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

דוגמה: 1$.

$(selector [, startNode])

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

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

דוגמה ל-$(&#39;img&#39;).

לוחצים לחיצה ימנית על התוצאה שמוחזרת ובוחרים באפשרות הצגה בחלונית הרכיבים כדי למצוא אותה ב-DOM, או באפשרות גלילה לתצוגה כדי להציג אותה בדף.

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

דוגמה ל-$(&#39;img&#39;).src.

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

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

דוגמה ל-$(&#39;img&#39;, div).src.

‫$$(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);
}


דוגמה לשימוש ב-<!-- notranslate l10n-placeholder: l10n-placeholder3 -->()</code> כדי ליצור מערך של כל <code translate=אלמנטים מסוג<img>
שמופיעים במסמך הנוכחי אחרי הצומת שנבחר:


let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}



דוגמה לשימוש ב-‎ $()‎ כדי לבחור את כל התמונות שמופיעות אחרי רכיב ה-div של הבחירה במסמך ולהציג את המקורות שלהן.





‎$x(path [, startNode])



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



לדוגמה, הפקודה הבאה מחזירה את כל רכיבי <p> בדף:


$x("//p")



דוגמה לשימוש בבורר XPath.



בדוגמה הבאה מוצגים כל רכיבי <p> שמכילים רכיבי <a>:


$x("//p[a]")



דוגמה לשימוש בבורר XPath מורכב יותר.



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



דוגמה לשימוש בבורר XPath עם startNode.



clear()



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


clear();



copy(object)



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


copy($0);



debug(function)



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


debug(getData);



הפסקת פעולה בתוך פונקציה באמצעות debug().



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



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



dir(object)



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



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


document.body;
dir(document.body);



רישום ביומן של document.body עם הפונקציה dir() ובלי הפונקציה הזו.



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



dirxml(object)



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



inspect(object/function)



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



בדוגמה הבאה, הדף document.body נפתח בחלונית Elements:


inspect(document.body);



בדיקת רכיב באמצעות inspect().



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



getEventListeners(object)



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


getEventListeners(document);



הפלט של השימוש ב-getEventListeners().



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



מספר מאזינים.



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



תצוגה מורחבת של אובייקט listener.



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



keys(object)



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



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


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};



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



דוגמה לשימוש בשיטות keys()‎ ו-values()‎.



monitor(function)



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


function sum(x, y) {
  return x + y;
}
monitor(sum);



דוגמה לשיטה monitor().



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



monitorEvents(object [, events])



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



הקוד הבא עוקב אחרי כל האירועים של שינוי הגודל באובייקט של החלון.


monitorEvents(window, "resize");



מעקב אחרי אירועים של שינוי גודל החלון.



הדוגמה הבאה מגדירה מערך למעקב אחרי האירועים resize ו-scroll באובייקט window:


monitorEvents(window, ["resize", &quot;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()
משלים את הפרופיל ומציג את התוצאות בטראק ביצועים > ראשי.





כדי להתחיל ליצור פרופילים:


profile("Profile 1")



כדי להפסיק את יצירת הפרופיל ולראות את התוצאות במסלול ביצועים > ראשי:


profileEnd("Profile 1")



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



פרופיל 1 בטראק הראשי של הביצועים.



אפשר גם להטמיע פרופילים בתוך פרופילים אחרים. לדוגמה, הפעולות הבאות יפעלו בכל סדר:


profile('A');
profile('B');
profileEnd('A&#39;);
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);



דוגמה לשיטה table().



undebug(function)



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


undebug(getData);



unmonitor(function)



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


unmonitor(getData);



unmonitorEvents(object [, events])



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


unmonitorEvents(window);



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


monitorEvents($0, "mouse");
unmonitorEvents($0, &quot;mousemove");



values(object)



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


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);



התוצאה של הערכים(player).