مستكشف خرائط المصدر

ما الذي تسجّله خريطة المصدر فعليًا

ملف .map لا يحتوي على كودك الأصلي. في الغالب يحتوي على شيء واحد فقط: جدول مضغوط للمواقع — "السطر 2 والعمود 4110 في الكود المُولَّد جاءا من app.js السطر 88 العمود 12، وكان اسم المُعرِّف هناك total". بعض الخرائط تذهب أبعد وتُضمِّن أيضًا النص الكامل للملف الأصلي (sourcesContent)، لكن هذا الحقل اختياري، والكثير من خرائط الإنتاج — بما فيها خريطة jQuery نفسها كما اتضح — تُنشر بدونه.

هذه الأداة تقرأ هذا الجدول مباشرة، داخل متصفحك، حتى تتمكن من التحقق منه مقابل الواقع بدلًا من الوثوق بادّعاء أداة البناء حول ما أنتجته.

ما يمكنك فعله هنا

• تحميل ملف .map. سترى فورًا كل مسار مصدر مُدرَج فيه، مُرتَّبًا كشجرة، وعدد التطابقات التي تحتويها الخريطة.
• إضافة ملف .js المُولَّد الذي تنتمي إليه (اختياري، لكنه مفيد). بوجوده، يعرض البحث بالسطر/العمود أيضًا الكود المُولَّد الدقيق حول الموضع المطلوب، والنقر على سطر في ذلك المقتطف يملأ حقل السطر تلقائيًا.
• البحث عن أي موضع مُولَّد. تبدأ الأسطر من 1 والأعمدة من 0، تمامًا كما تنص مواصفات source map — نفس الاصطلاح الذي تستخدمه أدوات مطوري Chrome وأي أداة جافاسكريبت داخليًا. ليست كل بايتات الحزمة مُخطَّطة: كود الإقلاع، غلاف الوحدة، ومخرجات المُصغِّر بين الرموز غالبًا لا تحتوي على أي تخطيط، وهذه الأداة تُصرِّح بذلك بوضوح بدلًا من التخمين.
• قراءة المصدر الأصلي، عند توفره. انقر على أي ملف في الشجرة لرؤية محتواه المُضمَّن (sourcesContent). عندما لا يحتوي مصدر ما على نص مُضمَّن — التخطيط موجود، لكن النص غير موجود — سترى تنبيهًا صريحًا بدلًا من لوحة فارغة توحي بعدم وجود شيء لعرضه.

لماذا يهم هذا

خرائط المصدر هي ما يحوّل تتبع خطأ يشير إلى bundle.min.js:2:184031 إلى تتبع يشير إلى src/components/Cart.jsx:41. عندما تبدو هذه الترجمة خاطئة — خطأ مُبلَّغ عنه في سطر لا معنى له، أو مصحح أخطاء يدخل الملف الخاطئ — أسرع طريقة لمعرفة ما إذا كانت الخريطة معطوبة أم أن نموذجك الذهني هو المعطوب، هي سؤال الخريطة مباشرة. وهذا بالضبط ما تفعله هذه الأداة.

الخصوصية

يُحلَّل كلا الملفين بالكامل داخل متصفحك. لا يُرفَع شيء إلى أي مكان.