מפות מקור הן כלי חיוני בפיתוח אתרים מודרני שמאפשר לניפוי באגים להרבה יותר קל. הדף הזה בוחן את היסודות של מפות המקור, ואיך הן שנוצרו ואיך הם משפרים את חוויית ניפוי הבאגים.
הצורך במפות מקור
אפליקציות אינטרנט מוקדמות נבנו עם מורכבות נמוכה. מפתחים שפרסו HTML, CSS, וקובצי JavaScript ישירות לאינטרנט.
לאפליקציות אינטרנט מודרניות ומורכבות יותר נדרש מגוון כלים של הפיתוח. לדוגמה:
- שפות יצירתיות ומעבדים מקדימים של HTML: Pug, Nunjucks, Markdown.
- מעבדי מידע מראש בשירות CSS: SCSS, פחות, PostCSS.
- JavaScript frameworks: Angular, React, Vue, Svelte.
- מטא-מסגרות של JavaScript: Next.js, Nuxt, Astro.
- שפות תכנות ברמה גבוהה: TypeScript, Dart, CoffeeScript.
![סקירה קצרה של הכלים השונים.](https://web.developers.google.cn/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c.png?authuser=9&hl=he)
הכלים האלה דורשים תהליך 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 או
המחשה חזותית של מפת המקור.
![תצוגה חזותית של מפת המקור.](https://web.developers.google.cn/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59.png?authuser=9&hl=he)
בעמודה נוצרה בצד ימין מוצגים התוכן הדחוס. העמודה מקורי מציגה את המקור המקורי.
כלי הרכיבים החזותיים מקודדים כל שורה בעמודה המקורית עם בקוד התואם בעמודה נוצרה.
בקטע mappings מוצגים מיפויים מפוענחים של הקוד. לדוגמה,
המשמעות של הערך 65 -> 2:2
:
- הקוד נוצר: המילה
const
מתחילה במיקום 65 בתוכן הדחוס. - קוד מקורי: המילה
const
מתחילה בשורה 2 ובעמודה 2 בתוכן המקורי.
![רשומת מיפוי.](https://web.developers.google.cn/static/articles/source-maps/image/mapping-entry-dc9df15808405.png?authuser=9&hl=he)
65 -> 2:2
.השיתוף מאפשר למפתחים לזהות במהירות את הקשר בין הקוד המוקטן ואת הקוד המקורי, כך שניפוי הבאגים עובד בצורה חלקה יותר.
הכלים למפתחים בדפדפן מחילים את מפות המקור האלה כדי לעזור לך לזהות ניפוי מהיר של בעיות בדפדפן.
![כלים למפתחים שמחילים מפת מקור.](https://web.developers.google.cn/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb.png?authuser=9&hl=he)
תוספים למפת מקור
במפות מקור יש תמיכה בשדות תוספים מותאמים אישית שמתחילים בקידומת x_
. אחת
לדוגמה: השדה של התוסף x_google_ignoreList
שהוצע על ידי Chrome
כלי פיתוח. לעיון ברשימת x_google_ignoreList
כדי להבין איך התוספים האלה עוזרים לכם להתמקד בקוד.
חסרונות במפת המקור
לצערנו, מיפויי המקורות לא תמיד מלאים כפי שצריך.
בדוגמה הראשונה שלנו, המשתנה greet
עבר אופטימיזציה במהלך ה-build
למרות שהערך שלו מוטמע ישירות בפלט של המחרוזת הסופית.
![הפתיח של המשתנה לא ממופה.](https://web.developers.google.cn/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171.png?authuser=9&hl=he)
greet
במקור
חסר קוד במיפוי.במקרה כזה, כשתבצעו ניפוי באגים בקוד, ייתכן שהכלים למפתחים לא יוכלו להסיק את הערך בפועל ולהציג אותו. שגיאה כזו יכולה לגרום לקוד לעקוב אחריהם ולנתח אותם.
![הפתיח של המשתנה לא מוגדר.](https://web.developers.google.cn/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26.png?authuser=9&hl=he)
greet
.זוהי בעיה שצריך לפתור בתוך התכנון של מפות המקור. אחת הפתרון הפוטנציאלי הוא לכלול מידע על ההיקף במפות המקור בדיוק כמו ששפות תכנות אחרות עושות עם המידע על תוצאות ניפוי הבאגים.
אבל כדי לעשות את זה, כל הסביבה העסקית צריכה לפעול יחד כדי לשפר את המצב. מפרט ויישום של מפת מקור. כדי לעקוב אחרי מה שקורה ב לשיפור יכולת ניפוי הבאגים באמצעות מפות מקור, ראו הצעה עבור מפות מקור גרסה 4 ב-GitHub.