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

Kayce Basques

תכונות חדשות ושינויים משמעותיים שייכנסו ל-Chrome DevTools בגרסה 71 של Chrome כוללים:

• העברת העכבר מעל ביטוי פעיל כדי להדגיש צומת DOM
• אחסון צומתי DOM כמשתנים גלובליים
• פרטי הגורם שהפעיל את הבקשה והעדיפות שלה מופיעים עכשיו בייבוא ובייצוא של קובצי HAR
• כניסה לתפריט הפקודות מהתפריט הראשי
• נקודות עצירה ב'תמונה בתוך תמונה'
• (טיפ בונוס) מריצים את הפונקציה monitorEvents() במסוף כדי לצפות בהפעלה של אירועים של רכיב

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

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

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

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

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

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

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

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

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

מידע על מבצע הבקשה ועל רמת העדיפות מופיע עכשיו בייבוא ובייצוא של קובצי HAR

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

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

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

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

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

איור 9. העמודה 'מאתחל'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

2. מעבירים את הצומת כארגומנט הראשון ל-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

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

• אתם יכולים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• מדווחים על בעיה בכלי הפיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי הפיתוח ב-DevTools.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להשאיר תגובות בסרטונים של מה חדש בכלי הפיתוח ב-YouTube או בסרטונים של טיפים לכלי הפיתוח ב-YouTube.

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.