חשוב שהקוד בצד הלקוח יהיה קריא וניתן לניפוי באגים, גם אחרי שילוב, הקטנה או הידור של הקוד. משתמשים במפות מקור כדי למפות את קוד המקור לקוד ההידור בחלונית מקורות.
תחילת העבודה עם מעבדים מראש
מפות מקור ממעבדים מראש גורמות לכלי הפיתוח לטעון את הקבצים המקוריים שלך בנוסף לקבצים המוקטנים.
Chrome יפעיל בפועל את הקוד המוקטן, אבל בחלונית מקורות יוצג הקוד שחיברת. אפשר להגדיר נקודות עצירה (breakpoint) ולבצע שלבים באמצעות הקוד בקובצי מקור, וכל השגיאות, היומנים ונקודות העצירה ימופו באופן אוטומטי.
הפעולה הזאת יוצרת מראה של ניפוי באגים בקוד כפי שכתבתם, בניגוד לקוד שמוצג על ידי שרת הפיתוח ומבוצע על ידי הדפדפן.
כדי להשתמש במפות מקור בחלונית מקורות:
- צריך להשתמש רק במעבדים מראש שיכולים ליצור מפות מקור.
- מוודאים ששרת האינטרנט יכול להציג מפות מקור.
שימוש במעבד מידע מראש נתמך
מעבדי מידע מראש נפוצים המשמשים בשילוב עם מפות מקור כוללים, בין היתר:
- ממירים: Babel
- מהדרים: TypeScript ו-Dart
- מיניפיטים: terer
- שירותי חבילות ושרתי פיתוח: Webpack , Vite , esbuild ו-Parcel
רשימה מורחבת זמינה במאמר מפות מקור: שפות, כלים ומידע נוסף.
הפעלת מפות מקור בהגדרות
בקטע 
הגדרות > העדפות > מקורות, מקפידים לסמן את האפשרות 
הפעלת מפות מקור של JavaScript.
בדיקה אם מפות המקור נטענו בהצלחה
אפשר לעיין במקורות מידע למפתחים: הצגה וטעינה של מפות מקור באופן ידני.
ניפוי באגים באמצעות מפות מקור
כשמפות המקור מוכנות ומופעלות, אפשר לבצע את הפעולות הבאות:
- פותחים את מקורות האתר בחלונית מקורות.
כדי להתמקד רק בקוד שאתם כותבים, צריך לקבץ קבצים שנוצרו ונפרסו בעץ הקבצים. לאחר מכן מרחיבים את הקטע
נוצר ופותחים את קובץ המקור המקורי בעורך.
מגדירים נקודת עצירה (breakpoint) כרגיל. לדוגמה, logpoint. לאחר מכן מריצים את הקוד.
שימו לב שהעורך מוסיף קישור לקובץ שנפרס בשורת הסטטוס למטה. באופן דומה, הכלל הזה חל על קובצי CSS שנפרסו.
פותחים את חלונית ההזזה של מסוף. בדוגמה הזו, ליד ההודעה של נקודת הרישום (logpoint), יוצג ב-Play Console קישור לקובץ המקורי ולא לקובץ שנפרס.
משנים את הסוג של נקודת העצירה לרגיל ומריצים שוב את הקוד. הפעם הביצוע מושהה.
שימו לב שבחלונית Call Stack מוצג שם הקובץ המקורי ולא השם של הקובץ שנפרס.
בשורת הסטטוס שבתחתית העורך, לוחצים על הקישור לקובץ שנפרס. בחלונית מקורות תועברו לקובץ המתאים.
כשפותחים קובץ שנפרס, מקבלים הודעה מכלי הפיתוח אם הם מצאו את התגובה //# sourceMappingURL ואת הקובץ המקורי המשויך.
שימו לב שהעורך הדפיס באופן אוטומטי את הקובץ שנפרס. במציאות, הוא מכיל את כל הקוד בשורה אחת, מלבד התגובה //# sourceMappingURL.
מתן שם ל-eval() שיחות באמצעות #sourceURL
בעזרת #sourceURL אפשר לפשט את ניפוי הבאגים כשמטפלים בקריאות ל-eval(). כלי העזר הזה נראה מאוד דומה לנכס //# sourceMappingURL. למידע נוסף, עיינו במפרט של מפת מקור V3.
התגובה //# sourceURL=/path/to/source.file מנחה את הדפדפן לחפש את קובץ המקור במהלך השימוש ב-eval(). כך ניתן לתת שם להערכות ולסקריפטים ולסגנונות המוטבעים.
תוכלו לבדוק אותה בדף ההדגמה הזה:
- פותחים את כלי הפיתוח ועוברים לחלונית Sources.
- בדף, מזינים שם קובץ שרירותי בשדה הקלט תן שם לקוד:.
- לוחצים על הלחצן הידור. תופיע התראה עם הסכום המוערך ממקור CoffeeScript.
- בעץ הקבצים בחלונית דף, פותחים קובץ חדש עם שם הקובץ המותאם אישית שהזנתם. הוא מכיל את קוד ה-JavaScript ההידור הכולל את התגובה
// #sourceURLעם השם המקורי של קובץ המקור. - כדי לפתוח את קובץ המקור, לוחצים על הקישור בשורת הסטטוס בעורך.
