تصحيح أخطاء الرمز الأصلي بدلاً من نشره باستخدام خرائط المصدر

اجعل الكود من جهة العميل قابلاً للقراءة وقابلاً للتصحيح حتى بعد دمجه أو تصغيره أو تجميعه. استخدِم خرائط المصدر لربط رمز المصدر بالرمز الذي تم تجميعه في لوحة المصادر.

بدء استخدام المعالجات التمهيدية

تتسبب خرائط المصادر من المعالجات التمهيدية في تحميل أدوات مطوّري البرامج لملفاتك الأصلية بالإضافة إلى الملفات التي تم تصغيرها.

سيشغِّل Chrome حاليًا الرمز المصغَّر، إلا أنّ لوحة المصادر ستعرض لك الرمز الذي أنشأته. يمكنك ضبط نقاط الإيقاف والتنقل خلال التعليمات البرمجية في ملفات المصدر، وسيتم ربط جميع الأخطاء والسجلات ونقاط الإيقاف تلقائيًا.

يمنحك هذا مظهر تصحيح الرمز البرمجي كما كتبته، على عكس التعليمة البرمجية التي يعرضها خادم التطوير وينفذها المتصفح.

لاستخدام خرائط المصدر في لوحة المصادر:

• استخدِم فقط المعالجات التمهيدية التي يمكنها إنشاء خرائط المصدر.
• تحقق من أن خادم الويب يمكنه عرض خرائط المصدر.

استخدام معالج مسبق متوافق

تشمل المعالجات المسبقة الشائعة المستخدمة مع خرائط المصدر، على سبيل المثال لا الحصر:

• أدوات الترجمة: Babel
• برامج التحويل البرمجي: TypeScript وDart
• التصغيرات الصغيرة: terser
• الحزم وخوادم التطوير: Webpack وVite وesbuild وParcel

للحصول على قائمة موسّعة، راجِع خرائط المصدر: اللغات والأدوات والمعلومات الأخرى.

تفعيل خرائط المصدر في "الإعدادات"

ضمن الإعدادات > الإعدادات المفضّلة > المصادر، تأكّد من وضع علامة في المربّع تفعيل خرائط مصدر JavaScript.

التحقّق من تحميل خرائط المصدر بنجاح

يُرجى الاطّلاع على موارد المطوِّرين: عرض خرائط المصدر وتحميلها يدويًا.

تصحيح الأخطاء باستخدام خرائط المصدر

عندما تكون خرائط المصدر جاهزة ومفعّلة، يمكنك إجراء ما يلي:

1. افتح مصادر موقعك الإلكتروني في لوحة المصادر.

2. للتركيز فقط على الرمز البرمجي الذي تؤلفه، يمكنك تجميع الملفات التي تم تأليفها ونشرها في شجرة الملفات. وبعد ذلك، وسِّع القسم Authored وافتح ملف المصدر الأصلي في Editor (المحرر).

   

3. حدِّد نقطة إيقاف كما تفعل عادةً. على سبيل المثال، نقطة تسجيل. ثم قم بتشغيل التعليمة البرمجية.

   

4. لاحِظ أنّ Editor (المحرِّر) يضع رابطًا إلى الملف المنشور في شريط الحالة في أسفل الصفحة. وبالمثل، ينطبق ذلك على ملفات CSS المنشورة.

   

5. افتح درج وحدة التحكم. في هذا المثال، بجانب رسالة نقطة التسجيل، تعرض وحدة التحكُّم رابطًا إلى الملف الأصلي، وليس إلى الملف الذي تم نشره.

   

6. غيِّر نوع نقطة الإيقاف إلى عادي وشغِّل الرمز مرة أخرى. تتوقف عملية التنفيذ مؤقتًا هذه المرة.

   

   لاحظ أن لوحة حزمة المكالمات تعرض اسم الملف الأصلي وليس الملف المنشور.

7. في شريط الحالة في أسفل أداة التعديل، انقر على الرابط الذي يؤدي إلى الملف الذي تم نشره. تنقلك لوحة المصادر إلى الملف المناسب.

عند فتح أي ملف تم نشره، ترسل إليك أدوات مطوّري البرامج إشعارًا في حال العثور على التعليق //# sourceMappingURL والملف الأصلي المرتبط به.

لاحظ أنّ Editor (المحرِّر) اطبع تلقائيًا الملف المنشور بشكل جيد. في الواقع، يحتوي على كل التعليمات البرمجية في سطر واحد، باستثناء تعليق //# sourceMappingURL.

تسمية مكالمات eval() باستخدام "#sourceURL"

تتيح لك #sourceURL تبسيط تصحيح الأخطاء عند التعامل مع مكالمات eval(). يشبه هذا المساعد إلى حد كبير السمة //# sourceMappingURL. لمزيد من المعلومات، راجع مواصفات الإصدار 3 من خريطة المصادر.

يوجِّه التعليق //# sourceURL=/path/to/source.file المتصفّح بالبحث عن الملف المصدر عند استخدام eval(). يساعدك هذا في تسمية تقييماتك والنصوص البرمجية والأنماط المضمنة.

اختبره في صفحة العرض التوضيحي هذه:

1. افتح أدوات مطوري البرامج وانتقِل إلى لوحة المصادر.
2. في هذه الصفحة، أدخِل اسم ملف عشوائيًا في حقل الإدخال تسمية الرمز:.
3. انقر على الزر تجميع. يظهر تنبيه بالمجموع الذي تم تقييمه من مصدر CoffeeScript.
4. في شجرة الملفات ضمن لوحة الصفحة، افتح ملفًا جديدًا باسم الملف المخصَّص الذي أدخلته. ويتضمّن رمز JavaScript المجمَّع الذي يحتوي على التعليق // #sourceURL مع الاسم الأصلي للملف المصدر.
5. لفتح ملف المصدر، انقر على الرابط في شريط الحالة في محرِّر.