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

Sofia Emelianova
Sofia Emelianova
GitHub

מהדורת Google I/O 2025

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 404170628.

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

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

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

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

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

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

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

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

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

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

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

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

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

בגרסה הזו נוספו שתי תובנות חדשות לחלונית ביצועים: Duplicated JavaScript ו-Legacy 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 יעילים למטמון מתעלמת עכשיו מנכסים עם 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.

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

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