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

Jecelyn Yeen

Chrome 100

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

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

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

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

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

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

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

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

• data-testid
• data-test
• data-qa
• הצפנת נתונים
• data-test-id
• data-qa-id
• בדיקת נתונים

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1049947

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

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

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

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

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

בעיה ב-Chromium: 1261130

פרטים שונים

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

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

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

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

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

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

• אפשר לשלוח לנו הצעה או משוב דרך crbug.com.
• כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות   > עזרה > דיווח על בעיות בכלי הפיתוח ב'כלי פיתוח'.
• שליחת ציוץ אל @ChromeDevTools.
• נשמח לשמוע מה חדש בסרטונים ב-YouTube של כלי הפיתוח או בסרטונים ב-YouTube שקשורים לכלי פיתוח.

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

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