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

Jecelyn Yeen

תכונה בגרסת טרום-השקה (Preview): עץ נגישות במסך מלא

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

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

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

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

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

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

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

בעיה ב-Chromium: 887173

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1257499

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

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

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

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

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

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

בעיה ב-Chromium: 1110752

מסנן חדש בחלונית 'נכסים'

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

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

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

מסנן בחלונית המאפיינים

בעיה ב-Chromium: 1269674

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

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

פותחים את תפריט הפקודות, מריצים את הפקודה Show Rendering (הצגת העיבוד) ומגדירים את התפריט הנפתח Emulate CSS media feature forced-colors (יצירת אמולציה של תכונת המדיה לאילוץ צבעים של שירות 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 פועלת עכשיו גרסה 9 של Lighthouse. עכשיו, Lighthouse יציג את כל הרכיבים שיש להם את אותו מזהה.

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

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

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

בעיה ב-Chromium: 772558

חלונית מקורות משופרת

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

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

בעיה ב-Chromium: 1241848

רגעי שיא שונים

ריכזנו כאן כמה תיקונים חשובים בגרסה הזו:

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

[ניסיוני] נקודות קצה בחלונית של Reporting API

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

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

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

חלונית Reporting API

בעיה ב-Chromium: 1200732

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

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

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

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

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

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