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

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

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

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

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

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

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

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

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

באג ב-Chromium: 1352488

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

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

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

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

באג ב-Chromium: 1352488

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

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

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

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