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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

1. עוברים לחלונית Application.
2. פותחים את החלונית Payment Handler.

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

   

   איור 5. הקלטת אירועים של טיפול בתשלומים.

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

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

   

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

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

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

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

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

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

Largest Contentful Paint בחלונית 'ביצועים'

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

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

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

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

2. מעבירים את העכבר מעל Related Node (צומת קשור) בכרטיסייה Summary (סיכום) כדי להדגיש את הצומת בחלון התצוגה.

   

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

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

דיווח על בעיות ב-DevTools מהתפריט הראשי

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

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

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

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

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

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

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

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

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

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