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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

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

בעיה ב-Chromium: 1486431.

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

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

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

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

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

בעיה ב-Chromium: 1501781.

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

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

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

בעיה ב-Chromium: 1499265.

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

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

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

אפשר לקרוא פרטים נוספים ב-RFC המתאים.

בעיה ב-Chromium: 1444349.

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

מסלול אינטראקציות משופרות

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

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

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

בעיה ב-Chromium: 1495751.

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

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

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

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

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

בעיה ב-Chromium: 1496355.

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

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

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

בעיה ב-Chromium: 1479986.

הסברים קצרים שימושיים על כותרות ותוכן שבוטלו בחלונית 'רשת'

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

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

בעיה ב-Chromium: 1469776.

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

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

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

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

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

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

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

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

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

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

Lighthouse גרסה 11.3.0

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

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

בעיה ב-Chromium: 772558.

נגישות

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

  • בקטע רשת > מטען ייעודי (Payload), עכשיו אפשר למקד באמצעות Tab את הלחצנים הצגת מקור וצפייה בקידודי כתובת URL ולהקיש על Enter או על מקש הרווח כדי להפעיל את הפעולה המתאימה.
  • במסוף, כדי להפחית את הבלבול, הקישורים שמובילים לסקריפטים שכבר לא זמינים לכלי לניפוי באגים מופיעים באפור ולא ניתן ללחוץ עליהם.
  • בעצי ניווט, כמו העץ בקטע מקורות > דף, המפתח Enter מרחיב ומכווץ צמתים עם צאצאים.

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

פרטים שונים

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

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

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

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

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

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

  • אפשר לשלוח לנו הצעה או משוב דרך crbug.com.
  • כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות   עוד > עזרה > דיווח על בעיות בכלי הפיתוח ב'כלי פיתוח'.
  • שליחת ציוץ אל @ChromeDevTools.
  • נשמח לשמוע מה חדש בסרטונים ב-YouTube של כלי הפיתוח או בסרטונים ב-YouTube שקשורים לכלי פיתוח.

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

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