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

Sofia Emelianova
Sofia Emelianova
GitHub

מהדורת Google I/O 2025

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 404170628.

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

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

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

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

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

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

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

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

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

בחלונית AI assistance (עזרה מ-AI), עכשיו אפשר ללחוץ על Take screenshot (צילום מסך) כדי לצלם את המסך של הדף ולשלוח אותו לצ'אט עם Gemini.

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

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

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

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

‫JavaScript כפול

בקטע החדש ביצועים > תובנות > JavaScript כפול, יוצגו ברשת בקשות למעקב אחר מודולים גדולים של 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 שווה ל-30 יום או יותר.

נגישות

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

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

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

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

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

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

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

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

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

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