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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

   

   איור 6. צפייה באירוע של Payment Handler.

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

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

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

איור 7. הביקורת Third-party usage (שימוש של צד שלישי).

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

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

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