אפשר לשפר את חוויית ניפוי הבאגים בכלי הפיתוח ל-Chrome בעזרת התוסף של מפת המקור ignoreList.
כלי הפיתוח ל-Chrome מנתח את השדה ignoreList במפות מקור כדי לשפר את חוויית ניפוי הבאגים של המפתח. כדאי לעיין בדוח הקריסות הבא במסוף. כלי הפיתוח מסתירים באופן אוטומטי את כל המסגרות של צד שלישי, ומציגים רק את המסגרות שרלוונטיות לקוד שלכם.
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).
מאחורי הקלעים, בכלי הפיתוח יש הגדרה נוספת שמופעלת כברירת מחדל: הוספה אוטומטית של סקריפטים ידועים של צד שלישי לרשימת הפריטים להתעלמות. ניתן למצוא אותו ב'כלי פיתוח' > הגדרות > רשימת הפריטים להתעלמות.
בשדה של מפת המקור של ignoreList, אתם יכולים להסתיר את הקבצים שאתם מתעלמת מהם בחלונית מקורות כדי להתמקד בקוד.
איך מאכלסים את הנתונים של ignoreList?
החדשות הטובות הן שמסגרות כמו Angular ו-Nuxt כבר מגדירות את ignoreList במפות המקור שלהם. שדרג לגרסה העדכנית ביותר, והיא תוכל להתחיל באופן מיידי. אפשר לקבל שיפורים בדוח הקריסות בקלות.
מצד שני, כלים לפיתוח אפליקציות כמו Vite ונכס-על מספקים הגדרות שמאפשרות לקבוע את התצורה. בשביל זה יש גם פלאגין של Webpack.
אם אתם מנהלי מסגרות או ספריות, חשוב להבין איך להטמיע את ההגדרות האלה כדי לשפר את חוויית ניפוי הבאגים של המשתמשים. בקטע הבא תוכלו לראות איך Angular ו-Nuxt עשו את זה מאחורי הקלעים.
מה אם ה-framework וכלי ה-build המועדפים עליכם עדיין לא תומכים בהם?
אנחנו עובדים באופן פעיל עם frameworks ומפתחים כלים ליצירת ההגדרות החדשות האלה. אפשר גם להודיע לבעלים על התכונה הזו. לדוגמה, תוכלו לדווח על בעיה במאגר שלהם.
אפשר גם להוסיף באופן ידני סקריפטים לא רלוונטיים לרשימת הפריטים שהמערכת תתעלם מהם ישירות מעץ הקבצים בחלונית 'כלי פיתוח' > מקורות > דף כדי לקבל תוצאה דומה.
מקרים לדוגמה: הטמעה של 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
החל מגרסה גרסה 14.1.0 של Anngular, התוכן של התיקיות node_modules ו-webpack סומן כ-"to ignore".
השינוי הזה הושג באמצעות שינוי ב-angular-cli על ידי יצירת פלאגין שמתחבר למודול Compiler של חבילת האינטרנט.
הפלאגין של Webpack שהמהנדסים שלנו יצרו קטעי hook לשלב 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)));
מידע נוסף על שיפורים אחרים בניפוי באגים זוויתי בכלי הפיתוח זמין במאמר מקרה לדוגמה: ניפוי באגים זוויתי טוב יותר באמצעות כלי פיתוח.
צוות כלי הפיתוח ל-Chrome רוצה להודות לצוות Angular על תרומתו החשובה להצלחת היישום הזה. המאמצים ושיתוף הפעולה שלך היו חשובים, ואנחנו מעריכים את העבודה הקשה שלך. תודה לצוות Angular, שאפשרת את זה!