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

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

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

בעיה ב-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 מודרניות (למשל Webpack, ‏ Rollup) תומכות בתכונת פיצול הקוד – יש תרחישים שבהם אפשר לכלול רכיב משותף אחד בכמה מסלולים (פיצולי קוד).

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

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

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

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

בעיה ב-Chromium: ‏ 1178305

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

בכלי הפיתוח יש עכשיו תמיכה טובה יותר בתווים של קובצי 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

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

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

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

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