לשמור על הקוד מצד הלקוח קריא וניתן לניפוי באגים גם אחרי שמשלבים, מצמצמים או יוצרים מהקוד קובץ הידור. משתמשים במפות מקור כדי למפות את קוד המקור לקוד המהדר בלוח מקורות.
תחילת העבודה עם מעבדי טקסט
מפות מקור מעיבוד מקדים גורמות לכלי הפיתוח לטעון את הקבצים המקוריים בנוסף לקבצים המוקטנים.
Chrome מריץ בפועל את הקוד הממוזער, אבל בחלונית מקורות יוצג הקוד שכתבתם. אפשר להגדיר נקודות עצירה ולעבור על הקוד בקובצי המקור, וכל השגיאות, היומנים ונקודות העצירה ימופו באופן אוטומטי.
כך נראה תהליך ניפוי הבאגים בקוד בזמן הכתיבה שלו, בניגוד לקוד שמוצג על ידי שרת הפיתוח ומופעל על ידי הדפדפן.
כדי להשתמש במפות מקור בחלונית מקורות:
- השתמשו רק במעבדים מראש שיכולים ליצור מפות מקור.
- מוודאים ששרת האינטרנט יכול להציג מפות מקור.
שימוש במעבד מקדים נתמך
עיבוד מקדים נפוץ שמשמש בשילוב עם מפות מקור כולל, בין היתר:
- מתרגמים: Babel
- קומפיילרים: TypeScript ו-Dart
- כלי למזעור קוד: terser
- חבילות ופלטפורמות פיתוח: Webpack, Vite, esbuild ו-Parcel
רשימה מורחבת מופיעה במאמר מפות מקור: שפות, כלים ומידע נוסף.
הפעלת מפות מקור בהגדרות
ב-
הגדרות > העדפות > מקורות, חשוב לסמן את האפשרות 
מפות מקור של JavaScript.
בדיקה אם מפות המקור נטענו בהצלחה
מידע נוסף זמין במאמר משאבים למפתחים: הצגה וטעינה ידנית של מפות מקור.
ניפוי באגים באמצעות מפות מקור
כשמפות המקור מוכנים ומופעלים, אפשר לבצע את הפעולות הבאות:
- פותחים את המקורות של האתר בחלונית מקורות.
כדי להתמקד רק בקוד שאתם כותבים, מקובצים קבצים שנכתבו וקבצים שנפרסו בעץ הקבצים. לאחר מכן מרחיבים את הקטע
Authored ופותחים את קובץ המקור המקורי בעורך.