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

Jecelyn Yeen

Chrome 100

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

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

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

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

הצגה ועריכה של כללים עם @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

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

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

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

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

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

מסגרות שמוצגות באופן חלקי בחלונית &#39;ביצועים&#39;

בעיה ב-Chromium: 1261130

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

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

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

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

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

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

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

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

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