תקציר של כלי הפיתוח – פרטים מצטברים של ציר הזמן, לוחות צבעים ועוד

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


האשמת הביצועים הטובים יותר: פרטים נצברים בציר הזמן

פרטים נצברים בציר הזמן

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

בכרטיסייה פרטים מצטברים, ניתן להתמקד רק בפונקציות יקרות או בעץ השיחות כולו, ולאחר מכן לפרט את הנתונים שנבחרו לפי דומיין, תת-דומיין או כתובות URL נפרדות. לדוגמה, בציר הזמן של טעינת הדף שלמעלה, אפשר עכשיו לשייך בקלות האטה לסקריפטים של צד שלישי שמגיעים מדומיינים כמו facebook.net או twitter.com.

תפריט ראשי ייעודי חדש

תפריט ראשי חדש.

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

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

בנוסף לעגינה, הוספנו חיפוש קבצים לגישה מהירה, קיצורי דרך ועזרה (שמפנה לדף הבית החדש שלנו).

מגלים את כלי הפיתוח בעזרת הסברים קצרים ומשופרים

הסברים קצרים חדשים.

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

ההסבר הקצר החדש מופיע מהר יותר, וכולל מקשי קיצור (אם יש).

יצירת פרופילים מותאמים אישית של ויסות רשת

פרופילי רשת מותאמים אישית.

אם אפשרויות ברירת המחדל של Network Throttler מוגבלות מדי לתרחישי השימוש שלכם, ואתם צריכים אפשרות מסוג "שיחת Wi-Fi", או שבשביל הנוסטלגיה, אתם רוצים לנסות לדמות קו"110 Baud", יש לי חדשות טובות בשבילכם. הוספנו חלונית הגדרות חדשה שמאפשרת לבצע את הפעולות האלה.

לוחות צבע אוטומטיים, לוחות צבעים ובהתאמה אישית

אם אתם רוצים ליצור מחדש צבעי הקסם או להשתמש בלוח צבעים קיים, בוחר הצבעים המשופר עוזר לבחור לוח צבעים עקבי לאתר שלכם.

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

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

ספרו לנו מה דעתכם, ואיך נוכל להרחיב את הסיפור הצבעוני.

המיטב של כל השאר

  • בקשות שבוצעו באמצעות fetch() API מוצגות עכשיו בחלונית הרשת
  • פריסת חלוניות אוטומטית מבטיחה שכשמשנים את הגודל של הלוחות
    בכלי הפיתוח, המערכת מתאימה את עצמה למגבלות השטח החדשות.
  • לבדיקת מצב הרכיבים והמכשיר יש קבוצה של סמלים חדשים.
  • המאפיינים בחלונית ה-DOM מופיעים עכשיו בצבעים שונים, גם כשהצומת מודגש. (אלה שהיו לבנים לפני כן).
  • לרכיבים מוסתרים (המופעלים על ידי לחיצה על 'h' בצומת DOM נבחר) מופיע עכשיו אינדיקטור של עיגול אפור בצד ימין, ונקודות עצירה של DOM מופיעות באותו אופן עם עיגול כחול. (האינדיקטור הזה דומה לאינדיקטורים הכתומים שכבר יש לנו לאילוץ מצב רכיב כמו :hover).

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

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