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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

הצהרות עם קו תחתון ותיאורים קצרים בחלונית המקורות.

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

במסוף מוצגים קישורים לשורות המדויקות עם ההצהרות הבעייתיות.

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

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

חלונית הבעיות עם קישורים למקורות ולבקשות.

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

תמיכה בתזמון לינארי בקטע 'רכיבים' > 'סגנונות' > 'כלי העידוד'

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

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

בעיה ב-Chromium: ‏ 1421241.

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

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

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

הצגת המטא-נתונים של קטגוריה.

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

התצוגה המאוחדת החדשה של המטא-נתונים.

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

Lighthouse 10.3.0

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

בדיקה של כותרות הטבלה שעברה.

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

בעיה ב-Chromium: ‏ 772558.

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

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

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

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

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

רגעי שיא שונים

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

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.