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

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

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