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

Kayce Basques

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

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

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

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

באג ב-Chromium: #1068116

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

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

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

באג ב-Chromium: #1040025

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

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

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

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

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

באג ב-Chromium: #1054381

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

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

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

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

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

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

דוגמה של המסוף עם המילה 'resolve' הישנה במונחים של טרנספורמציה.

המסוף משתמש עכשיו במונח 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 הוצאה משימוש. מריצים את console.dir($0) ב במקום זאת, משתמשים במסוף.

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

מקורות מידע:

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

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

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

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

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

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

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

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

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

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

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