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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

בעיה ב-Chromium: ‏ 352364594.

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

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

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

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

בתפריט הנפתח ביצועים > בקרת קצב המעבד, בוחרים באפשרות כיוון.... לאחר מכן, בתפריט הגדרות, לוחצים על כיוון, על המשך וממתינים עד ש-DevTools יחשב את שיעורי ההאטה במכשיר. אפשרויות הבקרה המכווננת על קצב העברת הנתונים מופיעות שוב בתפריט הנפתח Performance (ביצועים) > CPU throttling (בקרה על קצב העברת הנתונים ב-CPU).

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 368135130.

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

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

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

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

בעיה ב-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 (אלמנטים) > Styles (סגנונות), הערכים של סגנונות מונפשים מתעדכנים עכשיו בזמן אמת.

תמיכה בפסאודו-סיווג :open ובפסאודו-רכיבים שונים

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

לפני ואחרי הוספת האפשרות ‎:open.

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 388589515.

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

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

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

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

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

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

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

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

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