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

חלון קופץ עם מידע על Web Vitals בחלונית הביצועים

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

בעיה ב-Chromium: 1147872

הצגה חזותית של תמונת גלילה של CSS

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

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

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

בעיה ב-Chromium: 862450

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

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

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

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

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

בעיה ב-Chromium: 1166577

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

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

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

בעיה ב-Chromium: 1066772

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1162042

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

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

עכשיו אפשר ללחוץ לחיצה ימנית על נכס CSS בחלונית Styles ולבחור באפשרות הצגת הערך המחושב כדי להציג את הערך המחושב ל-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

מחיקת אסימוני האמינות

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

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

בעיה ב-Chromium: 1126824

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

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

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

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

בעיה ב-Chromium: 1158827

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

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

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

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

בעיה ב-Chromium: 1186049

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

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

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

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

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

בעיה ב-Chromium: 11374

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

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

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

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

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

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

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

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

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

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

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