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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 369100729.

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

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

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

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

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

בעיה ב-Chromium: ‏ 41006273.

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

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

לפני ואחרי העברת ההגדרה 'Hardware concurrency' לחלונית Sensors.

בעיה ב-Chromium: ‏ 371463665.

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

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

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

לפני ואחרי השיפור של ההתעלמות מהצגת רשימות ב-stack traces.

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

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

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

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

  • שכבת-העל של הרשת בחלון התצוגה מציגה עכשיו רשתות למצבי הכתיבה sideways-rl ו-sideways-lr.
  • פותר מילות מפתח ברמת ה-CSS. בפועל, המשמעות היא שלמשל, אם inherit הוא צבע, לצד השדה הזה יופיע בוחר צבעים בכרטיסייה Styles. מילות המפתח ברמת ה-CSS לפני ואחרי פתרון.

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

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

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

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

נגישות

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

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

בעיה ב-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).
  • Network: תוקנו תצוגות מקדימות של GraphQL (369931288).
  • ביצועים: עכשיו מדווחים על התקדמות מצטברת של טעינת עקבות ועיבוד שלהם.
  • WebAuthn: עכשיו מתבצע עדכון דינמי של פרטי הכניסה ששונו על ידי שיטות signal* (368467199).
  • WebAssembly: עכשיו מופיעה אזהרה במסוף אם יש כמה סמלי ניפוי באגים זמינים למודול WebAssembly, ומהו הסמל שבשימוש (40879198,‏ 369515221).
  • שכבת-העל של דוח ה-Core Web Vitals תוסר מהכרטיסייה עיבוד 328487897.
  • תכונות ה-AI הגנרטיבי לא דורשות יותר סנכרון של הגדרות Chrome.

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

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

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

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

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

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