תוסף מפת המקור ignoreList
יעזור לך לשפר את חוויית ניפוי הבאגים בכלי הפיתוח ל-Chrome.
כלי הפיתוח ל-Chrome מנתח את השדה ignoreList
במפות מקור כדי לשפר את חוויית ניפוי הבאגים של המפתחים. במסוף תוכלו לראות את דוח הקריסות הבא. כלי הפיתוח מסתיר באופן אוטומטי את כל המסגרות של הצד השלישי, ומציג רק את הפריימים שרלוונטיים לקוד שלכם.
![השוואה בין התוצאות של דוח הקריסות.](https://developer.chrome.com/static/docs/devtools/x-google-ignore-list/image/a-comparison-stack-trace-fe12240f6af81.png?authuser=9&hl=he)
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 יחיל את המידע הזה כדי להסתיר פריימים מהקבצים שהמערכת מתעלמת מהם.
![השוואה בין דוח קריסות מכווץ ומורחב.](https://developer.chrome.com/static/docs/devtools/x-google-ignore-list/image/a-comparison-collapsed-f1d55a3171404.png?authuser=9&hl=he)
הכלל הזה רלוונטי גם ל-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, שבזכותם זה אפשרי!