המידע על מדדי הליבה של האתר מופיע בחלונית הביצועים
מעבירים את העכבר מעל סמן של מדדי חוויית המשתמש הבסיסיים בחלונית ביצועים כדי להבין מה המשמעות של המדד – האם הביצועים טובים, דרוש שיפור או שהם גרועים.
בעיה ב-Chromium: 1147872
הדמיה של CSS scroll-snap
עכשיו אפשר להפעיל או להשבית את התג scroll-snap בחלונית Elements כדי לבדוק את היישור של ה-CSS scroll-snap.
כשאלמנט HTML בדף (לדוגמה, בדף ההדגמה הזה) מוחל עליו scroll-snap-type, אפשר לראות תג scroll-snap לידו בחלונית Elements. לוחצים על התג כדי להפעיל או להשבית את שכבת העל של גלילה עם הצמדה בדף.
בדוגמה שלמעלה, אפשר לראות סימון של נקודות בקצוות של החלונות. לתיבת הגלילה יש קו מתאר מלא, ולפריטים שניתנים להצמדה יש קו מתאר מקווקו. הריפוד של האזור שניתן לגלילה מלא בצבע ירוק, והשוליים של האזור שניתן לגלילה מלאים בצבע כתום.
בעיה ב-Chromium: 862450
הכלי החדש לבדיקת זיכרון
אפשר להשתמש בכלי החדש לבדיקת הזיכרון כדי לבדוק ArrayBuffer ב-JavaScript, וגם את הזיכרון של Wasm.
פותחים את דף ההדגמה הזה. בחלונית מקורות, פותחים את הקובץ demo-js.js ומגדירים נקודת עצירה בשורה 18.
יש לרענן את הדף. מרחיבים את הקטע היקף בחלונית מאגר הנתונים לניפוי באגים בצד שמאל. שימו לב לסמל החדש שמופיע ליד הערך של מאגר הזמנות. לוחצים עליה כדי לפתוח את בודק הזיכרון.
במסמכי התיעוד מוסבר איך בודקים JavaScript ArrayBuffer וWebAssembly.Memory באמצעות הכלי החדש לבדיקת זיכרון.
בעיה ב-Chromium: 1166577
חלונית חדשה של הגדרות תגים בחלונית הרכיבים
עכשיו אפשר להפעיל או להשבית תגים באופן סלקטיבי דרך הגדרות התגים בחלונית רכיבים. אתם יכולים להשתמש בתכונה הזו כדי להתאים אישית את התגים החשובים ולשמור על מיקוד בהם בזמן בדיקת דפי אינטרנט.
בחלונית Elements (רכיבים), לוחצים לחיצה ימנית על רכיב כלשהו. בתפריט ההקשר, בוחרים באפשרות הגדרות התג. חלונית הגדרות התג מופיעה בחלק העליון. כדי להציג או להסתיר את התגים, מסמנים או מבטלים את הסימון של תיבת הסימון.
בעיה ב-Chromium: 1066772
תצוגה מקדימה משופרת של תמונה עם פרטים על יחס גובה-רוחב
בתצוגות המקדימות של התמונות בחלונית Elements מוצג עכשיו מידע נוסף על התמונה – גודל מעובד, יחס גובה-רוחב מעובד, גודל פנימי, יחס גובה-רוחב פנימי וגודל הקובץ.
המידע הזה עוזר לכם להבין טוב יותר את התמונות ולבצע אופטימיזציה אם צריך.
אפשר לראות את המידע על יחס הגובה-רוחב של התמונה גם בחלונית רשת כשלוחצים על התמונה כדי לראות תצוגה מקדימה שלה.
בעיות ב-Chromium: 1149832, 1170656
כפתור חדש של תנאי רשת עם אפשרויות להגדרת Content-Encodings
לחצן חדש של תנאי רשת נוסף לחלונית רשת. לוחצים עליה כדי לפתוח את הכרטיסייה תנאי הרשת.
אפשרות חדשה, Accepted Content-Encodings, נוספת לכרטיסייה Network conditions. כדאי להגדיר אותו כך שיבדוק אם תגובות השרת מוצפנות בצורה נכונה בדפדפנים שלא תומכים ב-gzip, ב-brotli או ב-Content-Encodings אחרים בעתיד.
בעיה ב-Chromium: 1162042
שיפורים בחלונית הסגנונות
מקש קיצור חדש להצגת ערך מחושב בחלונית Styles (סגנונות)
עכשיו אפשר ללחוץ לחיצה ימנית על מאפיין CSS בחלונית Styles ולבחור באפשרות View computed value כדי לראות את ערך ה-CSS המחושב.
בעיה ב-Chromium: 1076198
תמיכה במילת המפתח accent-color
ממשק המשתמש להשלמה האוטומטית בחלונית Styles (סגנונות) מזהה עכשיו את מילת המפתח accent-color ב-CSS, שמאפשרת למפתחי אתרים לציין את צבע ההדגשה של אמצעי הבקרה בממשק המשתמש (לדוגמה, תיבת סימון, לחצן בחירה) שנוצרו על ידי הרכיב.
נכון לעכשיו, נכס ה-CSS accent-color הוא ניסיוני. כדי לבדוק את התכונה, צריך להפעיל את chrome://flags/#enable-experimental-web-platform-features.
בעיה ב-Chromium: 1092093
סיווג של סוגי בעיות באמצעות צבעים וסמלים
בכרטיסייה בעיות יש עכשיו סיווג של הבעיות לקטגוריות: שגיאות בדפים, שינויי תוכנה שעלולים לגרום לכשלים ושיפורים אפשריים לציון חומרה טוב יותר. כדי לפתוח את הכרטיסייה בעיות, לוחצים על הלחצן מספר הבעיות במסוף.
- שגיאות בדף (אדום). בעיות שמשפיעות באופן מיידי על הפונקציונליות של הדף, כמו אי הגדרה של כותרות CORS נכונות וכו'.
- שינויים תוכנה שעלולים לגרום לכשל בקרוב (צהוב). בעיות שמיידעות על שינוי לא תואם בפלטפורמת האינטרנט שצפוי לקרות בעתיד, ועלול לגרום לאובדן של פונקציונליות בדף (למשל, אזהרה על שינויים ב-CORS RFC 1918 שצפויים לקרות בעתיד).
- שיפורים אפשריים (כחול). שיפורים אפשריים בדף, אבל בשלב הזה הם לא פוגעים בפונקציונליות הבסיסית של הדף (למשל, בעיות נגישות)
בעיה ב-Chromium: 1183241
מחיקת טוקנים לאימות
עכשיו אפשר למחוק טוקנים של אימות באמצעות לחצן המחיקה החדש בחלונית Trust tokens (טוקנים של אימות), בחלונית Application (אפליקציה).
Trust Token הוא API חדש שעוזר להילחם בהונאות ולהבחין בין בוטים לבין בני אדם אמיתיים, בלי מעקב פסיבי. איך מתחילים לעבוד עם Trust Tokens
בעיה ב-Chromium: 1126824
צפייה בפרטים על תכונות חסומות בתצוגת הפרטים של המסגרת
עכשיו אפשר לראות פרטים על תכונות חסומות בקטע מדיניות הרשאות בתצוגת הפרטים של המסגרת.
פותחים את דף ההדגמה. עוברים לחלונית Application ובוחרים פריים. בקטע Permissions Policy, גוללים אל המאפיין Disabled Features. לוחצים על הצגת פרטים כדי לראות את הפרטים על הסיבה לחסימת התכונה. לוחצים על הסמל לצד כל מדיניות כדי לעבור אל ה-iframe או אל בקשת הרשת שחסמו את התכונה.
Permissions policy הוא API של פלטפורמת אינטרנט שמאפשר לאתר לאשר או לחסום את השימוש בתכונות של הדפדפן במסגרת שלו או במסגרות iframe שהוא מטמיע.
בעיה ב-Chromium: 1158827
סינון ניסויים בהגדרה 'ניסויים'
בעזרת המסנן החדש של הניסויים, קל יותר למצוא ניסויים. לדוגמה, עוברים אל הגדרות > ניסויים, ובתיבת הטקסט מסנן מקלידים "ניגודיות" כדי לסנן את כל הניסויים עם המילה "ניגודיות".
עמודה חדשה Vary Header בחלונית Cache storage (אחסון במטמון)
משתמשים בעמודה החדשה Vary Header בחלונית Cache Storage כדי להציג את כותרת התגובה Vary HTTP.
בעיה ב-Chromium: 1186049
שיפורים בחלונית המקורות
תמיכה בתכונות חדשות של JavaScript
כלי הפיתוח תומכים עכשיו בתכונת השפה החדשה של JavaScript, private brand check, הידועה גם בשם #foo in obj.
התכונה הזו של בדיקת מותג פרטי מרחיבה את האופרטור in כדי לתמוך בבדיקה של שדות מחלקה פרטיים בכל אובייקט נתון.
אפשר לנסות את זה בחלונית Console ובחלונית Sources. אפשר גם לבדוק את השדות הפרטיים בקטע Scope בחלונית debugger.
בעיה ב-Chromium: 11374
תמיכה משופרת בניפוי באגים של נקודות עצירה
כלי DevTools מגדיר עכשיו נקודות עצירה בכמה סקריפטים בצורה נכונה. חבילות JavaScript מודרניות (למשל