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

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

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

בעיה ב-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 כדי לתמוך בבדיקה של שדות מחלקה פרטיים בכל אובייקט נתון.

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

בעיה ב-Chromium: 11374

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

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

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

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

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

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

בעיה ב-Chromium: 1178305

שיפור המתאר של קובצי HTML

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

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

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

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

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

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

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

בעיה ב-Chromium: 1189161

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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