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

סרגל סינון יעיל בחלונית 'רשת'

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

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

בסרגל המסננים החדש יש שני תפריטים נפתחים: אחד לבחירת סוגי בקשות ואחד להסתרת נתונים וכתובות URL של תוספים, או להצגת קובצי Cookie ובקשות חסומים בלבד, ובקשות של צד שלישי. שני התפריטים תומכים בבחירה של כמה פריטים.

כדי להחזיר מיד את סרגל המסננים הישן, משביתים את ההגדרות הגדרות > ניסויים > check_box_outline_blank עיצוב מחדש של סרגל המסננים בחלונית Network.

אתם מוזמנים לשלוח משוב על התכונה בכתובת crbug.com/1500573.

בעיה ב-Chromium: ‏ 1486431.

שיפורים ברכיבים

התמיכה של @font-palette-values

החלונית Elements תומכת עכשיו בכלל ‎@font-palette-values‎ ב-CSS. המאפיין הזה מאפשר לכם להתאים אישית את ערכי ברירת המחדל של המאפיין font-palette.

בקטע Styles, לוחצים על הערך של המאפיין font-palette. כלי הפיתוח יפנו אתכם לקטע הייעודי @font-palette-values שבו אפשר לערוך את הערכים המותאמים אישית.

בעיה ב-Chromium: ‏ 1501781.

תרחיש נתמך: מאפיין מותאם אישית כגיבוי למאפיין מותאם אישית אחר

Elements > Styles עכשיו פותר נכס מותאם אישית שהוא fallback של נכס מותאם אישית אחר.

בעיה ב-Chromium: ‏ 1499265.

תמיכה משופרת במפת המקור

ההגדרה settings Settings > Experiments > check_box Resolve variable names in expressions using source maps מופעלת כברירת מחדל.

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

• ביטויים במסוף והצעות להשלמה אוטומטית

  

• הבעות פנים בזמן אמת

  

• ביטויים למעקב

  

• נקודות עצירה (breakpoint) מותנות ונקודות יומן

  

לפרטים נוספים, אפשר לעיין בRFC המתאים.

בעיה ב-Chromium: ‏ 1444349.

שיפורים בחלונית הביצועים

מעקב משופר אחר אינטראקציות

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

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

בעיה ב-Chromium: ‏ 1495751.

סינון מתקדם בכרטיסיות Bottom-Up,‏ Call Tree ו-Event Log

בכרטיסיות Bottom-Up,‏ Call Tree ו-Event Log בחלונית Performance נוספו שלושה לחצנים חדשים לסינון מתקדם:

• ‫match_case התאמה לאותיות רישיות.
• ‫regular_expression ביטוי רגולרי.
• ‫match_word התאמת מילה שלמה.

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

בעיה ב-Chromium: ‏ 1496355.

סמני הזחה בחלונית 'מקורות'

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

בעיה ב-Chromium: ‏ 1479986.

הוספנו טיפים מועילים לגבי כותרות ותוכן שהוחלפו בחלונית Network

בחלונית Network מוצגים עכשיו תיאורי כלים כשמעבירים את העכבר מעל סמל הנקודה הסגולה לצד הכרטיסיות Headers ו-Response של בקשה. ההסברים הקצרים מציינים מה בוטל על ידי כלי הפיתוח.

בעיה ב-Chromium: 1469776.

אפשרויות חדשות בתפריט הפקודות להוספה ולהסרה של דפוסי חסימה של בקשות

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

הפקודה Add (הוספה) מעבירה אתכם לתיבת הדו-שיח שבה מציינים את הדפוס, והפקודה Remove (הסרה) מסירה את כל הדפוסים בלי לפתוח את החלונית Network request blocking (חסימת בקשות רשת).

הניסוי בנושא הפרות של CSP הוסר

הכרטיסייה הניסיונית CSP violations (הפרות של CSP) שהוספנו בגרסה 89 הוסרה כי היא הייתה מיותרת.

כדי לראות את פרטי ה-CSP במבט חטוף, עוברים אל Application > Frames > Content Security Policy (CSP).

בנוסף, בחלונית בעיות מופיעים דיווחים על הפרות של CSP.

‫Lighthouse 11.3.0

בחלונית Lighthouse פועלת עכשיו גרסה 11.3.0 של Lighthouse. רשימת השינויים המלאה בין השינויים הבולטים אפשר למצוא את האפשרות להריץ דוחות על דפי שגיאה 404.

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

בעיה ב-Chromium: ‏ 772558.

נגישות

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

• בקטע Network > Payload, אפשר עכשיו להשתמש ב-Tab כדי להתמקד בלחצנים view source ו-view URL-encoded ולהקיש על Enter או על Space כדי להפעיל את הפעולה המתאימה.
• כדי למנוע בלבול, במסוף הקישורים שמובילים לסקריפטים שכבר לא זמינים לכלי לניפוי באגים מוצגים עכשיו באפור ואי אפשר ללחוץ עליהם.
• בעצי ניווט, כמו העץ במקורות > דף, מקש Enter מרחיב ומכווץ עכשיו צמתים עם צאצאים.

בעיות ב-Chromium: 1338391, ‏ 1500662, ‏ 1420362.

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

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

• ביצועים. אם ההקלטה נכשלת, עכשיו יש לכם אפשרות להוריד אירועים גולמיים של מעקב ולנסות להבין מה השתבש (commit).
• מקש הקיצור הצגת המסוף (Ctrl+` ב-Mac,‏ Ctrl++ ב-Windows וב-Linux) לא רק פותח את המסוף, אלא גם סוגר אותו כשמקישים עליו בפעם השנייה.
• מקורות מידע למפתחים תוקן באג שמנע דיווח על משאבי CSS ועל הבעיות שקשורות אליהם (1420362).
• Elements:
  • תוקן באג שקשור לבדיקת רכיבים ב-iframe‏ (1453375).
  • מחושב. תוקן באג שמנע את הצגת ערכי ברירת מחדל (1499882).
  • חיפוש. תוקן באג שמנע חישוב של מספר ההתאמות לשאילתות קצרות של תו אחד או שניים (1416457).
• ‫Console. עכשיו המערכת מנתחת נכון ביטויים רגולריים שמסתיימים בתו עם תו בריחה בתיבה Filter (1346936).
• הגדרות > Workspace. תוקן באג שמנע הוספה של תיקייה שמוחרגת (1503580).
• רשת > תצוגה מקדימה. עכשיו מתבצע רינדור של תמונות עם מזהי URI של data: (1381791).
• זיכרון. נוספו לחצני טעינה להעלאה ושמירה להורדה לסרגל הפעולות (1275407).

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

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

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

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

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

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

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