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