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

Sofia Emelianova

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

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

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

מידע נוסף זמין במאמר איך להבין טוב יותר שגיאות ואזהרות בעזרת AI.

תמיכה בכללי @position-try בקטע 'רכיבים' > סגנונות

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

מידע נוסף זמין במאמר השקה של CSS anchor positioning API.

בעיה ב-Chromium:‏ 40279608.

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

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

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

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

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

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

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

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

במילים אחרות, כשהאפשרות Sources (מקורות) > Breakpoints > check_box (השהיה בחריגים לא מזוהים) מופעלת, הכלי לניפוי באגים לא יושהה בהצהרות שדומות לאלה:

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

בעיה ב-Chromium: 40283993.

סיבות לשגיאות במסוף

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

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

בעיה ב-Chromium: 40182832.

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

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

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

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

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

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

בעיה ב-Chromium: 40222701.

הסתרת העמודה Waterfall

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

בעיה ב-Chromium: 40574989.

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

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

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

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

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

בעיה ב-Chromium: 324282954.

שינוי הסדר והסתרה של טראקים

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

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

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

בעיה ב-Chromium: 311439339.

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

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

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

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

בעיה ב-Chromium:‏ 327337527.

Lighthouse 11.7.1

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

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

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

בעיה ב-Chromium: 772558.

פרטים שונים

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

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

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

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

פנייה לצוות של כלי הפיתוח ל-Chrome

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

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

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

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