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

Sofia Emelianova

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

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

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

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

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

כדי להחזיר את העיצוב הישן של המסננים, מבטלים את הסימון של הגדרות הגדרות > ניסויים > Redesign of the filter bar in the Network panel check_box_outline_blank.

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

בעיה ב-Chromium: ‏ 362672528.

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

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

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

בעיה ב-Chromium: ‏ 361717594.

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

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

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

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

• text-emphasis shorthand
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

בעיה ב-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.

בעיה ב-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: אופטימיזציה של מהירות האתר.

בעיה ב-Chromium: ‏ 772558.

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

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

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

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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