احرص على أن يكون الرمز من جهة العميل قابلاً للقراءة وقابلاً للتصحيح حتى بعد دمجه أو تصغيره أو تجميعه. استخدِم خرائط المصدر لربط رمز المصدر بالرمز البرمجي الذي تم تجميعه في لوحة المصادر.
بدء استخدام المعالجات الأولية
تؤدي خرائط المصدر من المعالجات التمهيدية إلى تحميل "أدوات مطوّري البرامج" لملفاتك الأصلية بالإضافة إلى الملفات المصغّرة.
سيشغِّل Chrome الرمز الذي أنشأته من قبل، ولكن ستعرض لوحة المصادر الرمز الذي أنشأته. يمكنك تحديد نقاط التوقف والتنقل بين الرموز في ملفات المصدر، وسيتم ربط جميع الأخطاء والسجلات ونقاط التوقف تلقائيًا.
ويعطيك هذا مظهرًا لتصحيح الأخطاء في الرمز البرمجي كما كتبته، على عكس الرمز الذي يعرضه خادم التطوير ويتم تنفيذه من خلال المتصفّح.
لاستخدام خرائط المصادر في لوحة المصادر:
- لا تستخدم سوى المعالجات التمهيدية التي يمكن أن تنتج خرائط المصدر.
- تحقق من أن خادم الويب يمكنه عرض خرائط المصدر.
استخدام معالج مسبق متوافق
تشمل المعالجات المسبقة الشائعة المستخدمة مع خرائط المصدر، على سبيل المثال لا الحصر، ما يلي:
- الترجمات: Babel
- برامج التحويل البرمجي: TypeScript وDart
- مصغّرات: terser
- الحِزم وخوادم التطوير: Webpack وVite وesbuild وParcel
للحصول على قائمة موسعة، يُرجى الاطّلاع على خرائط المصدر: اللغات والأدوات ومعلومات أخرى.
تفعيل خرائط المصدر في الإعدادات
في 
الإعدادات > الإعدادات المفضّلة > المصادر، احرص على وضع علامة في المربّع 
تفعيل خرائط المصدر JavaScript.
التأكّد من تحميل خرائط المصدر بنجاح
يُرجى الاطّلاع على موارد المطوِّرين: عرض خرائط المصدر وتحميلها يدويًا.
تصحيح الأخطاء باستخدام خرائط المصدر
عندما تكون خرائط المصدر جاهزة ومفعَّلة، يمكنك إجراء ما يلي:
- افتح مصادر موقعك الإلكتروني في لوحة المصادر.
للتركيز فقط على الرمز الذي أنشأته، عليك تجميع الملفات التي تم تأليفها ونشرها في شجرة الملفات. بعد ذلك، وسِّع القسم المحتوى التأليف
وافتح ملف المصدر الأصلي في المحرّر.
حدِّد نقطة توقّف كالمعتاد. مثل، نقطة تسجيل. ثم قم بتشغيل التعليمة البرمجية.
تجدر الإشارة إلى أنّ المحرِّر يضع رابطًا إلى الملف المنشور في شريط الحالة في أسفل الصفحة. وينطبق ذلك أيضًا على ملفات CSS المنشورة.
افتح درج وحدة التحكّم. في هذا المثال، بجانب رسالة نقطة التسجيل، تعرض وحدة التحكّم رابطًا إلى الملف الأصلي، وليس رابطًا إلى الملف المنشور.
غيِّر نوع نقطة الإيقاف إلى عادي وشغِّل الرمز مرة أخرى. تتوقف عملية التنفيذ مؤقتًا هذه المرة.
يُرجى ملاحظة أنّ لوحة حزمة المكالمات تعرض اسم الملف الأصلي وليس الملف المنشور.
في شريط الحالة في أسفل صفحة المحرِّر، انقر على الرابط الذي يؤدي إلى الملف المنشور. ستنقلك لوحة المصادر إلى الملف المناسب.
عند فتح أي ملف تم نشره، ترسل "أدوات مطوري البرامج" إشعارًا إليك في حال تم العثور على تعليق //# sourceMappingURL والملف الأصلي المرتبط به.
لاحِظ أنّ المحرِّر قد طبع تلقائيًا الملف المنشور بتنسيق محسّن. وهو في الواقع يحتوي على كل الرموز في سطر واحد، باستثناء تعليق //# sourceMappingURL.
تسمية eval() مكالمة باستخدام "#sourceURL"
تتيح لك #sourceURL تبسيط عملية تصحيح الأخطاء
عند التعامل مع مكالمات eval(). يبدو أنّ هذا المساعِد مشابه إلى حد كبير للسمة //# sourceMappingURL. لمزيد من المعلومات، يُرجى الاطّلاع على مواصفات الإصدار 3 من "خريطة المصدر".
يطلب التعليق //# sourceURL=/path/to/source.file من المتصفِّح البحث عن ملف المصدر عند استخدام eval(). يساعدك هذا في تسمية التقييمات والنصوص البرمجية المضمنة والأنماط.
يمكنك اختباره على صفحة العرض التوضيحي هذه:
- افتح أدوات مطوري البرامج وانتقِل إلى لوحة المصادر.
- في الصفحة، أدخِل اسم ملف عشوائيًا في حقل الإدخال تسمية الرمز الخاص بك:.
- انقر على الزر تجميع. يظهر تنبيه مع المجموع المقيّم من مصدر CoffeeScript.
- في شجرة الملفات ضمن لوحة الصفحة، افتح ملفًا جديدًا باسم الملف المخصّص الذي أدخلته. ويحتوي هذا الملف على رمز JavaScript المجمّع الذي يحتوي على التعليق
// #sourceURLبالاسم الأصلي للملف المصدر. - لفتح الملف المصدر، انقر على الرابط الذي يظهر في شريط الحالة في المحرِّر.
