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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 369100729.

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

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

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

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

בעיה ב-Chromium:‏ 41006273.

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

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

בעיה ב-Chromium: 371463665.

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

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

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

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

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

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

הכרטיסייה רכיבים > סגנונות תומכת עכשיו בפריטי התוכן הבאים:

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

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

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

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

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

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

פנייה לצוות של כלי הפיתוח ל-Chrome

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

• אתם יכולים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• מדווחים על בעיה בכלי הפיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי הפיתוח ב-DevTools.
• שליחת ציוץ אל @ChromeDevTools.
• נשמח לשמוע מה חדש: מה חדש בסרטונים של כלי הפיתוח ב-YouTube או טיפים בנושא כלי פיתוח ב-YouTube.

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

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