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

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

Jecelyn Yeen

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

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

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

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

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

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

עץ נגישות בדף מלא

בעיה ב-Chromium: 887173

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1257499

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

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

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

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

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

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

בעיה ב-Chromium: 1110752

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

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

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

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

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

בעיה ב-Chromium: 1269674

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

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

פותחים את תפריט הפקודות, מריצים את הפקודה Show Rendering ומגדירים את התפריט הנפתח Emulate CSS media feature, force-colors.

תכונת מדיה של 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 רק דרך תפריט ההקשר (לוחצים לחיצה ימנית > Replay XHR).

הפעלה חוזרת של XHR

בעיה ב-Chromium: 1050021

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

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

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

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

יש לעבור למקשי קיצור לעיון במקשי הקיצור ב-Chrome DevTools.

בעיה ב-Chromium: 1255073

מגדלור 9 בחלונית Lighthouse

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

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

פרטים נוספים על העדכונים זמינים במאמר What's new in Lighthouse 9.0 (מה חדש ב-Lighthouse 9.0).

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

בעיה ב-Chromium: 772558

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

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

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

בעיה ב-Chromium: 1241848

דגשים שונים

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

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

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

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

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

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

חלונית Reporting API

בעיה ב-Chromium: 1200732

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

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

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

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

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