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

כלים חדשים לניפוי באגים ב-CSS Grid

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

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

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

מידע נוסף זמין במאמרי העזרה.

בעיה ב-Chromium: ‏ 1047356

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1034663

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

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

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

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

בעיה ב-Chromium: ‏ 1075732

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

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

עכשיו אפשר להפעיל או להשבית את החלונית Computed sidebar בחלונית Styles.

החלונית Computed sidebar בחלונית Styles מכווצת כברירת מחדל. לוחצים על הלחצן כדי להפעיל או להשבית אותו.

בעיה ב-Chromium: ‏ 1073899

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

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

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

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

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

‫Lighthouse 6.4 בחלונית Lighthouse

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

ביקורות חדשות ב-Lighthouse 6.4:

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

בעיה ב-Chromium: ‏ 772558

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

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

מסננים חדשים של resource-type ו-url בחלונית Network (רשת)

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

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

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

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

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

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

עכשיו אפשר לראות את נקודת הקצה של מדיניות ההטמעה ממקורות שונים (COEP) ומדיניות הפתיחה ממקורות שונים (COOP)reporting to בקטע אבטחה ובידוד.

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

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

בעיה ב-Chromium: ‏ 1051466

הצגת מצב COEP ו-COOP report-only

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

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

בעיה ב-Chromium: ‏ 1051466

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

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

בעיה ב-Chromium: ‏ 1121312

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

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

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

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

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

בעיה ב-Chromium: ‏ 1120316

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

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

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

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

בעיה ב-Chromium: 174309

הורדת ערוצי התצוגה המקדימה

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

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

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

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

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

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