מה חדש בכלי הפיתוח (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

תמיכה בניפוי באגים ב-WebAssembly

כלי הפיתוח מאפשרים הגדרות. הגדרות > ניסויים > תיבת סימון. ניפוי באגים ב-WebAssembly: הפעלת תמיכה ב-DWARF כברירת מחדל. מידע נוסף זמין במאמר Debugging WebAssembly with modern tools (ניפוי באגים ב-WebAssembly באמצעות כלים מודרניים).

הניסוי הזה מאפשר להשהות את ההרצה ולנפות באגים בקוד C ו-C++ באפליקציות Wasm, עם כל מידע ניפוי הבאגים שזמין לכם:

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

אפליקציית Wasm שהושהתה בכלי לניפוי באגים.

כדי לבדוק את ניפוי הבאגים ב-Wasm, מתקינים את התוסף C/C++ DevTools Support (DWARF) ומבצעים ניפוי באגים בקוד בהדגמה של Mandelbrot.

בעיה ב-Chromium: 1414289.

שיפור ההתנהגות של החלוקה לשלבים באפליקציות Wasm

דילוג. Step over בקוד המקורי לא גורם יותר להשהיה בפירוק (קובץ .wasm). בעבר, ההפעלה הייתה מושהית שם.

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

ההתנהגות הזו מופעלת כברירת מחדל בהגדרות. הגדרות > העדפות > מקורות.

ההגדרה החדשה נמצאת ב'העדפות' ואז ב'מקורות'.

בעיה ב-Chromium: 1418938.

ניפוי באגים במילוי אוטומטי באמצעות החלונית Elements (רכיבים) והכרטיסייה Issues (בעיות)

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

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

בעיות במילוי אוטומטי מודגשות בחלונית Elements ומדווחות בחלונית Issues.

מעבירים את העכבר מעל בעיה שמודגשת בעץ ה-DOM ולוחצים על הצגת הבעיה כדי לפתוח את הכרטיסייה בעיות שבה מפורטות כל הבעיות שזוהו ורמזים לגבי מה השתבש.

בעיה ב-Chromium: 1399414.

טענות במכשיר ההקלטה

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

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

בסרטון הזה מוסבר איך להגדיר:

  • מאפייני HTML, לדוגמה, class של רכיב.
  • מאפייני JavaScript ב-JSON, לדוגמה, .innerText.

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

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

בעיה ב-Chromium: ‏ 1423624.

Lighthouse 10.1.1

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

ביקורות מקובצות לפי ישות.

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

בעיה ב-Chromium: ‏ 772558.

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

performance.mark() מציג את התזמון כשמעבירים את העכבר מעל האפשרות 'ביצועים' > 'תזמונים'

השיטה performance.mark()‎ מציגה עכשיו את התזמון שלה כשמעבירים את העכבר מעל הסימון המתאים בקטע Performance (ביצועים) > Timings (תזמונים). התזמון כאן הוא חותמת זמן יחסית לאירוע הניווט הקודם.

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

בעיה ב-Chromium: ‏ 1426762.

הפקודה profile() מאכלסת את הדף 'ביצועים' > 'ראשי'

הפקודות profile() ו-profileEnd() במסוף מפעילות ומפסיקות עכשיו את פרופיל השימוש במעבד (CPU) בהשרשור הראשי בחלונית ביצועים.

הפקודה console() יוצרת פרופיל בחלונית Performance (ביצועים).

בעיה ב-Chromium: ‏ 1429191.

אזהרה לגבי אינטראקציות איטיות של משתמשים

אם אינטראקציות של משתמשים נמשכות יותר מ-200 מילישניות, מוצגת אזהרה לגבי מהירות התגובה לאינטראקציה באתר (INP) בכרטיסייה ביצועים > סיכום.

האזהרה לגבי INP.

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

בעיות ב-Chromium: 1432512, ‏ 1432509.

הטראק של Web Vitals עבר

המסלולים הבאים הוסרו מהחלונית ביצועים:

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

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

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

בנוסף, השם של רצועת Experiences שונה ל-Layout Shifts כדי לשקף בצורה מדויקת יותר את השימוש בה.

מידע נוסף על Web Vitals

הוצאה משימוש של הכלי לניתוח ביצועים (profiler) של JavaScript: שלב שלישי

כבר ב-Chrome 58, צוות כלי הפיתוח תכנן להוציא משימוש את JavaScript Profiler בסופו של דבר, ולגרום למפתחי Node.js ו-Deno להשתמש בחלונית Performance כדי ליצור פרופילים של ביצועי המעבד (CPU) ב-JavaScript.

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

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

כדי ליצור פרופיל של ביצועי המעבד (CPU), משתמשים בחלונית Performance (ביצועים).

בעיה ב-Chromium: 1428026.

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

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

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

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

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

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

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

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

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