מה חדש בכלי הפיתוח (Chrome 100)

Jecelyn Yeen

‫Chrome 100

ברכות על הגעתך לגרסה ה-100 של Chrome! כלי הפיתוח ל-Chrome ימשיכו לספק למפתחים כלים אמינים לפיתוח באינטרנט. כדאי להקדיש רגע וללחוץ על הכרטיסייה מה חדש כדי לראות את אבני הדרך.

כמו תמיד, אפשר לצפות בסרטון האחרון What’s New in DevTools בלחיצה על התמונה.

הצגה ועריכה של כללי @supports בחלונית Styles

עכשיו אפשר לראות ולערוך את כללי ה-CSS @supports בלוח Styles. השינויים האלה מאפשרים לבצע ניסויים עם כללי ה-at בזמן אמת. פותחים את דף ההדגמה, בודקים את רכיב <div class=”box”>, ומציגים את כללי ה-@ בחלונית Styles.@supports לוחצים על ההצהרה של הכלל כדי לערוך אותו.

הצגה ועריכה של כללי @supports

בעיות ב-Chromium: 1222574, ‏ 1222573

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

תמיכה בבוררים נפוצים כברירת מחדל

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

  • data-testid
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • data-testing

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

לדוגמה, מתחילים הקלטה חדשה עם דף ההדגמה הזה. ממלאים כתובת אימייל ומתבוננים בערך של הבורר.

מאחר שהמאפיין data-testid מוגדר ברכיב האימייל, הוא משמש כבורר באופן אוטומטי במקום המאפיינים id או class.

תמיכה בבוררים נפוצים כברירת מחדל

התאמה אישית של הבורר של ההקלטה

אם אתם לא משתמשים בבוררים נפוצים, אתם יכולים להתאים אישית את הבורר של הקלטה.

לדוגמה, בדף ההדגמה הזה נעשה שימוש במאפיין data-automate כבורר. מתחילים הקלטה חדשה ומזינים את data-automate כמאפיין הבורר. ממלאים כתובת אימייל ומתבוננים בערך של הסלקטור ([data-automate=email-address]).

התאמה אישית של הבורר של ההקלטה

התוצאה של הבחירה בבורר המותאם אישית

שינוי השם של ההקלטה

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

שינוי השם של ההקלטה

תצוגה מקדימה של מאפייני כיתה או פונקציה כשמעבירים את העכבר מעליהם

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

תצוגה מקדימה של מאפייני כיתה או פונקציה כשמעבירים את העכבר מעליהם

בעיה ב-Chromium: ‏ 1049947

מסגרות שמוצגות באופן חלקי בחלונית הביצועים

בתיעוד הביצועים מוצגת עכשיו קטגוריה חדשה של פריימים, Partially presented frames (פריימים שמוצגים באופן חלקי), בציר הזמן Frames (פריימים).

בעבר, בציר הזמן של Frames, כל הפריימים עם עבודה מושהית ב-main-thread הוצגו כ-dropped frames. עם זאת, יש מקרים שבהם חלק מהמסגרות עדיין יכולות ליצור עדכונים חזותיים (למשל, גלילה) שמופעלים על ידי השרשור של מנהל הקומפוזיציה.

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

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

מסגרות שמוצגות באופן חלקי בחלונית הביצועים

בעיה ב-Chromium: ‏ 1261130

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

ריכזנו כאן כמה מהתיקונים הבולטים בגרסה הזו:

  • מחרוזות סוכן המשתמש של אייפון עודכנו עבור מכשירים מדומיים. בכל גרסאות האייפון מגרסה 5 ואילך, מחרוזת ה-User-Agent כוללת את iPhone OS 13_2_3. (1289553)
  • עכשיו אפשר לשמור קטע קוד ישירות כקובץ JavaScript. בעבר היה צריך להוסיף את סיומת הקובץ .js באופן ידני. (1137218)
  • בחלונית Sources מוצגים עכשיו בצורה נכונה שמות של משתני היקף כשמבצעים ניפוי באגים באמצעות מפת מקור. בעבר, בחלונית Sources הוצגו שמות מוקטנים של משתני היקף למרות שסופקה מפת מקור. (1294682)
  • החלונית מקורות משחזרת עכשיו את מיקום הגלילה בצורה נכונה בטעינת הדף. בעבר, המיקום לא שוחזר בצורה נכונה, מה שגרם לבעיות בניפוי הבאגים. (1294422)

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

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

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

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

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

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