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

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1428026.

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

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

בוחר הצבעים Color Picker מזהה עכשיו ערכי HWB שהם out of gamut כשהם נחתכים (1429271).
בחלונית מקורות:
- הופעלה הדגשת תחביר JSON למפות מקור (1385374).
- הפסקנו להציג את ההודעות 'זוהתה מפת מקור' כשמשביתים מפות מקור באופן ידני (1423718).
עכשיו אפשר להעריך ביטויים לא שלמים ב-JavaScript באמצעות Console על ידי הקשה על Ctrl + Enter, והמערכת מציגה שגיאות תחביר (1314700).
בתיבת הדו-שיח לעריכת נקודת עצירה יש עכשיו כפתור סגירה. בעבר, היה צריך להקיש על Enter או להסיר את ההדגשה מתיבת הדו-שיח (1412980).

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

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

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

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

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