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

Sofia Emelianova

מכשיר ההקלטה תומך בייצוא ל-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.
ביצועים > רשת: האפשרות בתפריט הצגה ברשת פותחת עכשיו את הכרטיסייה כותרות של בקשת הרשת הרלוונטית.
Console:
- שגיאות מתוסף C/C++ לא פותחות יותר את המסוף באופן אוטומטי 356320158.
- תוקן באג שקשור ל-import.meta במודול JS שלא מוערך כשהוא מושהה 40743793.
זיכרון: תוקן באג שגרם לכך שהאפשרות 'שחזור של ריטיינרים שהתעלמת מהם' לא הופיעה אחרי שהתעלמתם מריטיינר 327337527.

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

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

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

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

אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
שולחים ציוץ אל ‎@ChromeDevTools.
להשאיר תגובות בסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.