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

Sofia Emelianova
Sofia Emelianova
GitHub

איך מוצאים את ביצת ההפתעה

כדי לחגוג את יום כזבת ה'אפריל' השנה, צוות DevTools הסתיר ביצה במקום כלשהו ב-DevTools.

כדי למצוא אותו, מחפשים את האמוג'י הצבעוני 💫.

עדכונים בחלונית הרכיבים

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

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

בכרטיסייה Elements (רכיבים) > Styles (סגנונות) נוספה האפשרות Emulate a focused page (הדמיה של דף ממוקד) מתחת ללחצן Toggle elements state (שינוי מצב הרכיבים) (:hov). בעבר, האפשרות הזו הייתה זמינה רק בחלונית עיבוד.

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

לפני ואחרי אמולציה של דף במיקוד בכרטיסייה 'סגנונות'.

בעיה ב-Chromium: ‏ 1468393.

בוחר הצבעים, שעון הזווית ועורך העקומה בחלופות var()

כדי לפשט את עריכת ה-CSS, בכרטיסייה Elements‏ > Styles אפשר עכשיו להשתמש בבורר הצבעים, בשעון הזווית ובעורך העקומות בתרחישי חלופיים של var().

הכלים לבחירת צבע, לשעון זוויות ולעריכת עקומות העברה לפני ואחרי העיבוד (render) בתרחישי חלופיים של var().

בעיה ב-Chromium: ‏ 1520417.

הכלי CSS length הוצא משימוש

הכלי ליצירת אורך של CSS הוצא משימוש בגלל משוב שקיבלנו על כך שהוא מאט את תהליך העבודה ולא מוסיף הרבה ערך.

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

כדי להפעיל מחדש את הכלי להגדרת אורך, מבטלים את הסימון של הגדרות > ניסויים > הוצאה משימוש של הכלי ליצירת CSS‏ <length> בכרטיסייה 'סגנונות'.

אם עדיין ברצונך להשתמש בכלי הזה, צוות DevTools ירצה לשמוע את דעתך ואת האופן שבו הכלי למדידת האורך עוזר לך בתהליך העבודה. אפשר לשלוח משוב בנושא crbug/1522657.

הניסוי להוצאה משימוש מושבת.

חלון קופץ של תוצאת החיפוש שנבחרה בקטע 'ביצועים' > 'הטראק הראשי'

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

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

בעיה ב-Chromium: ‏ 1523279.

עדכונים בחלונית 'רשת'

בגרסה הזו יש כמה עדכונים בחלונית Network.

לחצן המחיקה ומסנן החיפוש בכרטיסייה Network (רשת) > EventStream (אירוע בזמן אמת)

בכרטיסייה Network (רשת) > EventStream (מקור נתונים לאירועים) מופיעים הפרטים הבאים:

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

התמונה שלפני ואחרי הוספת לחצן ניקוי ומסנן חיפוש.

צוות DevTools רוצה להודות ל-Charles Vazac על הוספת התכונה הזו.

בנוסף, הכרטיסייה EventStream מתעדת עכשיו גם אירועים ששרתים שולחים דרך fetch/XHR, ולא רק את EventSource API. אפשר לנסות את זה בדף הדגמה הזה.

בעיה ב-Chromium: ‏ 1488863, ‏ 40659493.

תיאורים מפורטים עם סיבות לפטור מקובצי cookie של צד שלישי בקטע 'רשת' > 'קובצי cookie'

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

התמונות &#39;לפני&#39; ו&#39;אחרי&#39; שבהן מוצגת תיבת עזר עם סיבה לפטור בנוגע לקובץ Cookie של צד שלישי.

יכול להיות שקובצי cookie של צד שלישי יתקבלו מהסיבות הבאות:

בעיה ב-Chromium: ‏ 41491846.

הפעלה והשבתה של כל נקודות העצירה (breakpoint) בקטע 'מקורות'

בקטע Sources (מקורות) > Breakpoints (נקודות עצירה), האפשרויות Enable (הפעלה) ו-Disable all breakpoints (השבתה של כל נקודות העצירה) חוזרות לתפריט הנפתח. בעבר, האפשרויות האלה לא נכללו בעיצוב מחדש של נקודות העצירה.

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

לפני ואחרי החזרת האפשרויות להפעלה ולהשבתה.

בעיה ב-Chromium: ‏ 1522037.

הצגת סקריפטים טעונים בכלי הפיתוח ל-Node.js

עכשיו, ב-DevTools ל-Node.js מוצגים סקריפטים טעונים בעץ הניווט בקטע מקורות > סקריפטים.

לפני ואחרי הוספת הכרטיסייה &#39;סקריפטים&#39; עם עץ של סקריפטים טעונים.

בעיה ב-Chromium: 1518364.

Lighthouse 11.5.0

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

בין השינויים הבולטים: ביקורת חדשה שמאפשרת להעריך את הגורמים המרכזיים לשינויים בפריסה. הביקורת הזו מחליפה את הביקורת layout-shift-elements, שבה פורטו רק הרכיבים שהושפעו משינויי פריסה.

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

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

בעיה ב-Chromium: ‏ 772558.

נגישות

בגרסה הזו יש את שיפורי הנגישות הבאים:

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

בעיות ב-Chromium: 1516957, ‏ 324282443, ‏ 324467508, ‏ 324930007.

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

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

  • הגופנים בכלי הפיתוח מתעדכנים בהתאם ל-Chrome (1523538).
  • ביצועים: תוקנה הצגת צילום המסך כשעוברים עם העכבר מעל ציר הזמן (1519469).
  • מקורות: גובה השורה בכלי העריכה הוגדל כדי לשפר את הקריאות של הקוד (1523640).
  • Network‏ > Responses: תוקנו בעיות שונות בתצוגה בפורמטים ובקידודים שונים (1523128, ‏ 1509336, ‏ 1523128, ‏ 41481944, ‏ 1509336).

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

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

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

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

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

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