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

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

Jecelyn Yeen

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

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

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

הדבר נכון גם לגבי מקבץ הקריאות בחלונית מקורות במהלך ניפוי באגים בנקודת עצירה.

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

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

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

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

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

לעומת זאת, כלים ל-build כמו Vite ו-Rollup מספקים הגדרות להגדרתו. כדי לעשות את זה יש גם פלאגין של Webpack.

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

מה קורה אם עדיין אין תמיכה ב-Rust בסביבת ה-framework ובכלי ה-build האהובים עליכם?

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

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

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

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

ignoreList ב-Next

החל מ-Nuxt v3.3.1, התוכן של node_modules ושל Nuxt buildDir סומן כ-"to beהתעלמות על ידי debuggers".

השינוי בוצע באמצעות שינוי בהגדרת ה-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)
        },
      }
})

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

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)));

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

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