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

מידע על מדדי Web Vitals מופיע בחלונית 'ביצועים'

מעבירים את העכבר מעל סמן של מדדי Web Vitals בחלונית ביצועים כדי להבין מה המשמעות של הסמן – אם הביצועים טובים, אם דרושים שיפורים או אם הם איטיים.

בעיה ב-Chromium: 1147872

הצגה חזותית של נעילה אוטומטית בגלילה ב-CSS

עכשיו אפשר להפעיל או להשבית את התג scroll-snap בחלונית Elements כדי לבדוק את ההתאמה של הצמדת הגלילה ב-CSS.

כשאלמנט HTML בדף (למשל, בדף הדגמה הזה) מוחל עליו scroll-snap-type, מופיע לידו תג scroll-snap בחלונית אלמנטים. לוחצים על התג כדי להציג או להסתיר את שכבת-העל של הצמדת גלילה בדף.

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

בעיה ב-Chromium: 862450

בודק זיכרון חדש

אפשר להשתמש בכלי הבדיקה של הזיכרון החדש כדי לבדוק את ArrayBuffer ב-JavaScript, וגם את הזיכרון של Wasm.

פותחים את דף הדגמה הזה. בחלונית מקורות, פותחים את הקובץ demo-js.js ומגדירים נקודת עצירה בשורה 18.

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

במסמכי התיעוד מוסבר בהרחבה איך לבדוק את JavaScript ArrayBuffer ו-WebAssembly.Memory באמצעות הכלי החדש לבדיקת זיכרון.

בעיה ב-Chromium: 1166577

חלונית ההגדרות החדשה של התגים בחלונית הרכיבים

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

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

בעיה ב-Chromium: 1066772

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

בתצוגות המקדימות של התמונות בחלונית רכיבים מוצג עכשיו מידע נוסף על התמונה – גודל התמונה לאחר העיבוד, יחס הגובה-רוחב של התמונה לאחר העיבוד, הגודל הפנימי, יחס הגובה-רוחב הפנימי וגודל הקובץ.

המידע הזה יעזור לכם להבין טוב יותר את התמונות ולבצע אופטימיזציה אם צריך.

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

בעיות ב-Chromium: ‏ 1149832, ‏ 1170656

לחצן חדש של תנאי הרשת עם אפשרויות להגדרת Content-Encodings

לחצן חדש של תנאי הרשת נוסף בחלונית Network. לוחצים עליו כדי לפתוח את הכרטיסייה תנאי הרשת.

הוספנו אפשרות חדשה בשם Accepted Content-Encodings לכרטיסייה Network conditions. מגדירים אותו כדי לבדוק אם תגובות השרת מקודדות בצורה נכונה בדפדפנים שלא תומכים ב-gzip, ב-brotli או ב-Content-Encoding עתידיים אחרים.

בעיה ב-Chromium: 1162042

שיפורים בחלונית הסגנונות

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

עכשיו אפשר ללחוץ לחיצה ימנית על מאפיין CSS בחלונית Styles (סגנונות) ולבחור באפשרות View computed value (הצגת הערך המחושב) כדי להציג את הערך המחושב של ה-CSS.

בעיה ב-Chromium: 1076198

תמיכה במילת המפתח accent-color

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

נכס ה-CSS accent-color הוא בשלבי ניסוי. כדי לבדוק את זה, צריך להפעיל את chrome://flags/#enable-experimental-web-platform-features.

בעיה ב-Chromium: 1092093

סיווג סוגי הבעיות באמצעות צבעים וסמלים

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

• שגיאות בדף (אדום). בעיות שיש להן השפעה מיידית על הפונקציונליות של הדף, למשל: אי הגדרה נכונה של כותרות CORS וכו'.
• שינויים משמעותיים שצפויים בקרוב (צהוב). בעיות שמציינות שינוי לא תואם שצפוי בפלטפורמת האינטרנט, שעלול לגרום לאובדן הפונקציונליות של הדף (למשל, אזהרה על שינויים צפויים ב-CORS RFC 1918).
• שיפורים אפשריים (כחול). שיפורים אפשריים בדף, אבל הם לא פוגעים כרגע בפונקציונליות הבסיסית של הדף (למשל, בעיות נגישות)

בעיה ב-Chromium: 1183241

מחיקת טוקנים לאימות

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

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

בעיה ב-Chromium: 1126824

הצגת פרטים על תכונות חסומים בתצוגת פרטי המסגרת

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

פותחים את דף הדמו הזה. עוברים לחלונית Application ובוחרים מסגרת. בקטע Permissions Policy (מדיניות ההרשאות), גוללים אל הנכס Disabled Features (תכונות מושבתות). לוחצים על הצגת פרטים כדי לראות את הפרטים לגבי הסיבה לחסימת התכונה. לוחצים על הסמל לצד כל מדיניות כדי לנווט אל ה-iframe או אל בקשת הרשת שחסמו את התכונה.

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

בעיה ב-Chromium: 1158827

סינון ניסויים בהגדרות הניסויים

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

העמודה החדשה Vary Header בחלונית 'אחסון במטמון'

בעמודה החדשה Vary Header בחלונית Cache Storage אפשר לראות את כותרת התגובה של HTTP ‏Vary.

בעיה ב-Chromium: 1186049

שיפורים בחלונית המקורות

תמיכה בתכונות חדשות של JavaScript

כלי הפיתוח תומכים עכשיו בתכונה החדשה של שפת JavaScript לבדיקת מותגים פרטיים, שנקראת גם #foo in obj.

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

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

בעיה ב-Chromium: 11374

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

עכשיו אפשר להגדיר נקודות עצירה במספר סקריפטים ב-DevTools בצורה נכונה. חבילות JavaScript מודרניות (למשל Webpack, ‏ Rollup) תומכות בתכונה של פיצול קוד – יש תרחישים שבהם רכיב משותף אחד יכול להיכלל במספר מסלולים (פיצולי קוד).

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

בעיות ב-Chromium: ‏ 1142705, ‏ 979000, ‏ 1180794

תמיכה בתצוגה מקדימה במצב 'העברת העכבר מעל' באמצעות סימון []

עכשיו יש תמיכה בכלי הפיתוח בתצוגה מקדימה של ביטויים של חברים ב-JavaScript שמשתמשים בסימון [] בחלונית מקורות.

בעיה ב-Chromium: 1178305

קווים כלליים משופרים של קובצי HTML

עכשיו יש ב-DevTools תמיכה משופרת בתוכנית מתארת בקובצי HTML. בחלונית מקורות, פותחים קובץ HTML. אפשר להציג או להסתיר את קווי המתאר של הקוד באמצעות מקשי הקיצור Cmd + Shift + O ב-Mac או Ctrl + Shift + O ב-Windows.

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

בעיה ב-Chromium: ‏ 761019, ‏ 1191465

מעקב ערימה תקין של שגיאות לניפוי באגים ב-Wasm

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

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

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

בעיה ב-Chromium: 1189161

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

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

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

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

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

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

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