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

Kayce Basques

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

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

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

הצבת הסמן מעל ביטוי פעיל כדי להדגיש צומת DOM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

‫Picture-in-Picture הוא API ניסיוני חדש שמאפשר ליצור חלון וידאו צף מעל שולחן העבודה בדף.

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

איור 16. אירועים של תמונה בתוך תמונה בחלונית Event Listener Breakpoints (נקודות עצירה של event listener)

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

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

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

   

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

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

   

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

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

   

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

מפעילים את unmonitorEvents() כדי להפסיק את רישום האירועים ביומן ב-Console.

unmonitorEvents(temp1);

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

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

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

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

הורדת ערוצי התצוגה המקדימה

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

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

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

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

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

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