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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1414289.

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

דילוג. הפעלת קוד בקוד המקורי עכשיו מונעת השהיה בניתוח (קובץ .wasm). בעבר, התהליך היה מושהה בשלב הזה.

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

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

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

בעיה ב-Chromium: ‏ 1418938.

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

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

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

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

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

בעיה ב-Chromium: 1399414.

טענות נכוֹנוּת (assertions) ב-Recorder

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

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

בעיה ב-Chromium: ‏ 772558.

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

performance.mark() הצגת תזמון במעבר עכבר בקטע 'ביצועים' > 'תזמונים'

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

החלון הקופץ עם הזמנים בזמן הצבירה מעל הקטע 'זמנים'.

בעיה ב-Chromium: ‏ 1426762.

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

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

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

בעיה ב-Chromium: ‏ 1429191.

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

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

האזהרה של INP.

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

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

המעקב אחרי מדדי Web Vitals הועבר

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

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

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

לפני ואחרי העברת מדדי Web Vitals למעקב אחר זמני טעינה.

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

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

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

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

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

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

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

בעיה ב-Chromium: 1428026.

רגעי שיא שונים

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.