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

Jecelyn Yeen

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

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

פותחים את ההדגמה הזו. מפעילים את ההגדרה Group files by Authored / Deployed כדי לראות קודם את קוד המקור המקורי (Authored) ולנווט אליו מהר יותר.

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

באג ב-Chromium: 1352488

שיפור בדוחות הקריסות

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

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

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

// application.component.ts

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

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

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

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

מאחורי הקלעים, הוספנו ל-DevTools תכונה חדשה בשם Async Stack Tagging (תיוג של מחסנית אסינכרונית). אתם יכולים לספר את הסיפור המלא של הפעולה על ידי קישור שני החלקים של הקוד האסינכרוני באמצעות השיטה החדשה console.createTask(). מידע נוסף זמין במאמר ניפוי באגים מודרני בכלי הפיתוח.

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

באג ב-Chromium: 1334585

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

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

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

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

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

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

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

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

באג ב-Chromium: ‏ 1323199

שיפור ב-call stack במהלך ניפוי באגים

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

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

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

שיפור ב-call stack במהלך ניפוי באגים

באג ב-Chromium: 1352488

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

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

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

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

באג ב-Chromium: 1352488

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

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

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

באג ב-Chromium: ‏ 1336604

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

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

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

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

באג ב-Chromium: ‏ 1347390

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

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

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

באג ב-Chromium: 1351735

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

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

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

באג ב-Chromium: 1351383

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

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

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

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

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

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

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

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