ما هي خرائط المصدر؟

Jecelyn Yeen

خرائط المصدر هي أداة مهمة في تطوير الويب الحديث والتي تتيح تصحيح الأخطاء أسهل بكثير. تستكشف هذه الصفحة أساسيات خرائط المصدر وكيفية وكيف تعمل على تحسين تجربة تصحيح الأخطاء.

الحاجة إلى خرائط المصدر

تم إنشاء تطبيقات الويب المبكرة بمستوى منخفض من التعقيد. نشر مطوّرو برامج HTML وCSS وJavaScript على الويب مباشرةً.

يمكن أن تحتاج تطبيقات الويب الأكثر حداثة وتعقيدًا إلى مجموعة متنوعة من الأدوات في سير عمل التطوير. على سبيل المثال:

• لغات النماذج والمعالجات المسبقة لـ HTML: Pug، Nunjucks، تسجيل الملاحظة:
• المعالجات المسبقة في CSS: SCSS، أقل، وPostCSS.
• إطارات عمل JavaScript: Angular وReact Vue وSvelte
• أطر عمل JavaScript الوصفية: Next.js Nuxt وAstro
• لغات البرمجة عالية المستوى: TypeScript، لعبة رمي السهام، CoffeeScript

بعض أدوات تطوير تطبيقات الويب الشائعة.

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

على سبيل المثال، باستخدام أدوات التصميم، يمكننا تحويل ما يلي وضغطه TypeScript في سطر واحد من JavaScript. يمكنك تجربتها بنفسك في هذا العرض التوضيحي على GitHub.

/* A TypeScript demo: example.ts */

document.querySelector('button')?.addEventListener('click', () => {
  const num: number = Math.floor(Math.random() * 101);
  const greet: string = 'Hello';
  (document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;
  console.log(num);
});

وستكون النسخة المضغوطة كما يلي:

/* A compressed JavaScript version of the TypeScript demo: example.min.js  */

document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));

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

إنشاء خرائط مصادر

خرائط المصدر هي الملفات التي تنتهي أسماؤها بـ .map (على سبيل المثال، example.min.js.map وstyles.css.map). يمكن إنشاؤها بواسطة معظم بما في ذلك Vite وwebpack الدمج وقطعة الأراضي بناء.

تتضمّن بعض الأدوات خرائط المصدر تلقائيًا. قد يحتاج البعض الآخر التكوين لإنتاجها:

/* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */

export default defineConfig({
  build: {
    sourcemap: true, // enable production source maps
  },
  css: {
    devSourcemap: true // enable CSS source maps during development
  }
})

فهم خريطة المصادر

للمساعدة في تصحيح الأخطاء، تحتوي ملفات خرائط المصادر هذه على معلومات أساسية حول كيفية ارتباط التعليمة البرمجية المجمعة بالتعليمات البرمجية الأصلية. فيما يلي مثال على خريطة المصادر:

{
  "mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
  "sources": ["src/script.ts"],
  "sourcesContent": ["document.querySelector('button')..."],
  "names": ["document","querySelector", ...],
  "version": 3,
  "file": "example.min.js.map"
}

لفهم كل حقل من هذه الحقول، يمكنك قراءة مواصفات خريطة المصدر أو بنية خريطة المصدر:

إنّ الجزء الأهم في خريطة المصدر هو الحقل mappings. تستخدم سلسلة VLQ base 64 المشفَّرة لتعيين الأسطر والمواقع في الملف المجمّع إلى الملف الأصلي المقابل الملف. يمكنك عرض هذا التعيين باستخدام مصور خريطة مصدر مثل source-map-visualization أو التمثيل البصري لخريطة المصدر:

عرض مرئي لمثال الرمز البرمجي السابق، تم إنشاؤه بواسطة فيديو يعرض

يعرض العمود الذي تم إنشاؤه على اليمين المحتوى المضغوط الأصلي المصدر الأصلي.

يعمل أداة العرض المرئي على ترميز كل سطر في العمود الأصلي باستخدام الرمز المقابل في العمود مُنشَأ.

يعرض قسم عمليات التعيين عمليات الربط التي تم فك ترميزها للرمز. على سبيل المثال، الإدخال 65 -> 2:2 يعني:

• رمز تم إنشاؤه: تبدأ الكلمة const من الموضع 65 في المحتوى المضغوط.
• الرمز الأصلي: تبدأ الكلمة const من السطر 2 والعمود 2 في المحتوى الأصلي.

التمثيل المرئي للرسم البياني، مع التركيز على الإدخال 65 -> 2:2

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

وتطبق أدوات مطوّري البرامج خرائط المصادر هذه لمساعدتك في تحديد تصحيح الأخطاء بسرعة في المتصفح.

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

إضافات خريطة المصادر

تتوافق خرائط المصادر مع حقول الإضافات المخصّصة التي تبدأ ببادئة x_. وَاحِدْ المثال هو حقل الإضافة x_google_ignoreList الذي اقترحه Chrome أدوات مطوري البرامج: الاطّلاع على x_google_ignoreList للتعرُّف على المزيد من المعلومات عن كيفية الاستفادة من هذه الإضافات في التركيز على الرمز البرمجي.

عيوب خريطة المصادر

للأسف، لا تكون عمليات ربط المصادر دائمًا كاملة كما تريد. في مثالنا الأول، تم تحسين المتغير greet أثناء عملية الإنشاء على الرغم من أن قيمتها تكون مضمنة مباشرة في إخراج السلسلة النهائية.

المتغير greet في الأصل الرمز غير متوفّر في عملية الربط.

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

لا يمكن لأداة المطوّرين العثور على قيمة في "greet".

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

ومع ذلك، يتطلب هذا الأمر من المنظومة المتكاملة بأكملها العمل معًا من أجل تحسين مواصفات خريطة المصادر وتنفيذها. لمتابعة الإجراءات الجارية على تحسين قابلية تصحيح الأخطاء باستخدام خرائط المصدر، راجع اقتراح الإصدار 4 من "خرائط المصدر" على GitHub.