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

Sofia Emelianova
Sofia Emelianova
GitHub

חיפוש ביצת הפתעה

כדי לחגוג את ה-1 באפריל השנה, צוות DevTools הסתיר ביצת פסחא איפשהו ב-DevTools.

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

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

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

יצירת אמולציה של דף במיקוד ב-Elements > Styles

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

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

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

בעיה ב-Chromium: ‏ 1468393.

בוחר הצבעים, שעון הזווית ועורך המעברים ב-var() fallbacks

כדי לפשט את העריכה של CSS, בכרטיסייה Elements > Styles אפשר עכשיו להשתמש בColor Picker, בAngle Clock ובEasing Editor ב-var() fallbacks.

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

בעיה ב-Chromium: ‏ 1520417.

הכלי למדידת אורך CSS יצא משימוש

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1523279.

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

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

כפתור הניקוי ומסנן החיפוש בכרטיסייה Network > EventStream

בכרטיסייה רשת > EventStream מוצגים:

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

התמונה מציגה את המסך לפני ואחרי הוספת לחצן &#39;ניקוי&#39; ומסנן חיפוש.

צוות כלי הפיתוח רוצה להודות לצ'ארלס ואזאק על השקת התכונה הזו.

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

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

הצגת טיפים עם סיבות לפטור מקובצי Cookie של צד שלישי בקטע Network > Cookies

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

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

יכול להיות שהשימוש בקובצי Cookie של צד שלישי מותר בגלל הסיבות הבאות:

בעיה ב-Chromium: ‏ 41491846.

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

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

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

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

בעיה ב-Chromium: ‏ 1522037.

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

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

תמונה שמציגה את החלונית לפני ואחרי הוספת הכרטיסייה Scripts עם עץ של סקריפטים שנטענו.

בעיה ב-Chromium: 1518364.

Lighthouse 11.5.0

החלונית Lighthouse מריצה עכשיו את Lighthouse 11.5.0. רשימת השינויים המלאה

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

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

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

בעיה ב-Chromium: ‏ 772558.

נגישות

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

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

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

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

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

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

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

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

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

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

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

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

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