מה חדש בכלי הפיתוח, גרסה 132 של Chrome

Sofia Emelianova
Sofia Emelianova
GitHub

ניפוי באגים בבקשות רשת, בקובצי מקור ובמעקב אחר ביצועים באמצעות Gemini

בנוסף לעיצוב CSS, עכשיו אפשר לשוחח עם Gemini על בקשות רשת, קובצי מקור ומעקב ביצועים.

בדומה לתפריט ההקשר בחלונית Elements, כדי לפתוח את החלונית AI assistance ולהתחיל את הצ'אט עם Gemini, לוחצים לחיצה ימנית ובוחרים באפשרות Ask AI או לוחצים על הלחצן Ask AI לצד האפשרויות הבאות:

  • בקשת רשת בחלונית רשת.
  • קובץ בכרטיסייה מקורות > דף.
  • פעילות במסלול ביצועים > ראשי.

לחצנים ואפשרות בתפריט של Ask AI (שאלת שאלות ל-AI) בכרטיסיות Network (רשת), Sources (מקורות) ו-Performance (ביצועים).

‫Gemini יתחשב בהקשר של הבקשה, הקובץ או הפעילות שנבחרו.

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

היסטוריית הצ'אט עם AI

מעכשיו אפשר לשחזר ולראות שיחות קודמות עם Gemini בחלונית AI assistance (עזרה מבוססת-AI). כדי לעשות את זה, לוחצים על הלחצן (הוספה) New chat (שיחה חדשה) בפינה הימנית העליונה של החלונית, או על הלחצנים והאפשרויות בתפריט Ask AI (שאלת AI) בחלונית Network (רשת), בכרטיסייה Sources (מקורות) > Page (דף) ובכרטיסייה Performance (ביצועים) > Main (ראשי).

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

היסטוריית הצ'אט עם ה-AI בתפריט הנפתח שמתחת ללחצן 'היסטוריה'.

ניהול האחסון של התוסף בקטע Application > Storage (אפליקציה > אחסון)

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

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

בעיה ב-Chromium: ‏ crbug.com/40963428.

שיפורי ביצועים

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

שלבי האינטראקציה במדדים בזמן אמת

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

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

כפי שצוין במאמר התוסף Web Vitals, זמין עכשיו ב-DevTools, השקת התכונות האלה מסמנת את סיום התמיכה בתוסף Web Vitals.

בעיה ב-Chromium: crbug.com/369097528.

מידע על חסימת עיבוד בכרטיסייה 'סיכום'

כשבוחרים בקשת רשת שמסומנת במשולש אדום בכרטיסייה Performance (ביצועים) > Network (רשת), בכרטיסייה Summary (סיכום) מוצג עכשיו גם שהבקשה חוסמת את העיבוד, בנוסף לתיאור הכלים (שעבר שינוי).

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

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

בכרטיסייה ביצועים > ראשי, מוצגים עכשיו אירועים מסוג scheduler.postTask() וחצים שמציינים את הגורם המפעיל בין:

  • ‫Schedule postTask -> ‏Fire postTask
  • ‫Schedule postTask -> ‏Abort postTask

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

בעיה ב-Chromium: ‏ crbug.com/40775984.

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

בגרסה הזו יש כמה שיפורים בחלונית Animations ובכרטיסייה Elements > Styles.

בכרטיסייה Elements > Styles מוצגים עכשיו סמלי animation Jump to Animations panel לצד הערך של מאפייני animation, כך שקל לבדוק אנימציות שם.

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

עדכונים בזמן אמת בכרטיסייה 'מחושב'

בכרטיסייה Elements > Computed, הערכים המחושבים מתעדכנים עכשיו בזמן אמת, למשל כשהאנימציות מעדכנות אותם.

חישוב אמולציית לחץ בחיישנים

בחלונית Sensors (חיישנים) אפשר עכשיו לבצע אמולציה של עומס על יחידות ה-CPU‏ Nominal, Fair, Serious ו-Critical.

התמונה מציגה את החלונית Sensors (חיישנים) לפני ואחרי הוספת האפשרות CPU pressure emulation (הדמיה של עומס על המעבד).

בעיה ב-Chromium: ‏ crbug.com/362277525.

אובייקטים של JS עם אותו שם מקובצים לפי מקור בחלונית Memory (זיכרון)

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

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

בעיה ב-Chromium: ‏ crbug.com/357902505.

מראה חדש להגדרות

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

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

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

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

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

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

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

  • ביצועים:
    • הסרנו מגבלה מיותרת של 3 תווים לשאילתות חיפוש.
    • נוסף לחצן דף הבית שמאפשר לחזור למסך המדדים בזמן אמת.
    • תוקנו קיצורי הדרך לשינוי מרחק התצוגה של עקבות Shift+S/W, שלא פעלו קודם.
  • Elements (רכיבים) > Styles (סגנונות):
    • נוספה anchor-center להשלמה האוטומטית 341991541.
    • תוקן באג שגרם לכך שהכלי לעריכה של Flexbox לא היה זמין לערכים של 2 מילים 341964645.
  • רשת: כשלים באחזור מראש מוצגים עכשיו כאזהרות צהובות במקום כשגיאות אדומות, כדי לציין שהצגת התוכן לא מושפעת 372055494.

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

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

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

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

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

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

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