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

Sofia Emelianova
Sofia Emelianova
GitHub

מכשיר ההקלטה תומך בייצוא ל-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 ב-Elements (רכיבים) > Styles (סגנונות) יש עכשיו עוד מחלקות מדומה שאפשר להפעיל באילוץ. קבוצת האפשרויות החדשה מופיעה בתפריט הנפתח של המצב Force specific element (אילוץ רכיב ספציפי), והיא ספציפית לרכיבים מסוימים שתבחרו. לדוגמה, ל-<label> ול-<input> יש קבוצות שונות של אפשרויות.

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

בעיה ב-Chromium: 40280012.

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

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

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

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

Lighthouse 12.2.0

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

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

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

בעיה ב-Chromium:‏ 772558.

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

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

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

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

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

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

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

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

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