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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת דוחות קריסות של שיחות ב-performance.mark וב-performance.measure

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 40280012.

השלמה אוטומטית של יותר מאפייני רשת ב-Elements > Styles

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

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

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

‫Lighthouse 12.2.0

החלונית Lighthouse מריצה עכשיו את Lighthouse 12.2.0.

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

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

בעיה ב-Chromium: 772558.

מידע חשוב נוסף

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

  • Elements:
    • תוקן באג שגרם להצגה שגויה של מאפייני אורך בעלי עומס יתר 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

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

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

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