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

Sofia Emelianova
Sofia Emelianova
GitHub

ניפוי באגים ב-CSS באמצעות Gemini

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

אני רוצה לנסות בחלונית Elements (רכיבים), לוחצים לחיצה ימנית על רכיב ובוחרים באפשרות Ask AI (שאלת AI) או לוחצים על הלחצן המתאים לצד הרכיב. כלי הפיתוח יפתחו את החלונית החדשה AI assistance (עזרה מבוססת-AI).

האפשרות בתפריט 'שאילתת AI' והלחצן התואם.

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

חלונית העזרה החדשה שמבוססת על AI, שנותנת תשובה לפרומפט.

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

צוות DevTools ישמח לקבל את המשוב שלכם. אתם מוזמנים להשאיר אותו בכתובת crbug.com/364805393.

שליטה בתכונות מבוססות-AI בכרטיסיית הגדרות ייעודית

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

הכרטיסייה החדשה 'חידושים מבוססי-AI'.

מידע נוסף זמין במאמר בנושא הגדרות > חידושים בתחום ה-AI.

התובנות במסוף נמצאות במרחק לחיצה אחת

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

אם אתם מחוברים ל-Chrome, אתם יכולים להפעיל את התכונות האלה בהגדרות > חידושים מבוססי-AI.

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

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

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

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

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

כרטיסיית ההערות החדשה בסרגל הצד בצד ימין, והערות על אירוע, טווח וחיבור.

קבלת תובנות לגבי הביצועים ישירות בחלונית 'ביצועים'

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

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

צוות כלי הפיתוח ישמח לקבל מכם משוב על מידת השימושיות של התובנות, על דרכים לשיפור שלהן ועל חוויית השימוש בהן עם כלים אחרים, כמו PageSpeed Insights ו-Lighthouse. אתם מוזמנים לשלוח משוב בכתובת crbug.com/371170842.

קל יותר לזהות שינויים משמעותיים בפריסה

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

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

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

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

בעיה ב-Chromium: ‏ 369100729.

זיהוי אנימציות לא מורכבות

בטראק Animations מוצג עכשיו מידע שימושי על אנימציות לא מורכבות:

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

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

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

בעיה ב-Chromium: ‏ 41006273.

ההגדרה 'הפעלות בו-זמניות בחומרה' עוברת אל 'חיישנים'

ההגדרה Hardware concurrency (מקבילות חומרה) הועברה מהחלונית Performance (ביצועים) למקום מתאים יותר – החלונית Sensors (חיישנים).

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

בעיה ב-Chromium: ‏ 371463665.

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

ב-Console, מעקב אחר מחסנית (stack trace) מזהה, מתעלם, מכווץ (collapse) ומאפיר (gray out) בצורה תקינה פריימים שמגיעים מקבצים שנכללים ברשימת ההתעלמות (אם הם מורחבים). בעבר, שם הפונקציה לא הוצג באפור בפירוט המורחב.

אפשר גם להפעיל את החדשות הגדרות > רשימת התעלמות > סקריפטים אנונימיים מ-eval או מהמסוף כדי להגדיר את כלי הפיתוח כך שיתעלמו מסקריפטים אנונימיים ללא כתובת URL של מקור.

השיפורים לא משפיעים על רשימת ההתעלמות ב-stack traces.

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

בעיות ב-Chromium: 40279542, ‏ 40945570, ‏ 345248263.

רכיבים > סגנונות: תמיכה במצבי כתיבה sideways-* לשכבות-על של רשת ומילות מפתח רחבות ב-CSS

בכרטיסייה Elements > Styles יש עכשיו תמיכה בתכונות הבאות:

בעיות ב-Chromium: 40280717, ‏ 40706051, ‏ 40501131.

ביקורות Lighthouse לדפים שאינם HTTP במצבי טווח זמן ותמונת מצב

עכשיו Lighthouse יכול ליצור דוחות לדפים שאינם HTTP במצבי פרק זמן וצילום מצב.

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

נגישות

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

  • במקורות > עורך, אפשר עכשיו לסגור כרטיסיות עם קבצים פתוחים על ידי מעבר ללחצן X והקשה על Enter או על מקש הרווח.
  • בכרטיסייה ביצועים, אפשר עכשיו לבחור רשומה במעקב וללחוץ על מקש הרווח כדי לפתוח את תפריט ההקשר.
  • בכרטיסייה תובנות שבסרגל הצד הימני של ביצועים, אפשר להשתמש במקש Tab כדי לעבור בין האפשרויות.

בעיה ב-Chromium: ‏ 372411090.

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

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

  • הגדרות הוויסות מסונכרנות עכשיו בצורה נכונה בין החלוניות ביצועים ורשת (370332090).
  • בקטע Application (אפליקציה) > Background services (שירותים ברקע) > Speculative loads (טעינות ספקולטיביות) > Rules (כללים) נוסף לחצן {} pretty-print (הדפסה מעוצבת) שדומה ללחצן Sources (מקורות) > Editor (עורך) (40279147).
  • ביטויים בזמן אמת: אחרי שבוחרים באפשרות להשלמה אוטומטית, לחיצה על Tab מוציאה אתכם משדה העריכה במקום להוסיף כניסה לטקסט (349939551).
  • ‫Elements > Styles: ‏anchor() ו-anchor-size() תומכים בתחביר חדש שבו אפשר לשנות את סדר הארגומנטים ולהשמיט את כיוון anchor-size() (343516786). בנוסף, תוקן רינדור חלופי (365802559).
  • רשת: תוקנו תצוגות מקדימות של GraphQL ‏ (369931288).
  • ביצועים: עכשיו הדוחות מציגים התקדמות מצטברת של טעינה ועיבוד של עקבות.
  • ‫WebAuthn: מעכשיו, פרטי הכניסה ששונו באמצעות שיטות signal* מתעדכנים באופן דינמי (368467199).
  • ‫WebAssembly: אזהרה במסוף מודיעה עכשיו אם יש כמה סמלי ניפוי באגים זמינים למודול WebAssembly, ומציינת איזה מהם נמצא בשימוש (40879198,‏ 369515221).
  • שכבת-העל של דוח ה-Web Vitals הבסיסיים מוסרת מהכרטיסייה Rendering (עיבוד) 328487897.
  • כבר לא צריך לסנכרן את הגדרות Chrome כדי להשתמש בתכונות מבוססות-AI גנרטיבי.

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

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

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

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

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

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