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

שיפור בניפוי באגים של גיליונות סגנונות חסרים

כלי הפיתוח כוללים עכשיו מספר שיפורים שיעזרו לכם לזהות ולנפות באגים בגיליונות סגנונות חסרים מהר יותר:

• כדי למנוע בלבול, בעץ מקורות > דף מוצגים עכשיו רק גיליונות הסגנונות שנפרסו ונפרסו בהצלחה.
• בקטע מקורות > עורך, מוצגים עכשיו קווי תחתון וטיפים עם שגיאות בשורה לצד הצהרות @import, url() ו-href שנכשלו.

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

• בחלונית Network, העמודה Initiator מתמלאת באופן עקבי בקישורים לשורה המדויקת שמפנה לגיליון סגנונות שלא נטען.

• בחלונית Issues מפורטות כל הבעיות שקשורות לטעינת גיליונות הסגנונות, כולל כתובות URL שבורות, בקשות שנכשלו והצהרות @import שהוצבו במקום לא נכון.

בעיות ב-Chromium: 1440626, ‏ 1442198, ‏ 1453611.

תמיכה בתזמון ליניארי ב-Elements > Styles > Easing Editor

הכלי לעריכת מעברים בElements > Styles מאפשר לכם לשנות את הערכים של transition-timing-function ושל animation-timing-function בלחיצה. בגרסה הזו, הכלי לעריכת מעברים מקבל תמיכה בפונקציית התזמון הלינארית.

כדי להגדיר תזמונים ליניאריים, לוחצים על לחצן הבחירה הליניארי. כדי להוסיף נקודת בקרה, לוחצים במקום כלשהו על הקו. כדי להסיר נקודת בקרה, לוחצים עליה לחיצה כפולה. אפשר גם לבחור אחת מההגדרות הקבועות מראש: linear, elastic, bounce או emphasized. כדאי לצפות בסרטון כדי לראות את ההתאמה הליניארית בפעולה.

בעיה ב-Chromium: ‏ 1421241.

תמיכה במאגרי אחסון ותצוגת מטא-נתונים

בקטע Application (אפליקציה) > Storage (אחסון) נוספה תמיכה בstorage buckets (מאגרי אחסון). מאגרי אחסון נפרדים זה מזה, כך שאפשר לציין סדר עדיפויות לסילוק של פרוסות נתונים ולוודא שהנתונים הכי חשובים לא יימחקו. כל מאגר אחסון יכול לאחסן נתונים שמשויכים לממשקי API לאחסון שקיימים כמו IndexedDB ו-CacheStorage.

כדי לבדוק את התכונה, אפשר לעיין בדוגמה הזו. פותחים את כלי הפיתוח, עוברים אל Application (אפליקציה) > Storage (אחסון) > Indexed DB (מסד נתונים עם אינדקס), ומריצים את הקוד. בכלי הפיתוח מוצגים עכשיו המאגרים והתכנים שלהם. כדי לראות את המטא-נתונים של מאגר, צריך לבחור אותו.

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

בעיות ב-Chromium: 1448011, 1406017.

Lighthouse 10.3.0

בחלונית Lighthouse מופעלת עכשיו גרסה 10.3.0 של Lighthouse. החידוש הבולט ביותר בגרסה הזו הוא הוספה של ארבעה ביקורות חדשות שמתעדות בעיות שונות בנגישות שקשורות לכותרות של טבלאות וכתוביות, שמות של לחצני קלט ואי התאמות בשפה. לדוגמה:

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

בעיה ב-Chromium: 772558.

נגישות: פקודות במקלדת ושיפור בקריאת המסך

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

• עכשיו אפשר לפתוח את תפריט ההקשר באמצעות מקש קיצור, למשל Shift+F10 ב-Windows ובהרבה הפצות של Linux. למקשי קיצור ב-MacOS, אפשר לעיין במאמר פעולות חלופיות של מצביע.
• אפליקציות של קוראי מסך:
  • לא יכריז על תוויות של תיבות סימון פעמיים ללא צורך.
  • ההגדרה הזו תודיע על שמות של כותרות עמודות שאפשר למיין כשלוחצים על קיצור הדרך 'קריאת כותרת העמודה'.

צוות DevTools מודה ל-Yanling Wang ול-Elorm Coch על השיפורים האלה.

בעיות ב-Chromium: 1446482, 1414952.

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

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

• החלונית Network ממשיכה להקליט את פעילות הרשת גם אחרי שמתבצעת אינטראקציה עם ציר הזמן (1422552).
• בחלונית Coverage יש עכשיו זיהוי של הפעלה מראש של עיבוד או ניווט במטמון לדף הקודם/הבא, ומוצגת בקשה לטעינה מחדש (1393057).
• עכשיו אפשר לנווט בחלונית מקורות > נקודות עצירה באמצעות המקלדת: החץ למעלה והחץ למטה כדי להזיז את המיקום, ומקש הרווח כדי לבחור (1446150).
• תוקנה בעיה בהעלאה ובסינון של קובצי HAR בחלונית Network (1450622).
• תרשים הלהבות בחלונית ביצועים כולל עכשיו רווחים קטנים בין העקבות כדי להציג אותם בצורה טובה יותר (1452150).
• תוקן מיפוי אוטומטי לקבצים שמוטמעים במפות מקור (1446383).

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

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

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

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

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

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

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