דף זה תורגם על ידי Cloud Translation API.

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

Sofia Emelianova

Jecelyn Yeen

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

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

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

קוד המקור המקורי שלך, ממופה באמצעות מידע על תוצאות ניפוי הבאגים של DWARF.
שמות של פונקציות מובנים במקבץ הקריאות.
תמיכה בנקודות עצירה (breakpoint) ועוד.

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

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

בעיה ב-Chromium: 1414289.

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

שלב מעבר בקוד המקורי מונע עכשיו השהיה של פירוק (קובץ .wasm). בעבר היא הייתה מושהית שם.

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

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

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

בעיה ב-Chromium: 1418938.

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

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

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

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

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

בעיה ב-Chromium: 1399414.

טענות נכוֹנוּת (assertion) במכשיר ההקלטה

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

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

בסרטון הזה מוסבר איך להצהיר על זכויות יוצרים:

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

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

בעיה ב-Chromium: 1426762.

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

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

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

בעיה ב-Chromium: 1429191.

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

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

האזהרה לגבי מדד ה-INP.

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

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

המסלול של Web Vitals זז

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

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

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

לפני ואחרי שמעבירים את דוח ה-Web Vitals אל המסלול 'תזמונים'.

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

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

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

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

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

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

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

בעיה ב-Chromium: 1428026.

פרטים שונים

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

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

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

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

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

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

אפשר לשלוח לנו הצעה או משוב דרך crbug.com.
כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות > עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח.
שליחת ציוץ אל @ChromeDevTools.
נשמח לשמוע מה חדש בסרטונים ב-YouTube של כלי הפיתוח או בסרטונים ב-YouTube שקשורים לכלי פיתוח.