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

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

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

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

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

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

בעיה ב-Chromium: 1047356

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

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

בוחרים באפשרות More options‏ > More tools‏ > WebAuthn כדי לפתוח את הכרטיסייה WebAuthn.

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

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

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

בעיה ב-Chromium: 1034663

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

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

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

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

בעיה ב-Chromium: 1075732

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

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

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

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

בעיה ב-Chromium: 1073899

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

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

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

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

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

Lighthouse 6.4 בחלונית של Lighthouse

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

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

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

בעיה ב-Chromium: 772558

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

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

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

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

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

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

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

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

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

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

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 מוצגת עכשיו רשימה של טקסטים בדף עם ניגודיות צבעים נמוכה.

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

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

בעיה ב-Chromium: 1120316

התאמה אישית של מקשי הקיצור ב-DevTools

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

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

כדי לאפס את כל מקשי הקיצור, לוחצים על Restore default shortcuts.

בעיה ב-Chromium: 174309

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.