זה היה חודש עשיר בתכונות ב-Chrome Canary. בהמשך מוסבר איך לזהות סקריפטים של צד שלישי שגורמים לבעיות בביצועים באתר באמצעות פרטים מצטברים בציר הזמן, איך לבחור צבעים עקביים באמצעות לוח הצבעים החדש, איך לדמות חיבור Wi-Fi בכנס באמצעות פרופי רשת מותאמים אישית ואיך להפיק יותר תועלת מממשק המשתמש של DevTools באמצעות התפריט הראשי החדש והסברונים קצרים משופרים.
זיהוי מדויק יותר של בעיות בביצועים: פרטים מצטברים בציר הזמן
באתרים של היום אנחנו משתמשים יותר ויותר בשירותי צד שלישי של מודעות, ניתוח נתונים, רשתות חברתיות, טעינת גופנים וחיישנים (beacons), לפעמים יותר מדי. כדי למנוע זאת ולתת לכם תמונה ברורה יותר של הבעיה, אנחנו מוסיפים לכרונולוגיה פרטים מצטברים.
בכרטיסייה Aggregated Details אפשר להתמקד רק בפונקציות יקרות או בעץ הקריאה כולו, ואז לפלח את הנתונים שנבחרו לפי דומיין, דומיין משנה או כתובות URL נפרדות. לדוגמה, בציר הזמן של טעינת הדף שלמעלה, עכשיו אפשר לשייך בקלות עיכובים לסקריפטים של צד שלישי שמגיעים מדומיינים כמו facebook.net או twitter.com.
תפריט ראשי חדש ומותאם אישית
כדי להפחית את העומס בסרגל הכלים הראשי, העברנו את התיקייה, ההגדרות ואת הסמלים של העגינה לתפריט ראשי חדש ומסודר.
באופן ספציפי, העגינה נעשתה הרבה יותר פשוטה. במקום ללחוץ לחיצה ארוכה על הסמל הקודם, לכל מיקום עגינה יש סמל משלו.
בנוסף להצמדה, הוספנו חיפוש קבצים, קיצורי דרך ועזרה לגישה מהירה (שמובילה אל דף הבית החדש שלנו).
הצגת כלי הפיתוח באמצעות טיפים משופרים
יש לנו הרבה לחצנים בכלי הפיתוח, ואנחנו יודעים שלא כולם מובנים מאליהם. עכשיו קל יותר לגלות פעולות ואת קיצורי הדרך שלהן, כי החלפנו את ההסברים הקצרים המובנים במערכת בהסברים מותאמים אישית ועקביים בפלטפורמה.
חלוניות העזרה החדשות מופיעות מהר יותר ומכילות מקשי קיצור (אם יש כאלה).
יצירת פרופילים מותאמים אישית של הגבלת רוחב פס
אם אפשרויות ברירת המחדל של הכלי לניהול קצב התעבורה ברשת מגבילות מדי את התרחישים שלכם לשימוש, ואתם צריכים אפשרות 'Wi-Fi לישיבות' או, מטעמי נוסטלגיה, אתם רוצים לחזור לימי הזוהר ולהשתמש בקו 110 בוד (baud), יש לי חדשות טובות בשבילכם. הוספנו חלונית הגדרות חדשה שמאפשרת לבצע את כל הפעולות האלה.
לוחות צבעים אוטומטיים, לוחות צבעים של עיצוב חדשני תלת-ממדי ולוחות צבעים בהתאמה אישית
לא משנה אם אתם רוצים ליצור מחדש צבעי קסם או לעבוד עם לוח צבעים קיים, בורר הצבעים המשופר עוזר לבחור לוח צבעים עקבי לאתר שלכם.
לוחצים על סמל המתג הקטן שליד הצבעים ובוחרים אחת מהאפשרויות הבאות:
- צבעי דף – לוח הצבעים הזה נוצר באופן אוטומטי מהצבעים שאנחנו מוצאים ב-CSS, ולכן הוא אופציה נהדרת אם אתם מרחיבים אתר קיים.
- עיצוב חומר — הלוח של עיצוב החומר מציע צבעים יפהפיים מהקופסה, וממש אידיאלי כשמתחילים פרויקט חדש. כרגע אפשר למצוא את כל צבעי היסוד, אבל בקרוב נשיק אותם בכל הגוונים.
- מותאם אישית – זהו מגרש המשחקים שלכם. כדי להוסיף צבעים חדשים, בוחרים צבע בבורר ולוחצים על סמל הפלוס לצד הצבעים. כדי לשנות את הסדר, גוררים אותם, ולוחצים לחיצה ימנית כדי להציג אפשרויות נוספות, כמו הסרה.
ספרו לנו מה דעתכם, ואיך נוכל להרחיב את הסיפור הצבעוני.
הטובים מבין השאר
- בקשות שנשלחות באמצעות fetch() API מוצגות עכשיו בחלונית הרשת
- פריסה אוטומטית של החלוניות מבטיחה שכאשר משנים את הגודל של החלוניות ב-DevTools
, הן יתאימו למגבלות המרחב החדשות. - בדיקת רכיב ומצב מכשיר כוללת קבוצה של סמלים חדשים.
- המאפיינים בחלונית DOM צבועים עכשיו בצבע שונה גם כשהצומת מודגש. (לפני כן, כולן היו לבנות).
- רכיבים מוסתרים (שמופעלים על ידי לחיצה על 'h' בצומת DOM נבחר) מציגים עכשיו אינדיקטור של עיגול אפור בצד שמאל, ונקודות עצירה של DOM מופיעות עכשיו עם עיגול כחול. (הדבר דומה לאינדיקטורים הכתומים שכבר קיימים כדי לאלץ מצב של רכיב, כמו :hover).
כמו תמיד, נשמח לשמוע את דעתכם ב-Twitter או בתגובות בהמשך, ולקבל דיווחים על באגים בכתובת crbug.com/new.
עד לחודש הבא!
Paul Bakaus וצוות כלי הפיתוח