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

Sofia Emelianova
Sofia Emelianova
GitHub

הסבר על שגיאות ואזהרות במסוף בעזרת Gemini

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

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

הסבר לשגיאה שנוצר על ידי AI.

מידע נוסף מופיע במאמר הסבר על שגיאות ואזהרות באמצעות AI.

@position-try תמיכה בכללים ב-Elements > Styles

כדי לעזור לכם לנפות באגים במיקום של עוגני CSS, בכרטיסייה Elements > Styles יש עכשיו תמיכה ב@position-try כללי CSS. בכרטיסייה מוצגים ערכי position-try-options וכל אפשרות מקושרת לקטע @position-try --name ייעודי.

התמיכה ב-before וב-after בכללי ה-CSS ‏‎ @position-try‎.

מידע נוסף זמין במאמר הצגת CSS anchor positioning API.

בעיה ב-Chromium: 40279608.

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

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

הגדרת הדפסה אוטומטית של קוד יפה וסגירת סוגריים

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

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

התמונה שלפני ואחרי הוספת הגדרות חדשות להדפסה אוטומטית של קוד יפה וסגירת סוגריים.

בעיות ב-Chromium: 40865010, ‏ 324314570.

הבטחות שנדחו ומטופלות מזוהות כהבטחות שנתפסו

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

במילים אחרות, כשהאפשרות מקורות > נקודות עצירה > השהיה בחריגים שלא נתפסו מופעלת, מאתר הבאגים לא יושהה בהצהרות שדומות להצהרות הבאות:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

התמונות שלפני ואחרי הזיהוי של דחיות שנתפסו.

בעיה ב-Chromium: 40283993.

הגורמים לשגיאות במסוף

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

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

הפלט לפני ואחרי הדפסת עקבות מחסנית עם התחיליות `Caused by`.

בעיה ב-Chromium: 40182832.

שיפורים בחלונית 'רשת'

הגרסה הזו כוללת כמה שיפורים בחלונית Network.

בדיקת כותרות לרמזים מוקדמים

כותרות Early Hints מקבלות קטע ייעודי בכרטיסייה Headers של הבקשה בחלונית Network. בעבר, יכולתם למצוא את הכותרות הרלוונטיות בקטע Response Headers (כותרות תגובה).

‫Early Hints הוא קוד סטטוס HTTP ‏ (103 Early Hints) שמשמש לשליחת תגובת HTTP מקדימה לפני תגובה סופית. כך שרת יכול לשלוח רמזים לדפדפן לגבי משאבי משנה חיוניים (למשל, גיליון סגנונות או JavaScript חיוני) או מקורות שסביר שיהיה בהם שימוש בדף, בזמן שהשרת עסוק ביצירת המשאב הראשי.

התמונה מציגה את הדף לפני ואחרי הוספת קטע ייעודי ל-Early Hints.

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

בעיה ב-Chromium: 40222701.

הסתרת העמודה 'מפל'

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

התמונה מציגה את התרשים לפני ואחרי הוספת האפשרות להסתיר את העמודה 'מפל מים'.

בעיה ב-Chromium: ‏ 40574989.

שיפורים בחלונית הביצועים

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

תיעוד הנתונים הסטטיסטיים של הסלקטור ב-CSS

הוספנו הגדרה חדשה לחלונית Performance שמאפשרת לכם לתעד נתונים סטטיסטיים של סלקטור ב-CSS לאירועים ארוכים של Recalculate Style.

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

הנתונים הסטטיסטיים לפני ואחרי הוספת הסלקטור.

בעיה ב-Chromium: ‏ 324282954.

שינוי הסדר והסתרה של מסלולי בדיקה

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

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

בגרסה הבאה, Chrome 126, יהיו שיפורים נוספים בממשק המשתמש הזה.

בעיה ב-Chromium: ‏ 311439339.

התעלמות מריטיינרים בחלונית הזיכרון

עכשיו אפשר להתעלם מ-retainers בתמונות מצב של ה-heap שאתם מצלמים באמצעות החלונית Memory.

כדי להתעלם מהקפאה, בוחרים אובייקט, ובקטע Retainer לוחצים לחיצה ימנית על הקפאה ובוחרים באפשרות Ignore this retainer מהתפריט הנפתח. התשלומים הקבועים שהמערכת התעלמה מהם מסומנים בערך ignored בעמודה מרחק. כדי להפסיק להתעלם, לוחצים על שחזור של ריטיינרים שהתעלמת מהם בסרגל הפעולות בחלק העליון.

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

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

בעיה ב-Chromium: ‏ 327337527.

Lighthouse 11.7.1

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

בין השינויים הבולטים אפשר למצוא את הפסקת התמיכה בתוסף Publisher Ads, שהפך למיושן בגרסה הזו.

התמיכה בתוסף Publisher Ads לפני ואחרי ההוספה וההסרה.

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

בעיה ב-Chromium: 772558.

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

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

  • הלוח Recorder כבר לא בגרסת טרום-השקה (329271496).
  • במסוף לא מוצגת יותר שגיאה כשפונקציית מעצב מותאם אישית מחזירה null עבור הפונקציה body(), וזהו התנהגות תקינה (329400119).
  • התחביר של ההדגשה בחלונית מקורות עודכן, ועכשיו הוא תומך בדגלים v ו-d בביטויים רגולריים.
  • בכרטיסייה רשת > קובצי Cookie תוקן באג במיפוי של קובצי Cookie שמוחרגים לקובצי Cookie של תגובה (41491846).
  • בכרטיסייה Elements > Styles אפשר עכשיו לבצע את הפעולות הבאות:
    • הצגת כללים שעברו בירושה ועברו עומס יתר מלא עם מאפיינים מותאמים אישית (41489874).
    • הערך המיושם מודגש בפונקציה light-dark() בהתאם לעיצוב הצבעים (331123816).

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

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

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

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

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

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