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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

  • כדי למנוע בלבול, בעץ מקורות > דף מוצגים עכשיו רק גיליונות הסגנונות שנפרסו ונפרסו בהצלחה.
  • בקטע מקורות > עורך, המערכת מדגישה עכשיו קווים מתחת להצהרות @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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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