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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1468393.

בוחר הצבעים, שעון הזווית וכלי העריכה של המעברים בגיבויים של var()

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

בעיה ב-Chromium: ‏ 1520417.

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1523279.

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

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

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

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

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

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

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

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

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

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

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

• מדיניות Chrome Enterprise
• ‫Storage Access API או top-level Storage Access API
• הניסיון בתכונה שהוצאה משימוש עקב הפסקה הדרגתית של השימוש בקובצי Cookie של צד שלישי או תקופת החסד שלו
• היוריסטיקה להוצאה משימוש של קובצי Cookie של צד שלישי
• העדפת משתמש

בעיה ב-Chromium: ‏ 41491846.

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

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

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

בעיה ב-Chromium: ‏ 1522037.

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

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

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

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

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