מה חדש בכלי הפיתוח (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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1423624.

‫Lighthouse 10.1.1

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

מידע נוסף על מדדי הליבה לבדיקת חוויית המשתמש באתר

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

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

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

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

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

בעיה ב-Chromium: 1428026.

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

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

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

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

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

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

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

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