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

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

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

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

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

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