מה חדש בכלי הפיתוח (Chrome 71)

Kayce Basques

התכונות החדשות והשינויים העיקריים שצפויים בקרוב בכלי הפיתוח ל-Chrome ב-Chrome 71 כוללים:

אפשר להמשיך לקרוא או לצפות בגרסה הווידאו של הדף הזה:

כדי להדגיש צומת DOM, מעבירים את העכבר מעל 'ביטוי פעיל'

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

כדי להדגיש את הצומת באזור התצוגה, מעבירים את העכבר מעל תוצאה של ביטוי בזמן אמת.

איור 1. העברת העכבר מעל תוצאה של ביטוי בזמן אמת כדי להדגיש את הצומת בחלון התצוגה

אחסון צומתי DOM כמשתנים גלובליים

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

אחסון כמשתנה גלובלי במסוף.

איור 2. אחסון כמשתנה גלובלי במסוף

לחלופין, לוחצים לחיצה ימנית על הצומת בעץ ה-DOM ובוחרים באפשרות אחסון כמשתנה גלובלי.

אחסון כמשתנה גלובלי בעץ ה-DOM.

איור 3. אחסון כמשתנה גלובלי בעץ ה-DOM

המידע על היוזמים והעדיפות שלהם נמצא עכשיו בייבוא ובייצוא של HAR

אם אתם רוצים לאבחן יומני רשת עם עמיתים, אתם יכולים לייצא את בקשות הרשת לקובץ HAR.

ייצוא בקשות רשת לקובץ HAR.

איור 8. מתבצע ייצוא של בקשות רשת לקובץ HAR

כדי לייבא את הקובץ בחזרה לחלונית Network, פשוט גוררים אותו ומשחררים אותו.

עכשיו, כשמייצאים קובץ HAR, כלי הפיתוח כוללים את הפרטים של המפתחים ונתוני העדיפות בקובץ ה-HAR. כשמייבאים חזרה קבצי HAR ל-DevTools, העמודות Initiator ו-Priority מאוכלסות עכשיו.

השדה _initiator מספק הקשר נוסף לגבי הסיבה לבקשת המשאב. הערך הזה ממופה לעמודה Initiator בטבלה Requests.

העמודה של המארגן.

איור 9. עמודת היוזם

אפשר גם להחזיק את המקש Shift ולהעביר את העכבר מעל לבקשה כדי לראות את תאריך ההתחלה ואת יחסי התלות שלה.

צפייה ביזמים ויחסי תלות.

איור 10. הצגת הגורמים המפעילים ויחסי התלות

השדה _priority מציין את רמת העדיפות שהדפדפן הקצה למשאב. הערך הזה ממופה לעמודה Priority בטבלה Requests (בקשות), שמוסתר כברירת מחדל.

העמודה Priority (עדיפות).

איור 11. העמודה 'עדיפות'

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

איך מציגים את העמודה 'עדיפות'.

איור 12. איך להציג את העמודה עדיפות

גישה לתפריט הפקודות מהתפריט הראשי

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

תפריט הפקודות.

איור 13. תפריט הפקודות

עכשיו אפשר לפתוח את תפריט הפקודות מהתפריט הראשי. לוחצים על הלחצן Main Menu (תפריט ראשי) ראשי ובוחרים באפשרות Run command (הרצת פקודה).

פתיחת תפריט הפקודות מהתפריט הראשי.

איור 14. פתיחת תפריט הפקודות מהתפריט הראשי

נקודות עצירה במצב 'תמונה בתוך תמונה'

תמונה בתוך תמונה הוא API ניסיוני חדש שמאפשר לדף ליצור חלון וידאו צף מעל שולחן העבודה.

מסמנים את התיבות enterpictureinpicture, leavepictureinpicture ו-resize בחלונית 'נקודות עצירה של Event Listener' כדי להשהות את הקוד בכל פעם שמופעל אחד מהאירועים האלה של 'תמונה בתוך תמונה'. כלי הפיתוח מושהה בשורה הראשונה של ה-handler.

אירועי 'תמונה בתוך תמונה' בחלונית Event Listener Breakpoints.

איור 16. אירועי 'תמונה בתוך תמונה' בחלונית 'נקודות עצירה של Event Listener'

(טיפ בונוס) כדאי להריץ MonitoringEvents() במסוף כדי לצפות בהפעלת אירועים של רכיב

נניח שרוצים להוסיף גבול אדום מסביב ללחצן אחרי שמתמקדים בו ולוחצים על R, E, D, אבל לא יודעים לאילו אירועים להוסיף מאזינים. משתמשים ב-monitorEvents() כדי לתעד את כל האירועים של הרכיב במסוף.

  1. מקבלים הפניה לצומת.

    שימוש באפשרות 'אחסון כמשתנה גלובלי' כדי לקבל הפניה לצומת.

    איור 17. שימוש באפשרות אחסון כמשתנה גלובלי כדי לקבל הפניה לצומת

  2. מעבירים את הצומת כארגומנט הראשון ל-monitorEvents().

    העברת הצומת ל-monitorEvents().

    איור 18. העברת הצומת אל monitorEvents()

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

    האירועים של הצומת במסוף.

    איור 19. האירועים של הצומת במסוף

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

unmonitorEvents(temp1);

אם רוצים לעקוב רק אחרי אירועים מסוימים או אחרי סוגים מסוימים של אירועים, מעבירים מערך כארגומנטים השני ל-monitorEvents():

monitorEvents(temp1, ['mouse', 'focus']);

הסוג mouse מורה ל-DevTools לתעד את כל האירועים שקשורים לעכבר, כמו mousedown ו-click. סוגים נוספים שנתמכים הם key, touch ו-control.

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

הורדת הערוצים של התצוגה המקדימה

מומלץ להשתמש ב-Chrome Canary, ב-Dev או ב-Beta כדפדפן הפיתוח שמוגדר כברירת מחדל. ערוצי התצוגה המקדימה האלה מעניקים לכם גישה לתכונות העדכניות ביותר של DevTools, מאפשרים לכם לבדוק ממשקי API מתקדמים לפלטפורמות אינטרנט ולמצוא בעיות באתר לפני שהמשתמשים שלכם יעשו זאת.

יצירת קשר עם צוות כלי הפיתוח ל-Chrome

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

מה חדש בכלי הפיתוח

רשימה של כל מה שדיברנו עליו בסדרה מה חדש בכלי הפיתוח.