כלי הפיתוח הופכים לכהים, עריכת תמונות מפתח עם @keyframe והשלמה אוטומטית חכמה יותר

איך DevTools מאפשרת להקליד פחות באמצעות השלמה אוטומטית חכמה יותר במסוף, איך עורכים כללי @keyframe ישירות בחלונית Styles, איך נהנים ממשתנים מותאמים אישית של CSS ואיך מצטרפים לצד האפל.

השלמה אוטומטית חכמה יותר במסוף

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

השלמה אוטומטית

עריכה ישירה של כללי @keyframe בחלונית 'סגנונות'

כשהוספנו את כלי הבדיקה של אנימציות ואת הכלי לעריכת עקומות גמישות ל-DevTools, הם היו מוגבלים למעברים כי אף פעם לא הצגנו אנימציות CSS שמבוססות על @keyframe בחלונית 'סגנונות'. יש לי חדשות טובות: זה כבר לא המצב. בטוויט הזה תוכלו לראות תצוגה מקדימה.

תמיכה במאפייני CSS בהתאמה אישית

מאפייני CSS בהתאמה אישית בכלי הפיתוח

אנחנו מוסיפים הרבה תכונות חדשות ל-CSS, ואחת מהן היא משתנים מותאמים אישית, שיושקו ב-Chrome 49. הקפדנו לכלול תמיכה מלאה ב-DevTools, כך שאם כבר השתמשתם בעבר במשתנים ב-Sass, כדאי לנסות את המשתנים המקומיים. הם מאפשרים לערוך מאפיינים בזמן אמת בחלונית 'סגנונות' ולעדכן באופן מיידי רכיבים תלויים.

עיצוב כהה ל-DevTools

עיצוב כהה בפעולה

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

המיטב מכל השאר

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

כמו תמיד, נשמח לשמוע את דעתכם ב-Twitter או בתגובות בהמשך, ולקבל דיווחים על באגים בכתובת crbug.com/new.

עד החודש הבא!
Paul Bakaus וצוות DevTools