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

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

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

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

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

בעיה ב-Chromium: 1414289.

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

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

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

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

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

בעיה ב-Chromium: 1418938.

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

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

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

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

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

בעיה ב-Chromium: 1399414.

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

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

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

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

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

אפשר גם להגדיר שלבים לטענת נכוֹנוּת (assertion), לדוגמה, הצהרות מותנות ב-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) ב-thread הראשי בחלונית הביצועים.

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

בעיה ב-Chromium: 1429191.

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

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

האזהרה של INP.

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

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

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

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

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

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

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

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

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

הוצאה משימוש של הכלי ליצירת פרופילים ב-JavaScript: שלב 3

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

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

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

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

בעיה ב-Chromium: 1428026.

דגשים שונים

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

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

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

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

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

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

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