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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

בעיה ב-Chromium:‏ 362672528.

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

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

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

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

בעיה ב-Chromium:‏ 361717594.

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

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

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

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

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

בעיה ב-Chromium: 361471205.

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 350519222.

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

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

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

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

בעיה ב-Chromium: 350519222.

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

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

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

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

בעיה ב-Chromium: ‏ 328472696.

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

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

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

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

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

Lighthouse גרסה 12.2.1

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

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

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

בעיה ב-Chromium:‏ 772558.

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

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

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

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

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

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

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

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

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