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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

אפשר לשלוח משוב על התכונה בכתובת crbug.com/1500573.

בעיה ב-Chromium: ‏ 1486431.

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

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

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

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

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

בעיה ב-Chromium: ‏ 1501781.

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

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

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

בעיה ב-Chromium: ‏ 1499265.

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

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

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

פרטים נוספים זמינים בRFC התואם.

בעיה ב-Chromium: ‏ 1444349.

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

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

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

לפני ואחרי הוספת קצוות רחבים לטראק 'אינטראקציות'.

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

בעיה ב-Chromium: ‏ 1495751.

סינון מתקדם בכרטיסיות 'מלמטה למעלה', 'עץ קריאות' ו'יומן אירועים'

בכרטיסיות מלמטה למעלה, עץ קריאות ויומן אירועים בחלונית ביצועים נוספו שלושה לחצנים חדשים לסינון מתקדם:

  • התאמה לאותיות רישיות (בשפות לועזיות).
  • ביטוי רגולרי.
  • התאמה למילה שלמה.

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

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

בעיה ב-Chromium: 1496355.

סמנים להוספת רווחים בחלונית המקורות

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

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

בעיה ב-Chromium: ‏ 1479986.

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

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

ההסברים החדשים לצד סמל הנקודה הסגולה בכרטיסיות 'כותרות' ו'תגובה'.

בעיה ב-Chromium: ‏ 1469776.

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

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

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

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

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

הכרטיסייה הניסיונית הפרות של CSP שנוספה בגרסה 89 הוסרה כי היא חסרת תועלת.

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

מדיניות Content Security בלוח האפליקציות.

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

מדיניות Content Security בלוח 'אפליקציה'.

Lighthouse 11.3.0

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

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

בעיה ב-Chromium: ‏ 772558.

נגישות

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

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

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

רגעי שיא שונים

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

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.