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

Sofia Emelianova
Sofia Emelianova
GitHub

תובנות מסוף של Gemini יושקו ברוב מדינות אירופה

הגרסה הזו תומכת בתובנות של המסוף של Gemini ברוב המדינות באירופה.

רשימת המדינות החדשות באירופה שבהן יש תמיכה

אוסטריה, בלגיה, בולגריה, שווייץ, קפריסין, צ'כיה, גרמניה, דנמרק, אסטוניה, ספרד, פינלנד, צרפת, בריטניה, יוון, קרואטיה, הונגריה, אירלנד, איסלנד, איטליה, ליכטנשטיין, ליטא, לוקסמבורג, לטביה, מלטה, הולנד, נורווגיה, פולין, פורטוגל, רומניה, סלובניה.

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

תובנה מ-Gemini לגבי שגיאה במסוף.

עדכונים בחלונית הביצועים

בעדכון הזה בוצעו כמה שיפורים בחלונית ביצועים.

טראק של Enhanced Network

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

הטראק Network מבצע עכשיו את הפעולות הבאות:

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

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

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

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

התאמה אישית של נתוני הביצועים באמצעות API להרחבה

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

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

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

בקיצור, כדי להרחיב את נתוני הביצועים, מעבירים מבנה ספציפי לפרמטרים measureOption.detail או markOption.detail של קריאות ה-API performance.measure() או performance.mark().

פרטים בטראק 'זמנים'

אם אתם מפתחי אתרים שמשתמשים בחלק 'תזמון משתמש' ב-Performance API כדי להוסיף רשומות לטראק Timings, עכשיו תוכלו לראות את הפרטים השרירותיים שלכם בכרטיסייה Summary עבור האירועים mark ו-measure וחותמות הזמן שלהם.

אירוע בהתאמה אישית במסלול 'תזמונים' עם חותמת זמן ופרטים.

בעיה ב-Chromium: 345418915.

העתקת כל הבקשות המפורטות בחלונית 'רשת'

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

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

תמונות מצב של ערימות (heap snapshot) מהירות יותר עם תגי HTML עם שם ופחות פריטים

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

אובייקטים שמקובצים לפי תגי HTML עם שם.

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

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

בעיות ב-Chromium: 41490040,‏ 343341610,‏ 42203857.

פתיחת חלונית האנימציות כדי לצלם אנימציות ולערוך את @keyframes בשידור חי

החלונית אנימציות משמשת עכשיו למטרות הבאות:

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

בסרטון הבא תוכלו לראות את שתי התכונות בפעולה.

בעיה ב-Chromium: 352718055.

Lighthouse 12.1.0

בחלונית Lighthouse פועלת עכשיו גרסת Lighthouse 12.1.0.

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

במאמר Lighthouse: אופטימיזציה של מהירות האתר מוסבר על היסודות של השימוש בחלונית Lighthouse ב-DevTools.

בעיה ב-Chromium: 772558.

נגישות

בגרסה הזו יש את שיפורי הנגישות הבאים:

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

בעיות ב-Chromium: 349939551,‏ 343942719,‏ 349334243,‏ 349428374.

פרטים שונים

ריכזנו כאן כמה תיקונים ושיפורים חשובים בגרסה הזו:

  • ביצועים:
    • מעקב Network: נוספו אירועי חיבור WebSocket‏ 331351979.
    • עכשיו, בחלונית ביצועים מתבצע זום אין נכון על הפעילות העיקרית העמוסה ביותר בשרשור 345599356.
    • תוקן באג בהעלאת סוגים שגויים של קובצי מעקב, ועכשיו הוא מונע העלאה של כל סוג מלבד .json או .gz 349864878 הנכונים.
  • Elements (רכיבים) > Styles (סגנונות):
    • התפריט הנפתח של היחידות בערכים של מאפייני האורך יצא משימוש 41495618.
    • תוקן הפתרון של נכסים פעילים עבור כללי at-rule בתצוגת עץ 346732737.
    • קטעים לא פעילים של @position-try מופיעים עכשיו באפור 40246493.
  • אפליקציה:
    • קובצי Cookie: תוקן באג שלא מרענן קובצי Cookie בזמן הרענון של הלחיצה על 348683488.
    • אחסון מקומי: עכשיו אפשר למיין את המפתחות לפי סדר אלפביתי 341129585.

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

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

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

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

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

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