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

הבנה טובה יותר של שגיאות ואזהרות במסוף בעזרת 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.

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

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

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

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

כדי להגדיר את ההתנהגות הרלוונטית, מסמנים או מבטלים את הסימון של האפשרויות החדשות check_box Auto closing brackets ו-check_box Automatically pretty print minified sources בהגדרות הגדרות > העדפות > מקורות.

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

המערכת מזהה הבטחות שנדחו וטופל בהן כ'נתפסו'

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

במילים אחרות, כשההגדרה Pause on uncaught exceptions (השהיה באירועי חריגה שלא נלכדו) מופעלת בקטע Sources (מקורות) > Breakpoints (נקודות עצירה) > check_box (תיבת סימון), תכונת ניפוי הבאגים לא תשהה במשפטים דומים למשפטים הבאים:

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

בעיה ב-Chromium: 40283993.

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

ב-מסוף מוצגות עכשיו שרשרות של גורמי שגיאה ב-stack trace, אם יש כאלה.

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

בעיה ב-Chromium: 40182832.

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

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

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

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

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

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

בעיה ב-Chromium: 40222701.

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

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

בעיה ב-Chromium: ‏ 40574989.

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

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

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

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

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

בעיה ב-Chromium: ‏ 324282954.

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

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

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

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

בעיה ב-Chromium: 311439339.

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

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

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

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

בעיה ב-Chromium: ‏ 327337527.

Lighthouse 11.7.1

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

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

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

בעיה ב-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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.