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

Kayce Basques

תמיכה מרובה-לקוחות בחלונית הביקורת

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

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

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

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

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

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

לאחר מכן מתבצעת בדיקה חוזרת של הדף:

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

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

בעיה ב-Chromium מס' 991906

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

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

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

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

   

   איור 5. תיעוד אירועים של מטפל תשלומים.

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

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

   

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

בעיה מס' 980291 ב-Chromium

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

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

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

בעיה מס' 772558 ב-Chromium

Largest Contentful Paint (LCP) בחלונית הביצועים

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

איור 8. סמן LCP בקטע תזמונים.

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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