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

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

Jecelyn Yeen

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

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

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

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

איך לאכלס את ignoreList

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

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

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

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

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

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

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

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

ignoreList ב-Next

החל מ-Nuxt v3.3.1, התוכן של node_modules ושל Nuxt buildDir סומן כ-"to be deleted by 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)
        },
      }
})

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

ignoreList בזווית

החל מ-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, שבזכותם זה אפשרי!