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

Jecelyn Yeen

Chrome 100

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

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

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

עכשיו אפשר לראות ולערוך את כללי ה-@supports של CSS בחלונית סגנונות. השינויים האלה מאפשרים לכם להתנסות בקלות עם כללי 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

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

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

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

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

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

מסגרות שמוצגות באופן חלקי בחלונית &#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.