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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

אני רוצה לנסות בחלונית Elements (רכיבים), לוחצים לחיצה ימנית על רכיב ובוחרים באפשרות Ask AI (שאלת AI) או לוחצים על הלחצן המתאים לצד הרכיב. חלונית חדשה של עזרה מ-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.

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

עכשיו, במסוף, מתבצעת זיהוי, התעלמות, כיווץ (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.

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

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

  • הגדרות ויסות הנתונים מסונכרנות עכשיו בצורה נכונה בין החלוניות Performance (ביצועים) ו-Network (רשת) (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

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

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

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