איך כלי הפיתוח עוברים לנייד קודם, עם מצב מכשיר חדש ויעיל שפועל תמיד. אתם יכולים להשתמש בלחצני הצבעים כדי להוסיף צבעים לבוררי הבחירה במהירות, ולגלות מה צפוי בקרוב ב-DevTools.
הצצה לעתיד הכתיבה
אנחנו חוזרים עכשיו מכנס Chrome Dev Summit, שבו הראיתי לכם איך נראית העבודה עם DevTools היום ובעתיד. בדרך כלל אני לא מזכיר בתקציר הזה תכונות שעדיין נמצאות בניסוי או תכונות שעדיין נמצאות בתהליך פיתוח, אבל הפעם אעשה חריגה. אם אין לכם זמן לצפות בהרצאה כולה, הנה הסיכום:
מצב המכשיר גרסה 2
אנחנו עדיין עובדים קשה על הגרסה החדשה והנועזת הזו של מצב המכשיר, אבל רצינו לתת לכולם הזדמנות לנסות אותה, ולכן הפעלנו אותה היום ב-Canary. בעזרת השינויים האלה, אנחנו מקדמים את DevTools לעתיד שמתמקד בניידים, שבו פיתוח לנייד הוא ברירת המחדל ופיתוח למחשב הוא 'תוסף'. בשבועות הקרובים נמשיך לבצע שינויים, ובסיום נפרוס פוסט מפורט בבלוג.
בדיקה יעילה של אנימציות
התכונה בדיקת אנימציה, שעדיין נמצאת בפיתוח, מספקת תמונה מלאה ומפורטת של מה שקורה בכל דבר שזז. במקום להציג מעבר על רכיב אחד בכל פעם, הוספנו שיטות ניתוח שמקבצות אנימציות מורכבות כדי שתוכלו להתמקד בכל מה שאתם רואים. כדאי לצפות בסרטון. כשהשקת התכונה תסתיים, נפרוס פוסט בבלוג גדול יותר ועמודה עצמאית.
מצב פריסה (טעימה ראשונית)
מצב הפריסה החדש עדיין לא מוכן לשימוש, אבל הוא מבטיח מאוד. אני לא יכול לחכות לרגע שבו הוא יושלם. מצב הפריסה מוסיף ל-DevTools יכולות עריכה מסוג WYSIWYG לכל רכיב בדף. עד כה, אפשר לערוך את הגובה, הרוחב, הריפוד והשוליים בהקשר. ייקח עוד קצת זמן עד שנהיה מוכנים לאפשר לך לנסות, אבל נעדכן אותך.
יצירת פרופיל ביצועים באמצעות חלונית ציר הזמן המעודכנת
כחלק מהמאמץ להציג את מודל הביצועים החדש RAIL, ביצענו מאות שינויים קטנים וגדולים בחלונית ציר הזמן. השינויים האלה משנים ומשופרים את התמונה הכוללת של יצירת פרופילים של ביצועים. לכן, במקום להציג כל שינוי בנפרד, פול אירי (Paul Irish) שלנו הראה לנו איך לנפות באגים בצורה נכונה בביצועים של אתר, במקרה הזה האתר לנייד של Hotel Tonight, בשידור חי על הבמה. בין התכונות החדשות שנוספו: סרטוני טעינה וביצועים, מפל הרשת המצורף, סיכום בתצוגת עץ והיכולת להציג עלויות ביצועים לפי דומיין וקובץ.
הוספת צבעי חזית ורקע לכל רכיב בקלות
בכל פעם שרצית להוסיף לאלמנט מאפיין background-color או color, לא היית יכול פשוט לפתוח את בורר הצבעים. במקום זאת, רובכם מקלידים משהו כמו 'background: red;' בכל פעם כדי שהסמל של בוחר הצבעים יופיע, ואז בוחרים את הצבע הרצוי.
חשבנו שאפשר לפשט את התהליך. הוספנו שני לחצנים שימושיים שמופיעים כשמעבירים את העכבר מעל הפינה השמאלית התחתונה של בורר, ומאפשרים להוסיף צבע ולהציג את הבורר בלחיצה אחת:
המיטב מכל השאר
- בעבר, הרבה מקום במסך של חלונית הסגנון היה מנוצל לריק על ידי הצגת סוגים כלליים של מדיה. עכשיו אנחנו מסתירים את הדברים האלה לפני הבוררים שלכם, אם הם לא חריגים.
- עכשיו אפשר להעביר את העכבר מעל סלקטור CSS בחלונית הסגנונות כדי לראות כמה אלמנטים בדף הוא חל עליהם.
- עדיין לא ויתרתם על ההדפסה? הדמיית מדיה להדפסה עדיין קיימת כדי שתוכלו לראות איך הדף ייראה אחרי ההדפסה – רק העברנו אותה להגדרות הרינדור.
- כשבוחרים רכיב לבדיקה, עכשיו אנחנו מרחיבים ומסיימים באופן אוטומטי את עץ המשנה הרלוונטי של ה-DOM. קשה להסביר, רואים ורק אז מאמינים.
כמו תמיד, נשמח לשמוע את דעתכם ב-Twitter או בתגובות בהמשך, ולקבל דיווחים על באגים בכתובת crbug.com/new.
עד החודש הבא!
Paul Bakaus וצוות DevTools