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

Sofia Emelianova
Sofia Emelianova

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

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

בנוסף, ערך המאפיין popovertarget מקושר עכשיו לרכיב popover שלו ב-DOM.

המאפיינים before ו-after של popovertarget מקשרים אותו לרכיב ה-popover.

שיפורים בחלונית המקורות

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

האפשרות 'לא להשהות כאן' משופרת

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

  • חריגים או דחיות של הבטחות מפונקציות מובנות.
  • ביטול נקודות עצירה (breakpoints) ב-DOM, באחזור/XHR ובהפרת CSP.
  • בפירוק של Wasm.

כדי לראות את זרימת העבודה בפעולה:

בעיה ב-Chromium: ‏ 40924349.

פונקציות חדשות של event listener לגלילה עם הצמדה

הרשימה Sources > Event Listener Breakpoints > Control כוללת שני listeners שקשורים ל-scroll-snap: ‏ scrollsnapchange ו-scrollsnapchanging. האירועים האלה מופעלים כשגוללים את מאגר הגלילה באופן שגורם לו להיצמד לאלמנט חדש.

לפני ואחרי הוספת פונקציות event listener שקשורות ל-scroll-snap.

בעיה ב-Chromium: ‏ 40286359.

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

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

עודכנו הגדרות קבועות מראש של הגבלת רוחב פס

הגדרות קבועות מראש של ויסות נתונים בחלונית רשת מתעדכנות: נוספת האפשרות 4G מהיר, האפשרות 3G מהיר משנה את השם ל4G איטי, והאפשרות 3G איטי משנה את השם ל3G. השינוי הזה מתאים יותר להגדרות הקבועות מראש של Lighthouse.

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

בעיה ב-Chromium: 342406608.

פרטי Service Worker בשדות בהתאמה אישית בפורמט HAR

כשמייצאים את יומן הרשת לפורמט HAR, אפשר לראות עכשיו את המידע שקשור ל-Service Workers, כולל תזמונים, כשדות מותאמים אישית (עם קידומת של קווים תחתונים). לדוגמה, יכול להיות שתמצאו ביומן את השדות החדשים הבאים:

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

בעיה ב-Chromium: 342406608.

שליחה וקבלה של אירועי WebSocket בחלונית הביצועים

בדומה לאירועי WebSocket אחרים, החלונית Performance מתעדת עכשיו את האירועים Send WebSocket Message ו-Receive WebSocket Message ומציגה אותם בנתוני הביצועים. לדוגמה:

האירוע 'קבלת הודעת WebSocket' שתועד בנתוני הביצועים.

בעיה ב-Chromium: ‏ 40286129.

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

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

  • נגישות: קוראי מסך מכריזים עכשיו על תוכן ההודעות במסוף כשגוללים ביומן באמצעות מקשי החיצים למעלה ולמטה (344484979).
  • מקורות:
    • דף: האפשרות בתפריט שמירה בשם שומרת עכשיו קובצי מודול Wasm כקובצי בינאריים תקינים של Wasm במקום כטקסט Base64 (40784130).
    • Call stack: הוסרה הסיומת (async) מתיאורי מסגרות של קריאות אסינכרוניות, וההדגשה שלהן השתנתה מכתב נטוי לכתב מודגש (343750870).
  • זיכרון: הוסר InternalNodes בגודל אפס מתוך תמונת מצב של הערימה סיכום (340200025).
  • רשת: תוקן באג שמנע את התצוגה המקדימה של תוכן תגובה לסטרימינג לבקשות שהתחילו אבל עדיין לא קיבלו אירוע responseReceived (338340752).
  • ביצועים:
    • נתונים סטטיסטיים של הבורר: נוסף הסבר קצר על העמודה %-of-Slow-Path-Non-Matches (324282954).
    • מצב הגדרת מסלולים: הלחצן סיום הגדרת המסלולים הועבר לפינה השמאלית התחתונה (345256274).
  • מסוף: תוקנה באג שגרם להצגה של כמה הודעות זהות במסוף כשניווטו באמצעות מטמון אחורה/קדימה (40894153).
  • הגדרות: נוספו סמלי עזרה לצד כל הכרטיסיות.

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

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

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

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

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

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