کد سمت سرویس گیرنده خود را حتی پس از ترکیب، کوچک کردن یا کامپایل کردن، قابل خواندن و اشکال زدایی نگه دارید. از نقشه های منبع برای نگاشت کد منبع خود به کد کامپایل شده در پانل منابع استفاده کنید.
با پیش پردازنده ها شروع کنید
نقشه های منبع از پیش پردازنده ها باعث می شود DevTools فایل های اصلی شما را علاوه بر فایل های کوچک شده بارگذاری کند.
کروم در واقع کد کوچک‌سازی شده شما را اجرا می‌کند، اما پانل منابع کدی را که شما ایجاد کرده‌اید به شما نشان می‌دهد. می توانید نقاط شکست را تنظیم کنید و کد را در فایل های منبع گام بردارید و تمام خطاها، گزارش ها و نقاط شکست به طور خودکار نقشه برداری می شوند.
این به شما نشان می دهد که کد را همانطور که می نویسید اشکال زدایی می کنید، برخلاف کدی که توسط سرور توسعه شما ارائه می شود و توسط مرورگر اجرا می شود.
برای استفاده از نقشه های منبع در پانل منابع :
- فقط از پیش پردازنده هایی استفاده کنید که می توانند نقشه های منبع را تولید کنند.
- بررسی کنید که سرور وب شما می تواند نقشه های منبع را ارائه دهد.
از یک پیش پردازنده پشتیبانی شده استفاده کنید
پیش پردازشگرهای رایجی که در ترکیب با نقشه های منبع مورد استفاده قرار می گیرند، شامل موارد زیر هستند اما به آنها محدود نمی شوند:
- ترانسپایلرز: بابل
- کامپایلرها: TypeScript و Dart
- مینی فایر: ترسر
- باندلرها و سرورهای توسعه: Webpack ، Vite ، esbuild و Parcel
برای فهرست گسترده، به نقشه‌های منبع: زبان‌ها، ابزارها و اطلاعات دیگر مراجعه کنید.
نقشه های منبع را در تنظیمات فعال کنید
که در 
تنظیمات > تنظیمات > منابع ، حتما بررسی کنید 
نقشه های منبع جاوا اسکریپت را فعال کنید .
بررسی کنید که آیا نقشه های منبع با موفقیت بارگیری شده اند یا خیر
به منابع برنامه‌نویس مراجعه کنید: نقشه‌های منبع را به صورت دستی مشاهده و بارگیری کنید .
اشکال زدایی با نقشه های منبع
با آماده بودن و فعال بودن نقشه های منبع، می توانید کارهای زیر را انجام دهید:
- منابع وب سایت خود را در پنل منابع باز کنید.
برای تمرکز فقط بر روی کدی که می نویسید، فایل های ایجاد شده و مستقر شده را در درخت فایل گروه بندی کنید . سپس گسترش دهید
بخش تألیف شده و فایل منبع اصلی خود را در ویرایشگر باز کنید. 
نقطه انفصال را همانطور که معمولاً انجام می دهید تعیین کنید . به عنوان مثال، یک نقطه ورود . سپس کد را اجرا کنید.
توجه داشته باشید که ویرایشگر پیوندی به فایل مستقر شده در نوار وضعیت در پایین قرار می دهد. به طور مشابه، این کار را برای فایل های CSS مستقر شده انجام می دهد.
کشوی کنسول را باز کنید . در این مثال، در کنار پیام نقطه ورود، کنسول پیوندی را به فایل اصلی نشان می‌دهد، نه فایل مستقر شده را.
نوع نقطه شکست را به یک معمولی تغییر دهید و دوباره کد را اجرا کنید. این بار اعدام متوقف می شود.
توجه داشته باشید که صفحه Call Stack نام فایل اصلی را نشان می‌دهد و نه فایل مستقر شده را.
در نوار وضعیت در پایین ویرایشگر ، روی پیوند به فایل مستقر شده کلیک کنید. پنل Sources شما را به فایل مربوطه می برد.
هنگامی که هر فایل مستقر شده ای را باز می کنید، DevTools اگر کامنت //# sourceMappingURL و فایل اصلی مرتبط را پیدا کرد، به شما اطلاع می دهد.
توجه داشته باشید که ویرایشگر به طور خودکار فایل مستقر شده را به زیبایی چاپ می کند. در واقع، تمام کدها را در یک خط به جز کامنت //# sourceMappingURL در خود دارد.
تماس‌های eval() را با #sourceURL نامگذاری کنید
#sourceURL به شما این امکان را می‌دهد که هنگام برخورد با فراخوانی eval() اشکال‌زدایی را ساده کنید. این کمک کننده بسیار شبیه به ویژگی //# sourceMappingURL است. برای اطلاعات بیشتر، مشخصات Source Map V3 را ببینید.
نظر //# sourceURL=/path/to/source.file به مرورگر می‌گوید که وقتی eval() استفاده می‌کنید به دنبال فایل منبع بگردد. این به شما کمک می کند تا ارزیابی ها و اسکریپت ها و سبک های درون خطی خود را نام ببرید.
آن را در این صفحه نمایشی آزمایش کنید:
- DevTools را باز کنید و به پنل Sources بروید.
- در صفحه، یک نام فایل دلخواه را در قسمت Name your code: input وارد کنید.
- روی دکمه Compile کلیک کنید. یک هشدار با مبلغ ارزیابی شده از منبع CoffeeScript ظاهر می شود.
- در درخت فایل در صفحه Page ، یک فایل جدید با نام فایل سفارشی که وارد کرده اید باز کنید. این شامل کد جاوا اسکریپت کامپایل شده است که دارای کامنت
// #sourceURLبا نام اصلی فایل منبع است. - برای باز کردن فایل منبع، روی پیوند موجود در نوار وضعیت ویرایشگر کلیک کنید.
