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

בעיה ב-Chromium:‏ 361717594.

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

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

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

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

בעיה ב-Chromium: 350519222.

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

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

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

בעיה ב-Chromium: 328472696.

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

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

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

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

Lighthouse 12.2.1

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

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

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

בעיה ב-Chromium:‏ 772558.

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

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

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

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

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

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

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

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

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

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