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

Jecelyn Yeen

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

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

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

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

באג ב-Chromium: 1352488

נתוני מעקב משופרים של סטאק

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

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

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

// application.component.ts

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

בעבר, בניתוח עץ ה-stack הוצגה רק פעולת הזמן הקצוב לתפוגה. לא צוין בו "הגורם לבעיה" של הפעולה.

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

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

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

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

באג ב-Chromium: 1334585

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

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

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

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

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

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

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

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

באג ב-Chromium: 1323199

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

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

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

רגעי שיא שונים

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.