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

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

Jecelyn Yeen

קיבוץ קבצים לפי 'כפי שנוצר' / 'פרוס' בחלונית 'מקורות'

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

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

קיבוץ קבצים לפי 'כפי שנוצר' / 'פרוס'

באג ב-Chromium: 1352488

דוחות קריסות משופרים

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

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

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

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

בעבר, דוח הקריסות הציג רק את פעולת הזמן הקצוב לתפוגה. לא הוצג 'שורש הבעיה' של הפעולה.

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

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

מאחורי הקלעים, כלי הפיתוח הוסיפו תכונה חדשה 'תיוג מקבץ אסינכרוני'. תוכלו לספר את כל הסיפור של הפעולה על ידי קישור שני החלקים של הקוד האסינכרוני עם השיטה החדשה console.createTask(). מידע נוסף זמין במאמר ניפוי באגים מודרני בכלי הפיתוח.

האם זה נשמע מסובך? ממש לא. רוב הזמן, ה-framework שבו אתם משתמשים מטפל בתזמון ובביצוע האסינכרוני. במקרה כזה השימוש ב-API תלוי ב-framework, אין צורך לדאוג לגבי זה. (למשל, השינויים האלה הוטמעו ב-Angular)

באג ב-Chromium: 1334585

התעלמות אוטומטית מסקריפטים מוכרים של צד שלישי

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

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

בעבר, דוח הקריסות כלל סקריפטים של צד שלישי כמו zone.js ו-core.mjs. אלה לא קוד המקור שלך. הם נוצרים על ידי Bundlers (למשל webpack) או frameworks (למשל Angular). זיהוי שורש הבעיה נמשך זמן רב יותר.

התעלמות אוטומטית מסקריפטים ידועים של צד שלישי בדוח הקריסות

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

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

הגדרה להוספה אוטומטית של סקריפטים ידועים של צד שלישי לרשימת הפריטים להתעלמות

באג ב-Chromium: 1323199

מחסנית שיחות משופרת במהלך ניפוי באגים

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

פותחים את ההדגמה הזו ומגדירים נקודת עצירה (breakpoint) בפונקציה increment() ב-app.component.ts. לוחצים על לחצן ההגדלה בדף כדי להפעיל את נקודת העצירה (breakpoint). מקבץ השיחות מציג רק פריימים מהקוד (למשל, app.component.ts ו-button.component.ts).

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

מחסנית שיחות משופרת במהלך ניפוי באגים

באג ב-Chromium: 1352488

הסתרת מקורות שכלולים ברשימת הפריטים להתעלמות בחלונית 'מקורות'

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

פותחים את ההדגמה הזו. בחלונית מקורות. node_modules ו-webpack הם סקריפטים של צד שלישי. כדי להסתיר אותם בחלונית, לוחצים על סמל התפריט (3 נקודות) ובוחרים באפשרות הסתרת מקורות מרשימת הפריטים שהמערכת מתעלמת מהם.

הסתרת מקורות שכלולים ברשימת הפריטים להתעלמות בחלונית 'מקורות'

באג ב-Chromium: 1352488

הסתרת קבצים מרשימת הפריטים שהמערכת מתעלמת מהם בתפריט הפקודות

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

לדוגמה, מפעילים את ההגדרה הסתרת מקורות מרשימת הפריטים להתעלמות ולוחצים על סמל התפריט (3 נקודות). בוחרים באפשרות פתיחת קובץ. מקלידים 'ton' כדי לחפש רכיבי לחצנים. בעבר, התוצאות כוללות קבצים מ-node_modules, אחד מ-node_modules הקבצים אפילו שהופיע בתוצאה הראשונה.

הסתרת קבצים מרשימת הפריטים שהמערכת מתעלמת מהם בתפריט הפקודות

באג ב-Chromium: 1336604

טראק חדש לאינטראקציות בחלונית הביצועים

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

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

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

באג ב-Chromium: 1347390

פירוט של תזמוני LCP בחלונית 'תובנות לגבי ביצועים'

בחלונית תובנות לגבי ביצועים מוצג עכשיו פירוט התזמון של המהירות שבה נטען רכיב התוכן הכי גדול (LCP). כדאי להשתמש במידע על התזמונים האלה כדי להבין ולזהות הזדמנות לשיפור הביצועים של מדד ה-LCP.

פירוט של תזמוני LCP בחלונית 'תובנות לגבי ביצועים'

באג ב-Chromium: 1351735

יצירה אוטומטית של שם ברירת מחדל להקלטות בחלונית 'מכשיר הקלטה'

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

שם ברירת המחדל להקלטות בחלונית 'מכשיר הקלטה'

באג ב-Chromium: 1351383

דגשים שונים

בעבר, תוספים של מכשיר ההקלטה לא מופיעים מדי פעם בחלונית מכשיר ההקלטה. (1351416)
בחלונית סגנונות מוצג עכשיו בוחר צבעים למאפיין stop-color של רכיב SVG <stop>. (1351096)
בחלונית תובנות על ביצועים תוכלו לזהות סקריפטים שגורמים להפרעות בפריסה כגורמים אפשריים לשינויים בפריסה. (1343019)
להציג נתיב קריטי לגופני אינטרנט מסוג LCP בחלונית תובנות לגבי ביצועים. (1350390)

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

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

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

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

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