מה חדש בכלי הפיתוח ב-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 או מהמסוף כדי להגדיר את DevTools להתעלמות מסקריפטים אנונימיים ללא כתובת URL של מקור.

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

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

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

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

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

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

בעיות ב-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

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

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

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