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

Jecelyn Yeen

Chrome 100

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

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

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

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

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

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

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

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

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

  • data-testid
  • בדיקת נתונים
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • בדיקת נתונים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1049947

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

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

בעבר, ציר הזמן 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 שקשורים לכלי פיתוח.

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 בוטל.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59