דף זה תורגם על ידי Cloud Translation API.

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

Kayce Basques

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

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

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

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

באג ב-Chromium: #1068116

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

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

באג ב-Chromium: #1040025

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

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

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

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

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

באג ב-Chromium: #1054381

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

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

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

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

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

כשרושמים קובץ Promise, המסוף משמש לתיאור שגוי של מצב Promise בתור resolved:

דוגמה לשימוש במסוף שנעשה בו שימוש בטרמינולוגיה הישנה 'נפתרת'.

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

דוגמה לשימוש במסוף שנעשה בו שימוש בטרמינולוגיה החדשה 'מילוי הזמנות'.

באג V8: #6751

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

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

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

הגדרת הערך של נכס שרוצים לבטל.

באג ב-Chromium: #1075437

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

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

העברת העכבר מעל ערך של תמונת רקע.

באג ב-Chromium: #1040019

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

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

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

שימוש בארגומנטים מופרדים ברווחים בחלונית 'סגנונות'.

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

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

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

באג ב-Chromium: #1072952

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

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

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

קובצי עזר:

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

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

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

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

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

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

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

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

שלחו לנו הצעה או משוב דרך crbug.com.
כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות > עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח.
אפשר לשלוח ציוץ אל @ChromeDevTools.
אפשר לכתוב תגובות לגבי 'מה חדש' בסרטוני YouTube בכלי הפיתוח או בסרטונים ב-YouTube בקטע 'טיפים לשימוש בכלי הפיתוח'.