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

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

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

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

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

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

רצועת Enhanced Network

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

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

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

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

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

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

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

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

פרטים בטראק התזמונים

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

בעיה ב-Chromium: ‏ 345418915.

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

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

תמונות מצב של ערימות מהירות יותר עם תגי HTML בעלי שמות ופחות עומס

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

הביצועים של ההגדרה check_box Include numerical values in capture שופרו, היא מופעלת כברירת מחדל והיא הוסרה מהחלונית Memory.

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 352718055.

‫Lighthouse 12.1.0

החלונית Lighthouse מריצה עכשיו את Lighthouse 12.1.0.

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

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

בעיה ב-Chromium: ‏ 772558.

נגישות

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

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

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

מידע חשוב נוסף

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

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

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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