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

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

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

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

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

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

טראק של Enhanced Network

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 345418915.

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

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

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

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

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

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

בעיות ב-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.
• Application:
  • קובצי cookie: תוקן באג שבו קובצי ה-cookie לא התעדכנו לאחר לחיצה על רענון 348683488.
  • אחסון מקומי: עכשיו אפשר למיין את המפתחות לפי סדר אלפביתי 341129585.

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

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

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

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

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

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

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