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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

שינוי כותרות התגובות של הרשת

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

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

כדי לשנות כותרת, עוברים אל Network (רשת) > Headers (כותרות) > Response Headers (כותרות תגובה), מעבירים את העכבר מעל הערך של הכותרת, לוחצים על עריכה. ועורכים אותו.

שגיאת CORS תוקנה על ידי החלפת כותרת.

אפשר גם להוסיף כותרות מותאמות אישית.

הוספת כותרת בהתאמה אישית.

כדי לערוך את כל ההחלפות במקום אחד, עורכים את הקובץ .headers במקורות > החלפות. בנוסף, אפשר ללחוץ על Add override rule כדי לבטל כמה בקשות באמצעות תווים כלליים (*).

עריכת כל השינויים.

בעיה ב-Chromium: 1288023.

שיפורים בניפוי הבאגים ב-Nuxt, ב-Vite וב-Rollup

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

  • במעקב אחר המסוף, מתחת לקישור הצגת עוד N מסגרות.
  • בקטע מקורות > Call Stack, מתחת לתיבת סימון. Show ignore-listed frames.

ה-stack trace לפני ואחרי הפעלת רשימת ההתעלמות של צד שלישי.

כדי להציג את השיפורים האלה, הצוותים של כלי הפיתוח, Nuxt,‏ Vite ו-Rollup שיתפו פעולה כדי להטמיע את x_google_ignoreList התוסף למפת מקור:

צוות כלי הפיתוח רוצה להביע את תודתו לצוותים של Nuxt,‏ Vite ו-Rollup על כך שהפכו את זה לאפשרי. אנחנו מעריכים את המאמצים ושיתוף הפעולה שלך, שהיו חיוניים להצלחת ההטמעה הזו. שוב תודה על התוכן שהוספת.

שיפורים ב-CSS בכרטיסייה Elements > Styles

מאפיינים וערכים לא תקינים ב-CSS

כדי לעזור לכם לאבחן בעיות ב-CSS מהר יותר, בחלונית Styles מוצג עכשיו קו חוצה על:

  • הצהרת CSS שלמה (מאפיין וגם ערך) כשמאפיין ה-CSS לא תקין.
  • רק הערך, אם מאפיין ה-CSS תקין אבל הערך לא תקין.

שם הנכס לא תקין וערך הנכס לא תקין.

צוות כלי הפיתוח רוצה להביע את תודתו ל-Yisi(一丝) על השיפור הזה.

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

מאפיין ה-CSS המקוצר animation מכיל עכשיו קישורים לכללי ה-at @keyframes התואמים, כך שתוכלו לנווט מהר יותר בחלונית Styles.

קישורים לפריימים מרכזיים בנכס המקוצר של האנימציה.

בעיה ב-Chromium: ‏ 1420656.

הגדרה חדשה במסוף: השלמה אוטומטית בהקשה על Enter

החל מהגרסה הקודמת (112), אפשר להגדיר את המסוף בכלי הפיתוח כך שהשלמה אוטומטית תוצע כשלוחצים על Enter.

כברירת מחדל, כדי לאשר הצעה להשלמה אוטומטית, אפשר ללחוץ על Tab או על Arrow right. כדי להפעיל השלמה אוטומטית גם עם Enter, מפעילים את האפשרות הגדרות. הגדרות > מסוף > תיבת סימון. אישור הצעה להשלמה אוטומטית בלחיצה על Enter.

תיבת הסימון המתאימה בהגדרות.

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

בעיה ב-Chromium: 1276960.

הדגשה של קבצים שנוצרו בתפריט הפקודות

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

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

בעיה ב-Chromium: ‏ 1424345.

הוצאה משימוש של הכלי לניתוח ביצועים (profiler) של JavaScript: שלב שני

כבר ב-Chrome 58, צוות כלי הפיתוח תכנן להוציא משימוש בסופו של דבר את JavaScript Profiler ולגרום למפתחי Node.js ו-Deno להשתמש בחלונית Performance ליצירת פרופילים של ביצועי המעבד (CPU) ב-JavaScript.

בגרסה 113 של DevTools מתחיל השלב השני של הוצאה משימוש של הכלי לניתוח ביצועים (profiler) של JavaScript, שכוללת ארבעה שלבים. בשלב הזה, עדיין אפשר לפתוח את החלונית, אבל ממשק המשתמש שלה כבר לא זמין.

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

הוצאה משימוש של הכלי לניתוח ביצועים (profiler) של JavaScript.

בעיה ב-Chromium: 1354548.

מידע חשוב נוסף

אלה כמה מהתיקונים הבולטים בגרסה הזו:

  • תוקן באג שגרם להדפסה מעוצבת בחלונית מקורות לטפל בשמות משתנים עם תווי Unicode בצורה שגויה (1425055).
  • בכרטיסייה בעיות נוספה הודעה חדשה לגבי בעיות במילוי אוטומטי שקשורות לערכי HTML לא סטנדרטיים (1399414).

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

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

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

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

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

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