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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

בחלונית ביצועים מוצגים עכשיו נתונים בזמן אמת על מדדי חוויית המשתמש הבסיסיים, גם במחשב המקומי וגם על סמך נתוני שטח מהדוח על חוויית המשתמש ב-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.

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

בקטע :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

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

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

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