کد سمت سرویس گیرنده خود را حتی پس از ترکیب، کوچک کردن یا کامپایل کردن، قابل خواندن و اشکال زدایی نگه دارید. از نقشه های منبع برای نگاشت کد منبع خود به کد کامپایل شده در پانل منابع استفاده کنید.
با پیش پردازنده ها شروع کنید
نقشه های منبع از پیش پردازنده ها باعث می شود DevTools فایل های اصلی شما را علاوه بر فایل های کوچک شده بارگذاری کند.
کروم در واقع کد کوچکسازی شده شما را اجرا میکند، اما پانل منابع کدی را که شما ایجاد کردهاید به شما نشان میدهد. می توانید نقاط شکست را تنظیم کنید و کد را در فایل های منبع گام بردارید و تمام خطاها، گزارش ها و نقاط شکست به طور خودکار نقشه برداری می شوند.
این به شما نشان می دهد که کد را همانطور که می نویسید اشکال زدایی می کنید، برخلاف کدی که توسط سرور توسعه شما ارائه می شود و توسط مرورگر اجرا می شود.
برای استفاده از نقشه های منبع در پانل منابع :
- فقط از پیش پردازنده هایی استفاده کنید که می توانند نقشه های منبع را تولید کنند.
- بررسی کنید که سرور وب شما می تواند نقشه های منبع را ارائه دهد.
از یک پیش پردازنده پشتیبانی شده استفاده کنید
پیش پردازشگرهای رایجی که در ترکیب با نقشه های منبع مورد استفاده قرار می گیرند، شامل موارد زیر هستند اما به آنها محدود نمی شوند:
- ترانسپایلرز: بابل
- کامپایلرها: TypeScript و Dart
- مینی فایر: ترسر
- باندلرها و سرورهای توسعه: Webpack ، Vite ، esbuild و Parcel
برای فهرست گسترده، به نقشههای منبع: زبانها، ابزارها و اطلاعات دیگر مراجعه کنید.
نقشه های منبع را در تنظیمات فعال کنید
در 
تنظیمات > تنظیمات > منابع ، حتما بررسی کنید 
نقشه های منبع جاوا اسکریپت
بررسی کنید که آیا نقشه های منبع با موفقیت بارگیری شده اند یا خیر
به منابع برنامهنویس مراجعه کنید: نقشههای منبع را به صورت دستی مشاهده و بارگیری کنید .
اشکال زدایی با نقشه های منبع
با آماده بودن و فعال بودن نقشه های منبع، می توانید کارهای زیر را انجام دهید:
- منابع وب سایت خود را در پنل منابع باز کنید.
برای تمرکز فقط بر روی کدی که می نویسید، فایل های ایجاد شده و مستقر شده را در درخت فایل گروه بندی کنید . سپس گسترش دهید
بخش تألیف شده و فایل منبع اصلی خود را در ویرایشگر باز کنید.