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

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

Kayce Basques

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

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

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

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

באג ב-Chromium: #1068116

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

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

באג ב-Chromium: #1040025

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

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

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

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

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

באג ב-Chromium: #1054381

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

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

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

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

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

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

דוגמה של ה-Console באמצעות המינוח הישן ה 'נפתר'.

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

דוגמה של ה-Console באמצעות המינוח החדש מסוג 'מילוי הזמנה'.

באג ב-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).

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

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

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

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

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

באג ב-Chromium: #1072952

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

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

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

מקורות מידע:

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

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

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

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

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

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

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

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

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