דף זה תורגם על ידי Cloud Translation API.

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

Jecelyn Yeen

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

בחלונית Elements (רכיבים), פותחים את החלונית Accessibility (נגישות) ומסמנים את התיבה Enable full-page accessibility tree (הפעלת התצוגה של עץ הנגישות במסך מלא). לאחר מכן, טוענים מחדש את כלי הפיתוח ורואים לחצן חדש לנגישות בחלונית Elements.

אפשר ללחוץ עליו כדי לעבור לתצוגה Full-page accessibility tree. אפשר להרחיב צמתים או ללחוץ כדי לראות פרטים בחלונית נגישות.

בוחרים צומת וחוזרים לתצוגת עץ ה-DOM. הצומת המתאים ב-DOM נבחר עכשיו. זו דרך מצוינת להבין את המיפוי בין צומת ה-DOM לבין צומת עץ הנגישות שלו. האפשרות הזו פועלת גם בתצוגת עץ DOM ⬌ עץ נגישות.

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

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

עץ הנגישות במסך מלא

בעיה ב-Chromium: ‏ 887173

שינויים מדויקים יותר בכרטיסייה 'שינויים'

השינויים בקוד בכרטיסייה Changes מודפסים באופן אוטומטי בפורמט קריא.

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

הכרטיסייה 'שינויים'

בעיות ב-Chromium: 1238818, ‏ 1268754 , ‏ 1086491

הגדרת זמן קצוב ארוך יותר להקלטת מסלול משתמש

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

לדוגמה, תיעדתי זרימת משתמשים בדף ההדגמה הזה כדי לטעון וללחוץ על פריט בתפריט. עם זאת, הטעינה של הפריטים בתפריט איטית (נמשכת 6 שניות). ההפעלה מחדש של תהליך המשתמש הזה נכשלה כי היא נמשכה יותר מ-5 שניות (זמן הקצוב לתפוגה שמוגדר כברירת מחדל).

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

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

הגדרות של הזמן הקצוב לתפוגה של הקלטת מסלול המשתמש

בעיה ב-Chromium: ‏ 1257499

איך מוודאים שהדפים ניתנים לשמירה במטמון באמצעות הכרטיסייה 'מטמון לדף הקודם/הבא'

המטמון לדף הקודם/הבא (או bfcache) הוא אופטימיזציה של דפדפן שמאפשרת ניווט מיידי אחורה וקדימה.

הכרטיסייה החדשה Back/forward cache יכולה לעזור לכם לבדוק את הדפים כדי לוודא שהם מותאמים ל-bfcache, ולזהות בעיות שעלולות למנוע את ההתאמה שלהם.

כדי לבדוק דף מסוים, עוברים אליו ב-Chrome ואז בכלי הפיתוח עוברים אל Application (אפליקציה) > Back-forward Cache (מטמון של מעבר קדימה ואחורה). לאחר מכן, לוחצים על הלחצן בדיקת המטמון לדף הקודם/הבא וכלי הפיתוח ינסו לנווט החוצה מהדף ואז לחזור אליו כדי לקבוע אם אפשר לשחזר את הדף מהמטמון לדף הקודם/הבא.

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

כרטיסיית מטמון לדף הקודם/הבא

בעיה ב-Chromium: ‏ 1110752

מסנן חדש בחלונית Properties (מאפיינים)

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

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

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

מסנן בחלונית Properties

בעיה ב-Chromium: ‏ 1269674

יצירת אמולציה של תכונת המדיה לאילוץ צבעים של CSS

תכונת המדיה forced-colors של CSS משמשת כדי לזהות אם סוכן המשתמש הפעיל מצב של אילוץ צבעים (למשל, מצב ניגודיות גבוהה ב-Windows) שבו הוא אוכף על הדף פלטת צבעים מוגבלת שנבחרה על ידי המשתמש.

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

תכונת המדיה לאילוץ צבעים של CSS

בעיה ב-Chromium: ‏ 1130859

הפקודה 'הצגת הסרגלים בהעברת העכבר מעליהם'

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

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

הפקודה 'הצגת הסרגלים בהעברת העכבר מעליהם'

בעיה ב-Chromium: ‏ 1270562

תמיכה ב-`row-reverse` וב-`column-reverse` בכלי לעריכה של Flexbox

בכלי לעריכה של Flexbox נוספו שני לחצנים חדשים לתמיכה ב-row-reverse וב-column-reverse ב-flex-direction.

הכלי לעריכה של Flexbox

בעיה ב-Chromium: ‏ 1263866

מקשי קיצור חדשים להפעלה חוזרת של XHR ולהרחבה של כל תוצאות החיפוש

מקשי קיצור להפעלה חוזרת של XHR בחלונית 'רשת'

בוחרים בקשת XHR בחלונית Network ולוחצים על R במקלדת כדי להפעיל מחדש את ה-XHR. בעבר, אפשר היה להפעיל מחדש את ה-XHR רק דרך תפריט ההקשר (לחיצה ימנית > הפעלה מחדש של XHR)

הפעלה מחדש של XHR

בעיה ב-Chromium: ‏ 1050021

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

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

פותחים את כרטיסיית החיפוש באמצעות Esc > תפריט 3 הנקודות > חיפוש. מזינים מחרוזת חיפוש (למשל, פונקציה) ומקישים על Enter כדי לראות את רשימת תוצאות החיפוש. מתמקדים בתוצאות החיפוש ומשתמשים בקיצור הדרך הבא כדי להרחיב או לכווץ את קובצי החיפוש:

‫Windows / Linux – ‏Ctrl + Shift + { או }
‫MacOS – ‏Cmd + Options + { או }

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

בעיה ב-Chromium: ‏ 1255073

‫Lighthouse 9 בחלונית Lighthouse

החלונית Lighthouse מריצה עכשיו את Lighthouse 9. מעכשיו, ב-Lighthouse יופיעו כל הרכיבים שחולקים את אותו מזהה.

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

במאמר מה חדש ב-Lighthouse 9.0 מפורטים העדכונים.

ביקורת של Lighthouse בנושא 'לכל הרכיבים הניתנים למיקוד צריך להיות מזהה ייחודי', שבה מוצגים שני רכיבים, שלשניהם יש אותו מזהה

בעיה ב-Chromium: ‏ 772558

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

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

מהירות הפתיחה של קבצים גדולים (למשל WASM, ‏ JavaScript) גבוהה משמעותית
אין יותר גלילה אקראית כשמבצעים מעבר שלב אחר שלב בקוד
הצעות משופרות להשלמה אוטומטית למקורות שאפשר לערוך (למשל, קטעי קוד, שינוי מקומי)

בעיה ב-Chromium: 1241848

מידע חשוב נוסף

אלה כמה מהתיקונים הבולטים בגרסה הזו:

הצגה נכונה של דיאגרמת ה-Waterfall של בקשות הרשת. בעבר, הסגנון היה פגום. (1275501)
ההדגשה של הקוד לא פעלה כשחיפשו במסמכים עם שורות ארוכות מאוד בחלונית מקורות. הבעיה נפתרה. (1275496)
אין יותר כרטיסייה כפולה של Payload בבקשות רשת. (1273972)
תוקנה הבעיה שגרמה לכך שפרטים על שינויים בפריסת הרכיבים לא הופיעו בקטע סיכום בחלונית ביצועים. (1259606)
תמיכה בתווים שרירותיים (לדוגמה, ,, .) בשאילתות של חיפוש רשתות. (1267196)

‫[Experimental] נקודות קצה בחלונית Reporting API

החלונית הניסיונית Reporting API נוספה ב-Chrome 96 כדי לעזור לכם לעקוב אחרי הדוחות שנוצרו בדף והסטטוס שלהם.

הקטע Endpoints זמין עכשיו. הוא מספק סקירה כללית של כל נקודות הקצה שהוגדרו בכותרת Reporting-Endpoints.

כאן אפשר לקרוא איך משתמשים ב-Reporting API כדי לעקוב אחרי הפרות אבטחה, קריאות ל-API שהוצא משימוש ועוד.

Reporting API pane

בעיה ב-Chromium: ‏ 1200732

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

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

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

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

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