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

Jecelyn Yeen

תכונת תצוגה מקדימה: חלונית סקירה כללית חדשה של CSS

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

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

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

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

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

בעיה ב-Chromium: 1254557

חוויית עריכה והעתקה משופרת של אורך CSS

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

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

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

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

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

רינדור של עדכוני כרטיסיות

יצירת אמולציה של התכונה 'העדפה לניגודיות' ב-CSS

יצירת אמולציה של התכונה של מדיה ב-CSS עם העדפה לניגודיות

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

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

בעיה ב-Chromium: 1139777

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

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

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

פותחים את תפריט הפקודות, מריצים את הפקודה Show Rendering (הצגת העיבוד) ומגדירים את התפריט הנפתח Emulate auto dark mode (הדמיה של מצב כהה אוטומטי).

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

בעיה ב-Chromium: 1243309

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

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

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

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

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

בעיה ב-Chromium: 1253635

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

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

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

בעיה ב-Chromium: 1214030

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

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

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

הצגת הנכסים בחלונית 'נכסים'

בעיה ב-Chromium: 1226262

עדכונים במסוף

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

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

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

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

בעיה ב-Chromium: 1251176

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

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

אובייקטים מסוג Intl במסוף

בעיה ב-Chromium: 1073804

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

מעכשיו, מסומנים ב-Console async מעקבים אחר סטאק לפונקציות async כדי שיתאימו למשימות אסינכרניות אחרות, ויהיו עקביים עם מה שמוצג ב-Call Stack.

מעקב אסינכרוני של קריאות

בעיה ב-Chromium: 1254259

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

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

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

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

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

חלונית Application cache (מטמון של אפליקציה) שהוצאה משימוש בחלונית Application (אפליקציה)

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

בעיה ב-Chromium: 1084190

[ניסיוני] חלונית חדשה של Reporting API בחלונית האפליקציות

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

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

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

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

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

בעיה ב-Chromium: 1205856

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

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

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

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

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

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