מה חדש בכלי הפיתוח (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 בחלונית 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

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

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

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

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

בעיות ב-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 בחלונית האפליקציות

בעיה ב-Chromium: 1205856

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

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

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

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

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

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