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

Sofia Emelianova
Sofia Emelianova
GitHub

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

הקטע 'לפני ואחרי': קישור של עוגנים מפורשים ומרומזים.

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

קטע הקוד לפני ואחרי הקישור בין ה-popovertarget לרכיב החלון הקופץ שלו.

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

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

גרסה משופרת של 'לעולם אל תשהו כאן'

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

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

הצגת תהליך העבודה בפעולה:

בעיה ב-Chromium: 40924349.

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

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

הלפני ואחרי ההוספה של פונקציות event listener שקשורות לגלילה מהירה.

בעיה ב-Chromium: 40286359.

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

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

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

בחלונית Network (רשת) מתעדכנות הגדרות ברירת המחדל המוגדרות מראש של ויסות נתונים: Fast 4G (4G מהיר) חדש, Fast 3G (3G מהיר) ששמו שונה ל-Slow 4G (4G איטי) ו-Slow 3G (3G איטי) ששמו שונה ל-3G (3G). כך אפשר להתאים את הבדיקה טוב יותר להגדרות המוגדרות מראש של Lighthouse.

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

בעיה ב-Chromium: 342406608.

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

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

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

בעיה ב-Chromium:‏ 342406608.

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

בדומה לאירועים אחרים של WebSocket, מעכשיו האירועים שליחת הודעת WebSocket וקבלה של הודעת WebSocket מתועדים בחלונית ביצועים ומוצגים בנתיב הביצועים. לדוגמה:

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

בעיה ב-Chromium:‏ 40286129.

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

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

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.