דף זה תורגם על ידי Cloud Translation API.

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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium מס' 991906

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

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

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

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

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

בעיה מס' 980291 ב-Chromium

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

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

צילום מסך של הביקורת 'שימוש של צד שלישי' בממשק המשתמש של הדוח Lighthouse.

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

בעיה מס' 772558 ב-Chromium

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

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

סמן ה-LCP בקטע 'תזמונים'.

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

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

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

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

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

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

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

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

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

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

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

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

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