תקציר של DevTools (מהדורת CDS): הצצה לעתיד ופרופיל RAIL

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

הצצה לעתיד של הכתיבה

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

מצב המכשיר גרסה 2

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

בדיקת אנימציה עוצמתית

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

מצב פריסה (הצצה חטופה)

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

יצירת פרופילים של ביצועים באמצעות החלונית המעודכנת של ציר הזמן

כחלק ממאמץ נרחב יותר של הצגת מודל הביצועים החדש של RAIL, ביצענו מאות שינויים קטנים וגדולים יותר בחלונית ציר הזמן, שיחד הם שינו ומשפרים במידה מסוימת את הסיפור של פרופיל הביצועים. לכן, במקום להראות כל שינוי בנפרד, פול אירי (Paul Ireland) שלנו הראה לנו איך לנפות באגים בצורה נכונה בביצועים של אתר מסוים: במקרה הזה, האתר לנייד של Hotel Tonight, מוצג על במה. התכונות החדשות שהושקו כוללות רצועות של סרט טעינה וביצועים, Waterfall של הרשת הכלולה, סיכום התצוגה ואפשרות להציג עלויות ביצועים לפי דומיין וקובץ.

קל להוסיף צבעים של רקע וחזית לכל אלמנט

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

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

הטוב ביותר

  • בחלונית הסגנון בזבזנו הרבה על נדל"ן קודם, על ידי הצגת סוגי מדיה גנריים. עכשיו אנחנו מסתירים את הדברים האלה לפני הבוררים, אם זה לא חריג.
  • עכשיו אתם יכולים להעביר את העכבר מעל סלקטור ב-CSS בחלונית הסגנון כדי לראות כמה רכיבים בדף הוא רלוונטי.
  • עדיין לא וותרת על ההדפסה? הדמיית מדיה מודפסת עדיין זמינה כדי לראות איך הדף ייראה כאשר תודפס – העברנו אותו להגדרות העיבוד.
  • עכשיו, כשבוחרים רכיב לבדיקה, אנחנו מרחיבים וסוגרים באופן אוטומטי את עץ המשנה DOM הרלוונטי. קשה להסביר את זה, זה להאמין.

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

עד לחודש הבא!
פול בקאוס וצוות כלי הפיתוח