התוסף של מפת המקור מסוג ignoreList

משפרים את חוויית ניפוי הבאגים בכלי הפיתוח ל-Chrome באמצעות תוסף מפת המקורות של ignoreList.

Jecelyn Yeen

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

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

מה זה ignoreList?

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

כלי הפיתוח ל-Chrome משתמשים בשדה ignoreList (אם הוא סופק) כדי לסנן קוד שנוצר ולאפשר למפתחי אתרים להתמקד רק בקוד שהם כותבים. לדוגמה, נסתכל על מפת המקור הבאה.

/* demo.js.map */

{
  "version": 3,
  "mappings": "AAAAA, ..."
  "sources": [
    "app.js",
    "components/Button.ts",
    "node_modules/.../framework.js",
    "node_modules/.../library.js",
    ...
  ],
  "ignoreList": [2, 3],
  ...
}

בשדה sources מוצגת רשימה של מקורות מקוריים ששימשו את הרשומה mappings. בסרטון מהן מפות מקור? מוסבר איך המיפויים פועלים.

בהנחה ששני הקבצים node_modules/…/frameworks.js ו-node_modules/.../library.js הם סקריפטים של צד שלישי, אתם יכולים לציין את השדה ignoreList כדי לציין את המיקומים שלהם בשדה sources. כלי הפיתוח ל-Chrome ישתמשו במידע הזה כדי להסתיר פריימים מהקבצים שהתעלמתם מהם.

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

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

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

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

איך מאכלסים את ignoreList

החדשות הטובות הן שסביבות עבודה כמו Angular ו-Nuxt כבר מגדירות את ignoreList במפות המקור שלהן. צריך לשדרג לגרסה העדכנית והיא תפעל באופן מיידי. אתם מקבלים שיפורים בדוחות הקריסות בלי מאמץ.

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

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

מה אם כלי ה-build וה-framework המועדפים עליכם עדיין לא תומכים בזה?

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

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

מקרים לדוגמה: הטמעה של Nuxt ו-Angular

ריכזנו כאן שני מקרים לדוגמה.

‫ignoreList ב-Nuxt

החל מ-Nuxt v3.3.1, התוכן של node_modules ו-Nuxt buildDir סומן כ"להתעלמות על ידי מנפי שגיאות".

ההישג הזה התאפשר בזכות שינוי בתצורת ה-build של Nuxt באמצעות Vite ו-Rollup:

/* vite.config.ts */

const ctx: ViteBuildContext = {
  config: vite.mergeConfig(
  build: {
    rollupOptions: {
      output: {
        sourcemapIgnoreList: (relativeSourcePath) => {
          return relativeSourcePath.includes('/node_modules/') || relativeSourcePath.includes(ctx.nuxt.options.buildDir)
        },
      }
})

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

‫ignoreList ב-Angular

החל מגרסה Angular v14.1.0, התוכן של התיקיות node_modules ו-webpack מסומן כ"להתעלמות".

השיפור הזה הושג באמצעות שינוי ב-angular-cli על ידי יצירת פלאגין שמתחבר למודול Compiler של webpack.

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

const map = JSON.parse(mapContent) as SourceMap;
const ignoreList = [];

for (const [index, path] of map.sources.entries()) {
  if (path.includes('/node_modules/') || path.startsWith('webpack/')) {
    ignoreList.push(index);
  }
}

map[`ignoreList`] = ignoreList;
compilation.updateAsset(name, new RawSource(JSON.stringify(map)));

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

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