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

Kayce Basques

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

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

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

הכרטיסייה 'בעיות'.

באג ב-Chromium: ‎#1068116

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

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

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

באג ב-Chromium: ‎#1040025

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

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

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

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

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

באג ב-Chromium: ‎#1054381

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

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

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

הפרטים של שינוי הפריסה.

מונחי התחייבות מדויקים יותר במסוף

בעבר, כשנרשמה ביומן אירוע Promise, המסוף תיאר בצורה שגויה את המצב של ה-Promise בתור resolved:

דוגמה למסוף עם המונח 'נפתרה' הישן.

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

דוגמה למסוף עם המונח החדש 'הושלמו'.

באג ב-V8: ‎#6751

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

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

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

הגדרת הערך של נכס להחזרה למצב הקודם.

באג ב-Chromium: ‎#1075437

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

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

העברת העכבר מעל ערך של background-image.

באג ב-Chromium: ‎#1040019

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

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

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

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

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

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

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

באג ב-Chromium: ‎#1072952

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

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

חלונית המאפיינים שהוצאה משימוש.

מקורות מידע:

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

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

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

קיצורי דרך של אפליקציות בחלונית Manifest.

מורידים את הערוצים לתצוגה מקדימה.

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.