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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

כך נראה סרגל המסננים לפני ואחרי ייעול שלו בחלונית Network (רשת).

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

בעיה ב-Chromium: 1486431.

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

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

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

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

הקטע ‎ @font-palette-values ב-Styles.

בעיה ב-Chromium: ‏ 1501781.

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

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

התוצאה לפני ואחרי פתרון של מאפיין מותאם אישית כגיבוי של מאפיין מותאם אישית אחר.

בעיה ב-Chromium: ‏ 1499265.

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

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

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

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

בעיה ב-Chromium: ‏ 1444349.

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

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

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

התמונה מציגה את מסלול האינטראקציות לפני ואחרי הוספת קווים אנכיים (whiskers).

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

בעיה ב-Chromium: ‏ 1495751.

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

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

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

שלושת הלחצנים החדשים לסינון מתקדם.

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

בעיה ב-Chromium: 1496355.

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

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

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

בעיה ב-Chromium: 1479986.

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

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

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

בעיה ב-Chromium: ‏ 1469776.

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

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

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

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

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

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

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

‫Content Security Policy בחלונית Application.

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

‫Content Security Policy בחלונית Application.

‫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. עכשיו המערכת מנתחת נכון ביטויים רגולריים שמסתיימים בתו עם escape בתיבה Filter (1346936).
  • הגדרות > Workspace. תוקן באג שמנע הוספה של תיקייה שמוחרגת מהגיבוי (1503580).
  • רשת > תצוגה מקדימה. עכשיו התמונות מוצגות עם מזהי URI של data: (1381791).
  • זיכרון. נוספו לחצני טעינה ושמירה לסרגל הפעולות (1275407).

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

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

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

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

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

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