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

Jecelyn Yeen

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

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

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

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

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

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

בעיה ב-Chromium: 1047356

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

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

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

הכרטיסייה WebAuthn

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

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

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

בעיה ב-Chromium: 1034663

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

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

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

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

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

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

בעיה ב-Chromium: 1075732

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

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

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

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

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

בעיה ב-Chromium: 1073899

קיבוץ של נכסי CSS בחלונית המחושבת

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

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

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

קיבוץ של נכסי CSS

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

Lighthouse גרסה 6.4 בחלונית Lighthouse

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

Lighthouse

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

  • טעינה מראש של גופנים. הפונקציה בודקת אם כל הגופנים שמשתמשים ב-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) ובמדיניות בנושא פותחנים ממקורות שונים (COOP)reporting to בקטע Security & & הקטע 'בידוד'.

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

דיווח לנקודת קצה

במאמר הזה מוסבר איך מפעילים COEP ו-COOP ויוצרים אתר 'cross-origin מבודדd'.

בעיה ב-Chromium: 1051466

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

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

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

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

בעיה ב-Chromium: 1051466

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

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

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

בעיה ב-Chromium: 1121312

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

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

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

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

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

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

בעיה ב-Chromium: 1120316

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

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

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

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

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

בעיה ב-Chromium: 174309

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

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

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

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

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

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

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