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

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

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

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

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

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

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

שליטה בתכונות מבוססות-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) באופן תקין פריימים שמגיעים מקבצים שנכללים ברשימת ההתעלמות (אם הם מורחבים). בעבר, שם הפונקציה לא הוצג באפור בפירוט המורחב.

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

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

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

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

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

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

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

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

עכשיו אפשר ליצור דוחות ב-Lighthouse לדפים שאינם 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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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