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

Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova

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

بدء استخدام المعالجات المُسبَقة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. افتح مصادر موقعك الإلكتروني في لوحة المصادر.
  2. للتركيز فقط على الرمز البرمجي الذي تُنشئه، يمكنك تجميع الملفات المنشأة والمُنشَطة في العرض التدرّجي للملفات. بعد ذلك، وسِّع قسم التأليف المؤلف وافتح ملف المصدر الأصلي في المحرِّر.

    تم فتح الملف الأصلي في قسم "الملف الذي أنشأته".

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

    نقطة تسجيل تم ضبطها في ملف تم إنشاؤه

  4. يضع المحرِّر رابطًا يؤدي إلى الملف الذي تم نشره في شريط الحالة في أسفل الصفحة. ويحدث ذلك بالمثل لملفات CSS المنشورة.

    رابط يؤدي إلى ملفات CSS المنشورة في شريط الحالة

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

    رسالة وحدة التحكّم التي تتضمّن رابطًا يؤدي إلى الملف الأصلي

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

    تم إيقاف التنفيذ مؤقتًا عند نقطة توقف عادية.

    يُرجى ملاحظة أنّ لوحة تسلسل الاستدعاء تعرِض اسم الملف الأصلي وليس الملف الذي تم نشره.

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

الملف الذي تم نشره مع تعليق sourceMappingURL

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

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

اسم eval() يتصل بـ #sourceURL

تتيح لك #sourceURL تبسيط تصحيح الأخطاء عند التعامل مع طلبات eval(). يبدو هذا المساعد مشابهًا جدًا لموقع //# sourceMappingURL. لمزيد من المعلومات، يُرجى الاطّلاع على مواصفات Source Map V3.

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

يمكنك اختبارها على هذه الصفحة التجريبية:

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

تعليق sourceURL والرابط إلى الملف المصدر في شريط الحالة