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

תובנות מסוף של 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 על ידי הצגה של פחות אובייקטים פנימיים ותמיד כוללים ערכים מספריים.

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

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

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

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

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

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

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

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