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

Jecelyn Yeen

Chrome 100

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

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

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

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

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

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

בעבר, בציר הזמן של Frames, כל הפריימים עם עבודה מושהית בשרשור הראשי הוצגו כ-"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

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

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

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

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