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

Jecelyn Yeen

תכונת תצוגה מקדימה: עץ נגישות בדף מלא

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

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

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

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

בעיה ב-Chromium: 1110752

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

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

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

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

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

בעיה ב-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 בחלונית רשת ומקישים על 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.