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

Kayce Basques

תמיכה במספר לקוחות בחלונית 'ביקורות'

מעכשיו אפשר להשתמש בחלונית Audits בשילוב עם תכונות אחרות של DevTools, כמו Request Blocking ו-Local Overrides.

לדוגמה, נניח שבדוח של החלונית Audits מצוין שציון הביצועים של הדף הוא 70, ואחת ההזדמנויות הגדולות ביותר לשיפור הביצועים היא הסרת משאבים שחוסמים את העיבוד.

Figure 1. הציון הראשוני של הביצועים.

איור 2. בדוח הראשוני מצוין ש-3 סקריפטים שחוסמים את העיבוד הם בעיה.

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

איור 3. משתמשים בכרטיסייה Request Blocking (חסימת בקשות) כדי לחסום את הסקריפטים הבעייתיים.

ואז בודקים שוב את הדף:

איור 4. ציון הביצועים השתפר ל-97 אחרי חסימת הסקריפטים הבעייתיים.

אפשר גם להשתמש בשינויים מקומיים כדי להוסיף מאפייני async לכל אחד מתגי ה-script, אבל "נשאיר את זה כתרגיל לקורא". בציוץ הזה יש סרטון הדגמה.

בעיה מספר 991906 ב-Chromium

ניפוי באגים ברכיב handler של תשלומים

בקטע Background Services בחלונית Application יש עכשיו תמיכה באירועים של Payment Handler.

1. עוברים לחלונית Application (אפליקציה).
2. פותחים את החלונית Payment Handler (טופס פרטי התשלום).

3. לוחצים על הקלטה. כלי הפיתוח מקליטים אירועים של Payment Handler במשך 3 ימים, גם כשהם סגורים.

   

   איור 5. תיעוד אירועים של Payment Handler.

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

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

   

   איור 6. צפייה באירוע של אמצעי תשלום.

בעיה מספר 980291 ב-Chromium

‫Lighthouse 5.2 בחלונית 'ביקורות'

החלונית Audits מריצה עכשיו את Lighthouse 5.2. בדיקת האבחון החדשה Third-Party Usage (שימוש בצד שלישי) מראה כמה קוד של צד שלישי נדרש וכמה זמן הקוד הזה חסם את ה-thread הראשי בזמן שהדף נטען. במאמר אופטימיזציה של משאבי צד שלישי מוסבר איך קוד של צד שלישי יכול לפגוע בביצועי הטעינה.

איור 7. הביקורת שימוש של צד שלישי.

בעיה מספר 772558 ב-Chromium

המדד Largest Contentful Paint (המהירות שבה נטען רכיב התוכן הכי גדול) בחלונית Performance (ביצועים)

כשמנתחים את ביצועי הטעינה בחלונית Performance, הקטע Timings כולל עכשיו סמן ל-Largest Contentful Paint (LCP). מדד LCP מדווח על זמן העיבוד של רכיב התוכן הגדול ביותר שמוצג באזור התצוגה.

איור 8. הסמן LCP בקטע Timings.

כדי להדגיש את צומת ה-DOM שמשויך ל-LCP:

1. לוחצים על הסמן LCP בקטע Timings (תזמונים).

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

   

   איור 9. בקטע צומת קשור שבכרטיסייה סיכום.

3. לוחצים על צומת קשור כדי לבחור אותו בעץ ה-DOM.

דיווח על בעיות בכלי הפיתוח דרך התפריט הראשי

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

עזרה > דיווח על בעיה בכלי פיתוח". width="800" height="604">

איור 10. תפריט ראשי > עזרה > דיווח על בעיה בכלי פיתוח.

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

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

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

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

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

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

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