מה חדש בכלי הפיתוח (Chrome 84)

פתרון בעיות באתר באמצעות הכרטיסייה החדשה 'בעיות'

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

כדי להתחיל, אפשר לעיין במאמר איך מוצאים בעיות בכרטיסייה 'בעיות' בכלי הפיתוח ל-Chrome ופותרים אותן.

באג ב-Chromium: ‎#1068116

הצגת פרטי הנגישות בהסבר של מצב הבדיקה

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

באג ב-Chromium: ‎#1040025

עדכונים בחלונית הביצועים

הצגת מידע על זמן החסימה הכולל (TBT) בכותרת התחתונה

אחרי שמקליטים את ביצועי הטעינה, בחלק התחתון של חלונית הביצועים מוצגות עכשיו פרטים על זמן החסימה הכולל (TBT). המדד TBT הוא מדד ביצועים של טעינה שעוזר לכמת את הזמן שנדרש עד שהדף הופך לשימושי. המדד הזה מודד בעצם כמה זמן חולף עד שדף נראה שמיש (כי התוכן שלו עבר עיבוד והוצג במסך), אבל הוא לא באמת שמיש כי JavaScript חוסם את ה-thread הראשי ולכן הדף לא יכול להגיב לקלט של המשתמש. TBT הוא מדד המעבדה העיקרי להערכת מהירות התגובה לאינטראקציה ראשונה, שהוא אחד מהנתונים הבסיסיים החדשים על חוויית המשתמש באתר של Google.

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

באג ב-Chromium: ‎#1054381

אירועי שינוי פריסה בקטע 'חוויה חדשה'

הקטע החדש חוויה בחלונית הביצועים יכול לעזור לכם לזהות שינויים בפריסה. המדד Cumulative Layout Shift (CLS) יכול לעזור לכם לכמת חוסר יציבות ויזואלית לא רצוי, והוא אחד מהמדדים הבסיסיים החדשים של חוויית המשתמש של Google.

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

טרמינולוגיה מדויקת יותר של הבטחות במסוף

כשרושמים Promise, ה-Console היה מתאר באופן שגוי את המצב של Promise כ-resolved:

במסוף נעשה עכשיו שימוש במונח fulfilled, שתואם למפרט Promise:

באג ב-V8: ‏ #6751

עדכונים בחלונית הסגנונות

תמיכה במילת המפתח revert

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

באג ב-Chromium: ‎#1075437

תצוגה מקדימה של תמונות

מעבירים את העכבר מעל ערך background-image בחלונית Styles (סגנונות) כדי לראות תצוגה מקדימה של התמונה בתיאור הכלים.

באג ב-Chromium: ‎#1040019

בוחר הצבעים משתמש עכשיו בסימון פונקציונלי של צבעים עם רווחים בין המילים

במודול הצבעים ב-CSS ברמה 4 מצוין שפונקציות צבע כמו rgb() צריכות לתמוך בארגומנטים שמופרדים באמצעות רווחים. לדוגמה, rgb(0, 0, 0) שווה ל-rgb(0 0 0).

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

התחביר מוצג גם בחלונית Computed (מאפיינים מחושבים) ובתיאור כלי העזרה של Inspect Mode (מצב בדיקה).

כלי הפיתוח משתמש בתחביר החדש כי תכונות CSS עתידיות כמו color() לא תומכות בתחביר הארגומנטים המופרדים בפסיקים שהוצא משימוש.

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

באג ב-Chromium: ‎#1072952

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

החלונית מאפיינים בחלונית רכיבים הוצאה משימוש. במקום זאת, מריצים את הפקודה console.dir($0) במסוף.

מקורות מידע:

• console.dir()
• $0

תמיכה בקיצורי דרך לאפליקציות בחלונית Manifest

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

מידע נוסף זמין במאמר ביצוע פעולות במהירות באמצעות קיצורי דרך באפליקציות.

הורדת ערוצי התצוגה המקדימה

מומלץ להשתמש ב-Chrome Canary,‏ Dev או Beta כדפדפן ברירת המחדל לפיתוח. ערוצי התצוגה המקדימה האלה מאפשרים לכם לגשת לתכונות העדכניות ביותר של DevTools, לבדוק ממשקי API מתקדמים של פלטפורמות אינטרנט ולמצוא בעיות באתר לפני שהמשתמשים שלכם ימצאו אותן.

יצירת קשר עם הצוות של כלי הפיתוח ל-Chrome

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

מה חדש בכלי הפיתוח

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