מה חדש בכלי הפיתוח (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.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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