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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

שינוי משמעותי במסנני הרשת

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

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

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

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

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

בעיה ב-Chromium: ‏ 362672528.

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

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

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

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

בעיה ב-Chromium: ‏ 361717594.

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

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

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

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

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

בעיה ב-Chromium: ‏ 361471205.

גלילה של תוכן שחורג מהגבולות של הרכיב מסומנת בתג

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

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

בעיה ב-Chromium: ‏ 40670442.

הצהרות פשוטות אחרי כללים מוטמעים לא "עולות למעלה"

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

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

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

  background-color: green;
}

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

בעיה ב-Chromium: ‏ 358119261.

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

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

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

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

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

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

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

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

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

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

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

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

לפני ואחרי הוספת סוג הפרופיל 'Detached elements' לחלונית Memory.

בעיה ב-Chromium: 350519222.

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

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

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

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

בעיה ב-Chromium: 350519222.

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

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

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

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

בעיה ב-Chromium: ‏ 328472696.

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

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

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

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

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

Lighthouse 12.2.1

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

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

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

בעיה ב-Chromium: 772558.

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

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

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

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

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

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

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

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

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