כאן אפשר ללמוד איך כלי הפיתוח עוזרים להפחית את כמות ההקלדה באמצעות השלמה אוטומטית חכמה יותר במסוף, איך לערוך כללים של @keyframe ישירות בחלונית הסגנונות, איך ליהנות ממשתנים מותאמים אישית של CSS ואיך להצטרף לצד האפל.
השלמה אוטומטית חכמה יותר במסוף
אם אתם כמוני ורבים אחרים, אתם מקלידים פקודה במסוף כדי לנפות באגים באפליקציה, רואים שהיא לא פועלת, חוזרים על הפעולות ומקלידים אותה שוב, שוב ושוב. כדי לעזור בכך, אנחנו משלימים עכשיו באופן אוטומטי הצהרות מלאות שהזנת בעבר, למשל:
עריכה ישירה של כללים מסוג @keyframe בחלונית הסגנונות
כשהוספנו ל-DevTools כלי לבדיקת האנימציה את הכלי לבדיקת האנימציה והשקנו את הכלי לעריכת התאמות, הוא הוגבל למעברים כי אף פעם לא הצגנו אנימציות CSS מבוססות @keyframe בחלונית הסגנון. אני שמח לומר שעכשיו זה כבר עבר, אז תתפרע! לצפייה בתצוגה מקדימה, ניתן לצפות בציוץ בסרטון שלנו.
תמיכה בנכסי CSS בהתאמה אישית
ב-CSS יש הרבה יתרונות, ואחד מהם הוא משתנים מותאמים אישית, שיושקו ב-Chrome 49. הקפדנו לכלול תמיכה מלאה בכלי הפיתוח, כך שאם השתמשתם בעבר במשתנים ב-Sass, כדאי לנסות את המשתנים המקוריים, מאחר שהם מאפשרים לערוך מאפיינים במהירות בחלונית הסגנונות ולעדכן באופן מיידי רכיבים תלויים.
עיצוב כהה לכלי הפיתוח
סוף סוף נעתרנו לבקשה ששמענו עליה עשרות פעמים בשנתיים האחרונות: עכשיו אפשר לבחור את הצד האפל בכלי פיתוח. נכנסים להגדרות של כלי הפיתוח, מגדירים את העיצוב למצב כהה ונהנים. לדעתי, האתר עדיין בגרסת בטא כי חלק גדול ממנו נוצר באופן אוטומטי, אז אם אתם נתקלים בתחומים שבהם אפשר לשפר את הביצועים, כדאי להודיע לנו.
כל השאר
- חלונית ההזזה של המסוף מתכווצת עכשיו באופן אוטומטי כשלוחצים על כרטיסיית המסוף המלאה.
- הוספנו לעץ הקבצים ב'מקורות' גרסה משופרת של סמלים חדשים ופונקציונליות קיבוץ חדשה
כמו תמיד, שלחו לנו משוב דרך Twitter או דרך התגובות שלמטה, ושלחו באגים אל crbug.com/new.
עד החודש הבא!
פול באקאוס וצוות כלי הפיתוח