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

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

בעיה ב-Chromium: ‏ 772558.

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

‫DevTools תומך עכשיו בקיצורי דרך נוספים ומתקן בעיות בקוראי מסך:

• עכשיו אפשר לפתוח את תפריט ההקשר באמצעות מקש קיצור, למשל 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.

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

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