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

כלים חדשים לניפוי באגים ברשת CSS

עכשיו יש בכלי הפיתוח תמיכה טובה יותר בניפוי באגים ברשת של CSS.

ניפוי באגים ברשת CSS

כאשר מוחלים על רכיב HTML בדף שלך display: grid או display: inline-grid, יופיע לידו התג grid בחלונית רכיבים. לחצו על התג על מנת להחליף את התצוגה של שכבת-על של רשת בדף.

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

מידע נוסף זמין במסמכי התיעוד.

בעיה ב-Chromium: 1047356

כרטיסיית WebAuthn חדשה

מעכשיו אפשר לבצע אמולציה של מאמתי אימות ולנפות באגים ב-Web Authentication API באמצעות הכרטיסייה WebAuthn החדשה.

בוחרים באפשרות אפשרויות נוספות > כלים נוספים > WebAuthn כדי לפתוח את הכרטיסייה WebAuthn.

הכרטיסייה WebAuthn

לפני הכרטיסייה החדשה WebAuthn, לא הייתה תמיכה מובנית בניפוי באגים ב-WebAuthn ב-Chrome. המפתחים היו זקוקים לאימותים פיזיים כדי לבדוק את אפליקציית האינטרנט שלהם באמצעות Web Authentication API.

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

אפשר לעיין במסמכי התיעוד שלנו כדי לקבל מידע נוסף על התכונה WebAuthn.

בעיה ב-Chromium: 1034663

העברת כלים בין החלונית העליונה לחלונית התחתונה

כלי הפיתוח תומכים עכשיו בהעברת כלים ב'כלי פיתוח' בין החלונית העליונה לחלונית התחתונה. כך תוכלו להציג שני כלים בו-זמנית.

לדוגמה, על מנת להציג בבת אחת את החלונית Elements ו-Sources, אפשר ללחוץ לחיצה ימנית על החלונית Sources ולבחור באפשרות Move to מטה על מנת להעביר אותה לתחתית הרשימה.

העברה לתחתית הרשימה

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

העברה לראש הרשימה

בעיה ב-Chromium: 1075732

עדכונים של חלונית הרכיבים

מציגים את חלונית סרגל הצד 'Computed' בחלונית 'סגנונות'

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

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

חלונית סרגל הצד הממוחשבת

בעיה ב-Chromium: 1073899

קיבוץ של מאפייני CSS בחלונית Computed

עכשיו אפשר לקבץ את נכסי ה-CSS לפי קטגוריות בחלונית Computed.

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

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

קיבוץ של מאפייני CSS

בעיות ב-Chromium: 1096230, 1084673, 1106251

Lighthouse 6.4 בחלונית Lighthouse

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

מגדלור

ביקורות חדשות בגרסה 6.4 של Lighthouse:

  • טעינה מראש של גופנים. הפונקציה בודקת אם כל הגופנים שנעשה בהם שימוש ב-font-display: optional נטענו מראש.
  • מפות מקור חוקיות. מתבצעת בדיקה אם לדף יש מפות מקור חוקיות עבור JavaScript גדול של צד ראשון.
  • [ניסיוני] ספריית JavaScript גדולה. ספריות JavaScript גדולות עלולות להוביל לביצועים נמוכים. הביקורת מציעה חלופות זולות יותר לספריות JavaScript גדולות ונפוצות כמו moment.js.

בעיה ב-Chromium: 772558

performance.mark() אירועים בקטע 'תזמונים'

בקטע תזמונים של הקלטת ביצועים מסומנים עכשיו performance.mark() אירועים.

אירועי Performance.mark

מסננים חדשים מסוג resource-type ו-url בחלונית 'רשת'

משתמשים במילות המפתח resource-type ו-url החדשות בחלונית 'רשת' כדי לסנן את בקשות הרשת.

לדוגמה, אפשר להשתמש ב-resource-type:image כדי להתמקד בבקשות הרשת שהן תמונות.

מסנן לפי סוג המשאב

בעזרת בקשות סינון לפי מאפיינים תוכל לגלות מילות מפתח מיוחדות נוספות, כמו resource-type ו-url.

בעיות ב-Chromium: 1121141, 1104188

עדכונים לגבי הצגת פרטי המסגרת

הצגת נקודות הקצה COEP ו-COOP reporting to

עכשיו אפשר לראות את מדיניות ההטמעה ממקורות שונים (COEP) ואת מדיניות הקצה של Cross-Origin Opener Policy (COOP)reporting to בקטע Security & Isolation.

ב-Reporting API מוגדר כותרת HTTP חדשה בשם Report-To, שמאפשרת למפתחי אתרים לציין את נקודות הקצה של השרת שאליהן הדפדפן ישלח אזהרות ושגיאות.

מתבצע דיווח לנקודת הקצה

במאמר הזה מוסבר איך מפעילים COEP ו-COOP ואיך הופכים את האתר ל"מבודד ממקורות שונים".

בעיה ב-Chromium: 1051466

הצגה של מצב report-only COEP ו-COOP

בכלי הפיתוח מוצגת עכשיו התווית report-only עבור COEP ו-COOP שמוגדרים למצב report-only.

תווית לדוח בלבד

צפו בסרטון הזה כדי ללמוד כיצד למנוע דליפות מידע ולהפעיל COOP ו-COEP באתר שלכם.

בעיה ב-Chromium: 1051466

הוצאה משימוש של Settings בתפריט 'כלים נוספים'

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

הגדרות בחלונית הראשית

בעיה ב-Chromium: 1121312

תכונות ניסיוניות

הצגה ותיקון של בעיות ניגודיות של צבעים בחלונית הסקירה הכללית של CSS

בחלונית סקירה כללית של CSS מוצגת עכשיו רשימה של טקסטים בדף עם ניגודיות צבעים נמוכה.

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

בעיות של ניגודיות צבעים נמוכה

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

בעיה ב-Chromium: 1120316

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

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

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

התאמה אישית של מקשי הקיצור

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

בעיה ב-Chromium: 174309

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

כדאי להשתמש ב-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