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

Sofia Emelianova

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

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

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

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

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

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

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

בעיה ב-Chromium:‏ 362672528.

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

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

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

בעיה ב-Chromium: 361717594.

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

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

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

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

• קיצור דרך של text-emphasis
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

בעיה ב-Chromium: 361471205.

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

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

בעיה ב-Chromium: 40670442.

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

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

בדוגמת הקוד הבאה, ההצהרה העירומה אחרי הכלל המוטמע לא גורמת עכשיו ל-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.

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

בעיה ב-Chromium:‏ 328472696.

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

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

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

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

Lighthouse גרסה 12.2.1

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

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

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

בעיה ב-Chromium:‏ 772558.

פרטים שונים

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

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

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

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

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

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

• אפשר לשלוח לנו הצעה או משוב דרך crbug.com.
• מדווחים על בעיה בכלי הפיתוח באמצעות אפשרויות נוספות     > עזרה > דיווח על בעיה בכלי הפיתוח ב-DevTools.
• שליחת ציוץ אל @ChromeDevTools.
• נשמח לשמוע מה חדש: מה חדש בסרטונים של כלי הפיתוח ב-YouTube או טיפים בנושא כלי פיתוח ב-YouTube.

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

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