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

Jecelyn Yeen

תכונה בגרסת טרום-השקה (Preview): חלונית חדשה לסקירה כללית של CSS

אפשר להשתמש בחלונית החדשה CSS Overview כדי לזהות שיפורים פוטנציאליים ב-CSS בדף. פותחים את החלונית CSS Overview ולוחצים על Capture overview כדי ליצור דוח של ה-CSS של הדף.

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

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

במאמר הזה אפשר לקרוא מידע נוסף על החלונית סקירה כללית של CSS.

חלונית הסקירה הכללית של CSS

בעיה ב-Chromium: ‏ 1254557

שחזרנו ושיפרנו את חוויית העריכה וההעתקה של אורך ה-CSS

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

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

אם נתקלתם בבעיות, אתם יכולים לדווח עליהן בכתובת goo.gle/length-feedback.

כדי להשבית את התכונה, מסמנים את תיבת הסימון Enable CSS length authoring tools in the Styles pane (הפעלת כלים ליצירת אורך של CSS בחלונית Styles) בקטע Settings (הגדרות) > Experiments (ניסויים).

בעיות ב-Chromium: 1259088, ‏ 1172993

עיבוד עדכונים בכרטיסייה

יצירת אמולציה של prefers-contrast לתכונת מדיה של CSS

יצירת אמולציה של prefers-contrast לתכונת מדיה של CSS

תכונת המדיה prefers-contrast משמשת כדי לזהות אם המשתמש ביקש ניגודיות גבוהה או נמוכה יותר בדף.

פותחים את תפריט הפקודות, מריצים את הפקודה Show Rendering (הצגת עיבוד) ואז מגדירים את התפריט הנפתח Emulate CSS media feature prefers-contrast (יצירת אמולציה של מדיה של CSS עם העדפה לניגודיות).

בעיה ב-Chromium: ‏ 1139777

אמולציה של התכונה 'עיצוב כהה אוטומטי' ב-Chrome

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

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

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

אמולציה של התכונה 'עיצוב כהה אוטומטי' ב-Chrome

בעיה ב-Chromium: ‏ 1243309

העתקת הצהרות כ-JavaScript בחלונית Styles (סגנונות)

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

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

לדוגמה, הקוד הבא יעתיק את paddingLeft: '1.5rem' ללוח.

העתקת ההצהרה כ-JavaScript

בעיה ב-Chromium: ‏ 1253635

כרטיסייה חדשה של מטען ייעודי (Payload) בחלונית הרשת

כדי לבדוק בקשת רשת עם מטען ייעודי (payload), אפשר להשתמש בכרטיסייה החדשה Payload בחלונית Network. בעבר, פרטי המטען היו זמינים בכרטיסייה Headers.

הכרטיסייה 'מטען ייעודי' בחלונית 'רשת'

בעיה ב-Chromium: ‏ 1214030

שיפרנו את התצוגה של הנכסים בחלונית 'נכסים'

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

בנוסף לשיפורים בחלונית מאפיינים ב-Chrome 95, עכשיו קל יותר לאתר את המאפיינים הרלוונטיים.

הצגת המאפיינים בחלונית Properties

בעיה ב-Chromium: ‏ 1226262

עדכונים ב-Console

אפשרות להסתיר שגיאות CORS במסוף

אפשר להסתיר שגיאות CORS במסוף. עכשיו שגיאות CORS מדווחות בכרטיסייה 'בעיות', אפשר להסתיר את שגיאות ה-CORS במסוף כדי לצמצם את העומס.

במסוף, לוחצים על סמל ההגדרות ומבטלים את הסימון בתיבת הסימון הצגת שגיאות CORS במסוף.

אפשרות להסתיר שגיאות CORS במסוף

בעיה ב-Chromium: ‏ 1251176

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

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

אובייקטים של Intl במסוף

בעיה ב-Chromium: ‏ 1073804

דוחות קריסות אסינכרוניים עקביים

המסוף מציג עכשיו async עקבות מחסנית (stack traces) עבור async פונקציות, כדי לשמור על עקביות עם משימות אסינכרוניות אחרות ועם מה שמוצג במחסנית הקריאות.

דוחות קריסות אסינכרוניים

בעיה ב-Chromium: ‏ 1254259

השארת סרגל הצד של המסוף

סרגל הצד של המסוף יישאר. ב-Chrome 94, הודענו על הוצאה משימוש של סרגל הצד של המסוף וביקשנו מהמפתחים לשלוח לנו משוב ולהעלות חששות.

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

סרגל הצד של המסוף

בעיות ב-Chromium: ‏ 1232937, ‏ 1255586

החלונית Application cache הוצאה משימוש בחלונית Application

החלונית Application cache בחלונית Application הוסרה עכשיו, כי התמיכה ב-AppCache הוסרה מ-Chrome ומדפדפנים אחרים שמבוססים על Chromium.

בעיה ב-Chromium: ‏ 1084190

‫[Experimental] חלונית חדשה של Reporting API בחלונית Application

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

אם הניסוי הזה מופעל, אפשר לראות את סטטוס הדוחות בחלונית Reporting API החדשה בחלונית Application.

חשוב לדעת שהקטע Endpoints (נקודות קצה) עדיין נמצא בפיתוח פעיל (ולכן לא מוצגות בו נקודות קצה לדיווח).

במאמר הזה מפורט מידע נוסף על Reporting API.

החלונית Reporting API בחלונית Application

בעיה ב-Chromium: ‏ 1205856

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

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

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

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

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

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

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