מה חדש בכלי הפיתוח, גרסה 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

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

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

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

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