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