זה היה חודש עשיר בתכונות ב-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 וצוות DevTools