מה חדש בכלי הפיתוח, בגרסה 134 של Chrome

Sofia Emelianova

חלונית הפרטיות והאבטחה

הפאנל הישן אבטחה הפך לפאנל פרטיות ואבטחה, ונוסף לו קטע חדש שמוקדש לפרטיות. בקטע הזה תוכלו:

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

בעיה ב-Chromium: ‏ 352364594.

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

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

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

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

בתפריט הנפתח Performance (ביצועים) > CPU throttling (הגבלת מהירות המעבד), בוחרים באפשרות Calibrate... (כיול), ואז בSettings (הגדרות) לוחצים על Calibrate (כיול) ועל Continue (המשך), ומחכים עד שכלי הפיתוח יחשב את שיעורי ההאטה של המכשיר. אפשרויות ההגבלה המכוילות מופיעות שוב בתפריט הנפתח ביצועים > הגבלת מהירות המעבד.

בחירה של אירועי ביצועים שונים באותו צ'אט עם AI

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

הדגשה של נתונים מאינטראקציה ישירה (First-Party) ונתונים מצד שלישי בדף 'ביצועים'

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

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

בנוסף, לוחצים על סמל account_tree לצד רשומה מודגשת בטבלה כדי לעבור לכרטיסייה Bottom-up שבה הרשומות מקובצות לפי צדדים שלישיים.

נתוני שדות בהסברים קצרים על סמנים ובתובנות

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

בעיה ב-Chromium: 368135130.

תובנה לגבי 'אילוץ של הזרמה חוזרת'

בכרטיסייה ביצועים > תובנות נוספה תובנה חדשה: הצגה מחדש של תוכן (reflow) שנכפה. רינדור מחדש מאולץ מתרחש כשמנוע הרינדור משהה את ביצוע הסקריפט כדי לחשב את הסגנון והפריסה. הזרמות מחדש בכפייה עלולות ליצור צווארי בקבוק שכדאי להימנע מהם.

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

בעיה ב-Chromium: ‏ 369766156.

תובנה לגבי 'אופטימיזציה של גודל DOM'

תובנה חדשה נוספת היא אופטימיזציה של גודל DOM. עץ DOM גדול יכול להאט את ביצועי הדף.

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

הרחבת עקבות הביצועים באמצעות console.timeStamp

‫Extensibility API תומך עכשיו בconsole.timeStamp. בנוסף ל-performance.measure ול-performance.mark, עכשיו אפשר ליצור רצועות מותאמות אישית ב-Performance Trace ולתעד סימנים מותאמים אישית באמצעות console.timeStamp, כחלופה קלה יותר שלא מוסיפה רשומות לציר הזמן של הביצועים הפנימי של הדפדפן, אלא רק מציגה אותן ב-Performance Trace.

לדוגמה, אפשר להשתמש בתחביר הבא:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

אם תסמנו את האפשרות הגדרות ללכידה > check_box הצגת מסלולים מותאמים אישית, המסלול המותאם אישית יופיע בנתוני המעקב:

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

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

ערכים בזמן אמת של סגנונות אנימציה

בכרטיסייה Elements (רכיבים) > Styles (סגנונות), הערכים של סגנונות מונפשים מתעדכנים עכשיו בזמן אמת.

תמיכה במחלקת פסאודו :open ובאלמנטים שונים של פסאודו

החלונית Elements תומכת עכשיו במחלקת פסאודו :open בקטע Styles > :hov > Force specific element state עבור רכיבי HTML מסוימים כמו <details>, ‏<select>, ‏<dialog> ו-<input>.

בנוסף, החלונית Elements תומכת עכשיו גם בכמה פסאודו-אלמנטים חדשים: ::checkmark,‏ ::picker-icon וקרוסלה ::column,‏ ::scroll-button,‏ ::scroll-marker ו-::scroll-marker-group.

בעיות ב-Chromium: 383157184, ‏ 379805728.

העתקת כל ההודעות במסוף

מעכשיו אפשר ללחוץ לחיצה ימנית כדי להעתיק את כל ההודעות במסוף בבת אחת.

בנוסף, אפשר למצוא אפשרות דומה להעתקה בתפריט ההקשר של Network (רשת) > Request Payload (מטען בקשה).

בעיות ב-Chromium: 40206460, ‏ 384967020.

יחידות בייט בחלונית הזיכרון

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

בעיה ב-Chromium: ‏ 388589515.

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

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

• ביצועים:
  • הערות: עכשיו אפשר ללחוץ על התווית כדי לבחור את הרשומה המתאימה (crbug.com/388224764).
  • תובנות: כשלוחצים על CLS בכרטיסייה תובנות, נבחר עכשיו האשכול הגרוע ביותר במקום השינוי הגרוע ביותר.
• רשימת ההתעלמות: כברירת מחדל, המערכת מתעלמת עכשיו מנתונים פנימיים של Node שמתחילים ב-node: (crbug.com/382453615).
• ביטויים בזמן אמת: תוקן באג שגרם לביטוי בזמן אמת להשפיע על הפקודה $_ (crbug.com/388437265).
• Elements > Styles: עכשיו יש חלון קופץ עם הערך המוחלט של אורכים יחסיים (crbug.com/40778486).
• נגישות: כותרות העמודות מודיעות עכשיו אם אפשר למיין אותן.
• סמלי הכרטיסיות מוצגים עכשיו בצד שמאל ליד שמות הכרטיסיות, במקום בצד ימין.

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

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

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

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

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

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

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