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

Sofia Emelianova
Sofia Emelianova

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

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

מסנני רשת בגרסה חדשה

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

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

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

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

נשמח לשמוע מה דעתך על העיצוב החדש.

בעיה ב-Chromium: ‏ 362672528.

ייצוא של יומני HAR לא כולל עכשיו מידע אישי רגיש כברירת מחדל

כדי לצמצם את הסיכויים לדליפה לא מכוונת של מידע אישי רגיש, יומן הרשת שיוצא בפורמט HAR לא יכיל יותר את הכותרות Cookie,‏ Set-Cookie ו-Authorization כברירת מחדל.

כדי לייצא יומנים בפורמט HAR עם המידע האישי הרגיש, מפעילים את הגדרות > העדפות > רשת > יש הרשאה ליצירת HAR עם מידע אישי רגיש. בחלונית Network יופיע חץ לצד הלחצן Export. לוחצים לחיצה ארוכה על הלחצן ובוחרים באפשרות ייצוא יומן HAR (עם מידע אישי רגיש) בתפריט הנפתח.

לפני ואחרי הוספת אפשרויות ייצוא עם מידע אישי רגיש ועם מידע אישי רגיש, לייצוא של יומני HAR.

בעיה ב-Chromium: ‏ 361717594.

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

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

ערכים להשלמה אוטומטית של מאפייני text-emphasis-*

ההשלמה האוטומטית בכרטיסייה Styles מציעה עכשיו ערכים למאפייני ה-CSS הבאים:

לפני ואחרי הוספת האפשרות להשלמה אוטומטית לנכסים מסוג 'text-emphasis-*'.

בעיה ב-Chromium: ‏ 361471205.

גלילה מעבר לתוכן שמופיע במסך מסומן בתג

בחלונית Elements (רכיבים) מופיע עכשיו תג 'גלילה' חדש לרכיבים שמכילים תוכן שחורג מהמסך וכוללים את הערכים overflow: scroll או overflow: auto, כדי שתוכלו לזהות בקלות תוכן שחורג מהמסך. כמו התגים האחרים, התג הזה משקף את ה-DOM הנוכחי ונעלם אם התוכן מפסיק לחרוג בגלל שינוי בגודל, למשל.

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

בעיה ב-Chromium: ‏ 40670442.

הצהרות ללא תוכן אחרי כללים בתצוגת עץ לא 'עוברות למעלה'

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

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

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

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

בעיה ב-Chromium: ‏ 358119261.

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

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

המלצות במדדים בזמן אמת

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

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

קטעים מורחבים עם המלצות.

פועלים לפי ההמלצות כדי להתקרב לחוויה של המשתמשים.

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

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

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

פרופיל חדש בשם 'רכיבים מנותקים'

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

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

בעיה ב-Chromium: 350519222.

שיפור של מתן שמות לאובייקטים רגילים של JS

כדי לארגן את הקטגוריה Object בתמונות מצב של ערימות (heap snapshot) ולצמצם את העומס, אובייקטים פשוטים של JavaScript הם עכשיו:

  • השם שלהם מבוסס על המאפיינים שהם מכילים, למשל {firstProperty, secondProperty, ..., *nthProperty}.
  • אפשר לחפש אותם לפי השמות האלה שנוצרו על ידי DevTools.
  • מקובצים יחד אם יש להם את אותם מאפיינים.

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

בעיה ב-Chromium: 350519222.

השבתת העיצוב הדינמי

עכשיו אפשר להשבית את ההתאמה האוטומטית של הצבעים של כלי הפיתוח לצבעים של העיצוב המותאם אישית ב-Chrome.

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

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

בעיה ב-Chromium: ‏ 328472696.

ניסוי ב-Chrome: שיתוף תהליכים

בדרך כלל, כשפותחים כמה כרטיסיות מאותו אתר (למשל Google Docs), Chrome יוצר תהליך עיבוד נפרד לכל אחת מהן. הניסוי שיתוף תהליכים משנה את המצב הזה ומאפשר לכמה כרטיסיות לשתף את אותו תהליך עיבוד כדי לשפר את הביצועים.

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

סרגל המידע 'הכרטיסייה הזו חולקת משאבים עם כרטיסיות אחרות…'

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

Lighthouse 12.2.1

בחלונית Lighthouse פועלת עכשיו גרסת Lighthouse 12.2.1.

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

במאמר Lighthouse: אופטימיזציה של מהירות האתר מוסבר על היסודות של השימוש בחלונית Lighthouse ב-DevTools.

בעיה ב-Chromium: ‏ 772558.

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

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

  • רכיבים:
    • תיקונים מרובים לעריכת CSS בתצוגת עץ (41486635, ‏ 361477264, ‏ 328263458, ‏ 41487826).
    • תוקנה בעיה שבה ניתוח של מאפיינים מותאמים אישית שהוגדרו עם ערך ריק כ'לא מוגדר' (365578428).
  • מסוף: תוקנה בעיה של סימן & ללא תווי בריחה במחרוזות של כמה שורות בפקודות cURL (352651673).
  • זיכרון: תוקנה הבחירה שמוגדרת כברירת מחדל בדפים עם שירותי עבודה. כעת נבחר החוט הראשי (40669896).
  • אבטחה: הדגשת הסכימה של כתובת ה-URL מתעדכנת עכשיו בצורה נכונה כששלב האבטחה של המקור משתנה (359920086).

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

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

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

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

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

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