דף זה תורגם על ידי Cloud Translation API.

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

Sofia Emelianova

אפליקציית מכשיר ההקלטה תומכת בייצוא ל-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 (אישור). כדי לראות הסבר קצר עם מידע נוסף, מעבירים את העכבר מעל ערך של מדד.

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

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

חיפוש בקשות ברשת במסלול Network

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

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

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