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

Jecelyn Yeen

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

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

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

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

באג ב-Chromium: 1352488

שיפור במעקבי הערימה

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

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

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

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

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

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

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

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

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

באג ב-Chromium: ‏ 1323199

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

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

באג ב-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

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

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

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