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

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

Jecelyn Yeen

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

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

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

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

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

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

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

בעיה ב-Chromium: 887173

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

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

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

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

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

הגדרת זמן ארוך יותר לתיעוד זרימה של המשתמש

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

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

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

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

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

בעיה ב-Chromium: 1257499

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

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

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

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

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

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

בעיה ב-Chromium: 1110752

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

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

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

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

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

בעיה ב-Chromium: 1269674

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

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

פותחים את תפריט הפקודה, מריצים את הפקודה הצגת רינדור ומגדירים את התפריט הנפתח Emulate מדיה של CSS Forces-colors.

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

בעיה ב-Chromium: 1130859

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

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

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

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

בעיה ב-Chromium: 1270562

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

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

עורך Flexbox

בעיה ב-Chromium: 1263866

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

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

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

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

בעיה ב-Chromium: 1050021

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

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

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

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

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

בעיה ב-Chromium: 1255073

Lighthouse 9 בחלונית Lighthouse

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

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

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

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

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

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

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

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