מה חדש בכלי הפיתוח, בגרסה 137 של Chrome

Sofia Emelianova
Sofia Emelianova
GitHub

מהדורת Google I/O 2025

לכלי הפיתוח ל-Chrome יהיה נוכחות משמעותית בכנס Google I/O השנה. יהיה שילוב של סשנים בשידור חי וסשנים מוקלטים.

כדי לקבל מידע על תכונות חדשות ומעניינות, כדאי לצפות ב:

בנוסף, אל תשכחו לצפות בסשן בנושא מה חדש באינטרנט של רייצ'ל אנדרו ב-20 במאי 2025 בשעה 16:30 (שעון החוף המערבי בארה"ב).

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

שינוי ושמירה של שינויים ב-CSS בסביבת העבודה באמצעות Gemini

עכשיו, בכמה קליקים, אתם יכולים לבקש מ-Gemini לשנות ולתקן את ה-CSS בשבילכם, ואם יש לכם תיקיית Workspace מקושרת, תוכלו לשמור את השינויים בחזרה בקובצי המקור במחשב.

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

אם תיקיית Workspace מקושרת, בחלונית Elements לוחצים על Ask AI, מבקשים מ-Gemini לשנות את ה-CSS, לוחצים על Continue כדי לבדוק את השינויים בשידור חי, מרחיבים את Unsaved changes, לוחצים על Apply to workspace, בודקים את ההבדלים ולוחצים על Save all.

חיבור תיקייה בסביבת העבודה ושמירת השינויים בחזרה לקובצי המקור

מעכשיו אפשר לקשר תיקייה במרחב העבודה באופן אוטומטי (או ידני), כדי שכלי הפיתוח ישמרו את השינויים ב-JavaScript, ב-HTML וב-CSS בחזרה לקובצי המקור שמאוחסנים במחשב.

כך זה עובד עם JavaScript:

בעיה ב-Chromium: 404170628.

שואלים את Gemini על תובנות לגבי הביצועים

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

  • ‫LCP לפי שלב
  • גילוי בקשות LCP
  • עיבוד של בקשות חסימה
  • הגורמים לשינוי הפריסה
  • זמן האחזור של בקשת מסמך

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

נשמח לקבל משוב על התכונה בכתובת crbug.com/371170842.

הוספת הערות לממצאי הביצועים באמצעות Gemini

מעכשיו אפשר לבקש מ-Gemini ליצור הערות על אירועים בנתוני הביצועים.

לוחצים לחיצה כפולה על אירוע במסלול הראשי, ואז לוחצים על יצירת תווית לצד שדה הקלט. ‫Gemini יכול להציע תווית על סמך מעקב אחר מחסנית (stack trace) וההקשר.

איך מוסיפים צילומי מסך לשיחות עם Gemini

בחלונית עזרה מ-AI, אפשר עכשיו ללחוץ על הלחצן צילום מסך כדי לצלם את המסך של הדף ולשלוח אותו לשיחה עם Gemini.

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

תמונות שמציגות את החלונית 'עזרה מ-AI' לפני ואחרי הוספת הלחצן 'צילום מסך'.

תובנות חדשות בחלונית 'ביצועים'

בגרסה הזו נוספו שתי תובנות חדשות לחלונית ביצועים: Duplicated JavaScript ו-Legacy JavaScript.

‫JavaScript כפול

בדף החדש ביצועים > תובנות > JavaScript משוכפל יודגשו ב-Network בקשות למודולים גדולים של JavaScript משוכפל בחבילות, אם הם קיימים בדף.

התובנה '‫JavaScript כפול' בחלונית 'ביצועים'.

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

JavaScript מדור קודם

בדף החדש ביצועים > תובנות > JavaScript מדור קודם יודגשו בנתוני הרשת הבקשות ל-JavaScript מדור קודם, אם יש כאלה בדף. לדוגמה, רכיבי Polyfill וטרנספורמציות שמאפשרים לדפדפנים ישנים יותר להשתמש בתכונות JavaScript חדשות. עם זאת, רבים מהם לא נחוצים לדפדפנים מודרניים.

התובנה '‫JavaScript מדור קודם' בחלונית 'ביצועים'.

עכשיו יש תמיכה בתגי כללים בספקולציות

בקטע Application > Speculative loads (אפליקציה > טעינות ספקולטיביות) מוצגים עכשיו תגים במקום כתובות URL עבור קבוצות כללים, אם יש תגים.

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

בעיה ב-Chromium: ‏ 393408589.

‫Lighthouse 12.6.0

החלונית Lighthouse מריצה עכשיו את Lighthouse 12.6.0.

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

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

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

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

בעיה ב-Chromium: 40543651.

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

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

  • רשת: נוסף ניתוח של פורמטים מוכרים של תזמוני שרת.
  • מעכשיו אפשר לבטל את הבחירה בשורות בטבלאות באמצעות Cmd/Ctrl + לחיצה (בעיה ב-Chromium: 409474445).
  • האפשרות ביצועים > תובנות > שימוש בערכי TTL יעילים למטמון מתעלמת עכשיו מנכסים עם TTL של 30 ימים או יותר.

נגישות

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

  • ביצועים: החיצים של המפעיל בנתוני המעקב גלויים יותר עכשיו.
  • Elements: עכשיו אפשר להפעיל או להשבית את התצוגה של עץ הנגישות של הדף המלא באמצעות קיצור הדרך A (בעיה ב-Chromium: 40888478).

  • קוראי המסך מודיעים עכשיו, בין היתר:

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

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

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

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

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

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

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

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