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

Jecelyn Yeen

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

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

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

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

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

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

בעיה ב-Chromium: 1254557

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

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

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

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

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

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

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

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

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

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

פותחים את תפריט הפקודה, מריצים את הפקודה הצגת רינדור ומגדירים את התפריט הנפתח Emuate Media Medias-contrast (התאמה של תכונת מדיה של CSS).

בעיה ב-Chromium: 1139777

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

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

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

פותחים את תפריט הפקודות, מריצים את הפקודה הצגת הרינדור ומגדירים את התפריט הנפתח Emuate Auto-Dark mode (המצב הכהה האוטומטי).

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

בעיה ב-Chromium: 1243309

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

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

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

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

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

בעיה ב-Chromium: 1253635

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

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

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

בעיה ב-Chromium: 1214030

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

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

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

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

בעיה ב-Chromium: 1226262

עדכוני מסוף

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

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

במסוף, לוחצים על סמל Settings (הגדרות) ומבטלים את הסימון בתיבה Show CORS errors in console.

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

בעיה ב-Chromium: 1251176

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

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

אובייקטים בינלאומיים במסוף

בעיה ב-Chromium: 1073804

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

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

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

בעיה ב-Chromium: 1254259

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

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

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

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

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

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

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

בעיה ב-Chromium: 1084190

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

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

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

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

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

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

בעיה ב-Chromium: 1205856

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

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

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

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

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

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

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