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

Sofia Emelianova
Sofia Emelianova

מכשיר ההקלטה תומך בייצוא ל-Puppeteer ל-Firefox

כחלק מתמיכה ב-WebDriver BiDi, עכשיו אפשר לייצא הקלטות מהחלונית Recorder ל-Puppeteer ל-Firefox. בעזרת התמיכה של Puppeteer ב-Firefox, עכשיו אפשר לתעד תהליכי שימוש באמצעות החלונית Recorder בכלי הפיתוח ל-Chrome, לייצא אותם ולהריץ אותם ב-Firefox וב-Chrome.

התמונה שלפני ואחרי הוספת האפשרות 'Puppeteer for Firefox' לתפריט הייצוא של הכלי להקלטת נתונים.

מידע נוסף זמין במאמר WebDriver BiDi – העתיד של אוטומציה בכמה דפדפנים.

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

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

תצפיות על מדדים בזמן אמת

בחלונית ביצועים מוצגות עכשיו תצפיות בזמן אמת לגבי מדדי חוויית המשתמש הבסיסיים (Core Web Vitals), גם במחשב המקומי וגם על סמך נתוני שדה מהדוח על חוויית המשתמש ב-Chrome. כך תוכלו לזהות בעיות בביצועים בלי שתצטרכו לתעד את עקבות הביצועים, ולהבין עד כמה חוויית השימוש שלכם מייצגת את חוויית השימוש של המשתמשים.

כדי לראות תצפיות בזמן אמת לגבי LCP ו-CLS, פותחים את החלונית ביצועים. כדי לראות את מדד INP, צריך לבצע אינטראקציה בדף. כדי להשוות בין המדדים המקומיים לבין חוויית המשתמש המצטברת מהדוח על חוויית המשתמש ב-Chrome, מוסיפים נתוני שדות: בקטע נתוני שדות שמשמאל, לוחצים על הגדרה ובחלון הדו-שיח לוחצים על אישור. מעבירים את העכבר מעל ערך של מדד כדי להציג הסבר קצר עם מידע נוסף.

תצפיות בזמן אמת לגבי מדדים בחלונית 'ביצועים'.

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

התיבה חיפוש בחלונית ביצועים פועלת עכשיו גם בטראק רשת, כך שאפשר למצוא בקשות באמצעות מקש הקיצור Ctrl / Cmd + F.

בקשת רשת שנמצאה בחיפוש.

הצגת מעקב סטאק של קריאות ל-performance.mark ול-performance.measure

בכרטיסייה Summary, בחלונית Performance מוצגים עכשיו נתוני מעקב סטאק של קריאות ל-performance.mark ול-performance.measure. אפשר להשתמש בקריאות האלה כדי להרחיב את מעקב הביצועים באמצעות הנתונים המותאמים אישית שלכם.

לפני ואחרי הצגת נתוני סטאק לקריאות של performance.mark ו-performance. measure.

מידע נוסף זמין במאמר התאמה אישית של נתוני הביצועים באמצעות API של יכולת התאמה.

שימוש בנתונים של כתובות לבדיקה בחלונית המילוי האוטומטי

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

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

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

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

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

אילוץ מצבים נוספים לרכיבים ספציפיים

בקטע :hov בקטע אלמנטים > סגנונות יש עכשיו יותר פסאודו-כיתות שאפשר להפעיל בכוח. קבוצת האפשרויות החדשה מופיעה בתפריט הנפתח של המצב Force specific element (אילוץ רכיב ספציפי), והיא ספציפית לרכיבים מסוימים שתבחרו. לדוגמה, ל-<label> ול-<input> יש קבוצות שונות של אפשרויות.

לפני ואחרי הוספת היכולת לאלץ מצבי רכיבים ספציפיים.

בעיה ב-Chromium: 40280012.

ב'רכיבים' > 'סגנונות', המערכת מבצעת עכשיו השלמה אוטומטית של מאפייני רשת נוספים

בכרטיסייה Elements (רכיבים) > Styles (סגנונות) יש עכשיו אפשרויות להשלמה אוטומטית כשעורכים את השמות של אזור התצוגה והקווים.

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

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

Lighthouse 12.2.0

בחלונית Lighthouse פועלת עכשיו גרסת Lighthouse 12.2.0.

העדכון הזה כולל מספר תיקוני באגים. הרשימה המלאה של השינויים

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

בעיה ב-Chromium: ‏ 772558.

רגעי שיא שונים

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

  • רכיבים:
    • תוקן באג ברינדור שגוי של מאפייני אורך עם עומס יתר 357020613.
    • השם של position-try-options שונה ל-position-try-fallbacks בהתאם למפרט.
    • עכשיו, רענון הדף משחזר את הצומת שנבחר גם בתוך iframe‏ 40719145.
    • נגישות: קוראי מסך יקריאו עכשיו את הלחצן הצגת הרכיב 357382536.
  • ביצועים > רשת: אפשרות התפריט חשיפה בחלונית הרשת פותחת עכשיו את הכרטיסייה כותרות של בקשת הרשת הרלוונטית.
  • מסוף:
    • שגיאות מהתוסף C/C++ לא פותחות בכפייה את המסוף 356320158.
    • תוקן באג ב-import.meta במודול JS שלא מבצע הערכה כשהמודול מושהה 40743793.
  • זיכרון: תוקן באג שבו האפשרות 'שחזור של ריטיינרים שהתעלמת מהם' לא מופיעה אחרי התעלמות מריטיינר 327337527.

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

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

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

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

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

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