מה חדש בכלי הפיתוח (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 at-rule‏ @font-palette-values. המאפיין הזה מאפשר לכם להתאים אישית את ערכי ברירת המחדל של המאפיין font-palette.

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

הקטע ‎ @font-palette-values בסגנונות.

בעיה ב-Chromium: ‏ 1501781.

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

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

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

בעיה ב-Chromium: ‏ 1499265.

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

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

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

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

בעיה ב-Chromium: ‏ 1444349.

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

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

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

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

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

בעיה ב-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 (הפרות של CSP) שהוספנו בגרסה 89 הוסרה כי היא הייתה מיותרת.

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

מדיניות אבטחת התוכן בחלונית Application (אפליקציה).

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

מדיניות אבטחת התוכן בחלונית 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

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

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

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

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