מהן מפות מקור?

Jecelyn Yeen

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

הצורך במפות מקור

אפליקציות אינטרנט מוקדמות נבנו עם מורכבות נמוכה. מפתחים שפרסו HTML, CSS, וקובצי JavaScript ישירות לאינטרנט.

לאפליקציות אינטרנט מודרניות ומורכבות יותר נדרש מגוון כלים של הפיתוח. לדוגמה:

• שפות יצירתיות ומעבדים מקדימים של HTML: Pug, Nunjucks, Markdown.
• מעבדי מידע מראש בשירות CSS: SCSS, פחות, PostCSS.
• JavaScript frameworks: Angular, React, Vue, Svelte.
• מטא-מסגרות של JavaScript: Next.js, Nuxt, Astro.
• שפות תכנות ברמה גבוהה: TypeScript, Dart, CoffeeScript.

חלק מהכלים הנפוצים למפתחים של אפליקציות אינטרנט.

הכלים האלה דורשים תהליך build כדי להמיר את הקוד ל-HTML סטנדרטי, JavaScript ו-CSS שדפדפנים יכולים להבין. מקובל גם לבצע לבצע אופטימיזציה של הביצועים על ידי הקטנה ושילוב של הקבצים האלה, באמצעות כלי כמו Terser.

לדוגמה, באמצעות כלי build, אנחנו יכולים לשנות ולדחוס את הדברים הבאים קובץ TypeScript בשורה אחת של JavaScript. אפשר לנסות בעצמכם ההדגמה הזו ב-GitHub.

/* A TypeScript demo: example.ts */

document.querySelector('button')?.addEventListener('click', () => {
  const num: number = Math.floor(Math.random() * 101);
  const greet: string = 'Hello';
  (document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;
  console.log(num);
});

גרסה דחוסה תהיה:

/* A compressed JavaScript version of the TypeScript demo: example.min.js  */

document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));

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

יצירת מפות מקור

מפות מקור הן קבצים שהשמות שלהם מסתיימים ב-.map (לדוגמה, example.min.js.map וגם styles.css.map). אפשר ליצור אותם באמצעות רוב גרסאות ה-build כולל Vite, webpack, rollup, Parcel וגם esbuild.

חלק מהכלים כוללים מפות מקור כברירת מחדל. אחרים עשויים להזדקק ההגדרות האישיות כדי להפיק:

/* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */

export default defineConfig({
  build: {
    sourcemap: true, // enable production source maps
  },
  css: {
    devSourcemap: true // enable CSS source maps during development
  }
})

הסבר על מפת המקור

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

{
  "mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
  "sources": ["src/script.ts"],
  "sourcesContent": ["document.querySelector('button')..."],
  "names": ["document","querySelector", ...],
  "version": 3,
  "file": "example.min.js.map"
}

כדי להבין כל אחד מהשדות האלה, אפשר לקרוא את המאמר מפרט מפת המקור או המבנה של מפת מקור.

החלק החשוב ביותר במפת מקור הוא השדה mappings. הוא משתמש מחרוזת מקודדת לפי VLQ עם בסיס 64 למפות קווים ומיקומים בקובץ שעבר הידור לקובץ המקורי התואם חדש. אפשר לראות את המיפוי הזה באמצעות כלי הוויזואלי של מפת המקור, כמו source-map-visualization או המחשה חזותית של מפת המקור.

תצוגה חזותית של דוגמת הקוד הקודמת, שנוצרה על ידי כלי חזותי.

בעמודה נוצרה בצד ימין מוצגים התוכן הדחוס. העמודה מקורי מציגה את המקור המקורי.

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

בקטע mappings מוצגים מיפויים מפוענחים של הקוד. לדוגמה, המשמעות של הערך 65 -> 2:2:

• הקוד נוצר: המילה const מתחילה במיקום 65 בתוכן הדחוס.
• קוד מקורי: המילה const מתחילה בשורה 2 ובעמודה 2 בתוכן המקורי.

ההמחשה החזותית של המיפוי, עם התמקדות ברשומה 65 -> 2:2.

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

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

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

תוספים למפת מקור

במפות מקור יש תמיכה בשדות תוספים מותאמים אישית שמתחילים בקידומת x_. אחת לדוגמה: השדה של התוסף x_google_ignoreList שהוצע על ידי Chrome כלי פיתוח. לעיון ברשימת x_google_ignoreList כדי להבין איך התוספים האלה עוזרים לכם להתמקד בקוד.

חסרונות במפת המקור

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

המשתנה greet במקור חסר קוד במיפוי.

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

הכלי למפתחים לא מצליח למצוא ערך עבור greet.

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

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