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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 362672528.

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

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

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

בעיה ב-Chromium: ‏ 361717594.

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

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

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

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

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

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

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

ניווט בנתיבי הניווט

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

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

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

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

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

בעיה ב-Chromium: ‏ 350519222.

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

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

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

בעיה ב-Chromium: 350519222.

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

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

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

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

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

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

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

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

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

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

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

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

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