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

Chrome 100

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

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

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

עכשיו אפשר להציג ולערוך את הכללים הכלליים ל-@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 בגרסה 13_2_3. (1289553)
  • עכשיו אפשר לשמור קטע קוד ישירות כקובץ JavaScript. בעבר היה צורך לצרף סיומת קובץ .js באופן ידני. (1137218)
  • בחלונית מקורות מוצגים עכשיו שמות של משתני היקף בצורה תקינה במהלך ניפוי באגים באמצעות מפת המקור. בעבר, בחלונית מקורות מוצגים שמות של משתני היקף מוקטנים, על אף שסופקה מפת מקור. (1294682)
  • החלונית מקורות משחזרת עכשיו את מיקום הגלילה בצורה נכונה בטעינת הדף. בעבר, המיקום לא שוחזר כראוי, ולכן אי אפשר לבצע ניפוי באגים. (1294422)

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

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

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

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

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

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

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

Chrome 123

גרסה 122 של Chrome

גרסה 121 של Chrome

Chrome 120

גרסה 119 של Chrome

גרסה 118 של Chrome

גרסה 117 של Chrome

גרסה 116 של Chrome

Chrome 115

Chrome 114

גרסה 113 של Chrome

גרסה 112 של Chrome

גרסה 111 של Chrome

Chrome 110

Chrome 109

גרסה 108 של Chrome

גרסה 107 של Chrome

Chrome 106

Chrome 105

Chrome 104

גרסה 103 של Chrome

גרסה 102 של Chrome

גרסה 101 של Chrome

Chrome 100

גרסה 99 של Chrome

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

גרסה 92 של Chrome

גרסה 91 של Chrome

Chrome 90

גרסה 89 של Chrome

גרסה 88 של Chrome

גרסה 87 של Chrome

גרסה 86 של Chrome

גרסה Chrome 85

גרסה 84 של Chrome

גרסה 83 של Chrome

גרסה 82 של Chrome

Chrome 82 בוטל.

גרסה 81 של Chrome

גרסה 80 של Chrome

גרסה 79 של Chrome

גרסה 78 של Chrome

גרסה 77 של Chrome

גרסה 76 של Chrome

גרסה 75 של Chrome

גרסה 74 של Chrome

גרסה 73 של Chrome

גרסה 72 של Chrome

גרסה 71 של Chrome

גרסה 70 של Chrome

גרסה Chrome 68

Chrome גרסה 67

Chrome 66

גרסה Chrome 65

Chrome 64

Chrome 63

גרסה 62 של Chrome

גרסה 61 של Chrome

Chrome 60

Chrome 59