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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

לפני ואחרי הוספת הקטע 'פרטיות' לחלונית 'אבטחה'.

בעיה ב-Chromium: ‏ 352364594.

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

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

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

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

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

לפני ואחרי הוספת כיול של הגבלת קצב הבקשות.

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 368135130.

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

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

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

לפני ואחרי הוספת התובנה 'הזרמה מחדש מאולצת'.

בעיה ב-Chromium: ‏ 369766156.

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

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

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

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

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

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

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

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");

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

לפני ואחרי הוספת התמיכה ב-console.timeStamp.

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

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

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

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

תמיכה ב-:open pseudo-class וב-pseudo-elements שונים

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

לפני ואחרי הוספת האפשרות &#39;:open&#39;.

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

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

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

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

לפני ואחרי הוספת האפשרות &#39;העתקת המסוף&#39;.

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

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

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

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

לפני ואחרי הצגת יחידות בייט.

בעיה ב-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

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

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

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