מה חדש בכלי הפיתוח, 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.

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

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

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

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

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

בעיה ב-Chromium: 40222701.

הסתרת העמודה 'תרשים מפלים'

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

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

בעיה ב-Chromium: ‏ 40574989.

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 324282954.

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

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

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

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

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

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

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

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

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

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