خرائط المصدر هي أداة مهمة في تطوير الويب الحديث والتي تتيح تصحيح الأخطاء أسهل بكثير. تستكشف هذه الصفحة أساسيات خرائط المصدر وكيفية وكيف تعمل على تحسين تجربة تصحيح الأخطاء.
الحاجة إلى خرائط المصدر
تم إنشاء تطبيقات الويب المبكرة بمستوى منخفض من التعقيد. نشر مطوّرو برامج HTML وCSS وJavaScript على الويب مباشرةً.
يمكن أن تحتاج تطبيقات الويب الأكثر حداثة وتعقيدًا إلى مجموعة متنوعة من الأدوات في سير عمل التطوير. على سبيل المثال:
- لغات النماذج والمعالجات المسبقة لـ HTML: Pug، Nunjucks، تسجيل الملاحظة:
- المعالجات المسبقة في CSS: SCSS، أقل، وPostCSS.
- إطارات عمل JavaScript: Angular وReact Vue وSvelte
- أطر عمل JavaScript الوصفية: Next.js Nuxt وAstro
- لغات البرمجة عالية المستوى: TypeScript، لعبة رمي السهام، CoffeeScript
![لمحة موجزة عن الأدوات المختلفة.](https://web.dev/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c.png?authuser=19&hl=ar)
تتطلب هذه الأدوات عملية تصميم لتحويل الرمز إلى رمز 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 أو
التمثيل البصري لخريطة المصدر:
![مؤثر عرض تصور خريطة المصدر.](https://web.dev/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59.png?authuser=19&hl=ar)
يعرض العمود الذي تم إنشاؤه على اليمين المحتوى المضغوط الأصلي المصدر الأصلي.
يعمل أداة العرض المرئي على ترميز كل سطر في العمود الأصلي باستخدام الرمز المقابل في العمود مُنشَأ.
يعرض قسم عمليات التعيين عمليات الربط التي تم فك ترميزها للرمز. على سبيل المثال،
الإدخال 65 -> 2:2
يعني:
- رمز تم إنشاؤه: تبدأ الكلمة
const
من الموضع 65 في المحتوى المضغوط. - الرمز الأصلي: تبدأ الكلمة
const
من السطر 2 والعمود 2 في المحتوى الأصلي.
![إدخال التعيين.](https://web.dev/static/articles/source-maps/image/mapping-entry-dc9df15808405.png?authuser=19&hl=ar)
65 -> 2:2
يتيح ذلك للمطوّرين التعرّف بسرعة على العلاقة بين الرمز الذي تم تصغيره. والتعليمات البرمجية الأصلية، مما يجعل تصحيح الأخطاء عملية أكثر سلاسة.
وتطبق أدوات مطوّري البرامج خرائط المصادر هذه لمساعدتك في تحديد تصحيح الأخطاء بسرعة في المتصفح.
![أدوات المطوّرين التي تطبّق خريطة مصادر](https://web.dev/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb.png?authuser=19&hl=ar)
إضافات خريطة المصادر
تتوافق خرائط المصادر مع حقول الإضافات المخصّصة التي تبدأ ببادئة x_
. وَاحِدْ
المثال هو حقل الإضافة x_google_ignoreList
الذي اقترحه Chrome
أدوات مطوري البرامج: الاطّلاع على x_google_ignoreList
للتعرُّف على المزيد من المعلومات عن كيفية الاستفادة من هذه الإضافات في التركيز على الرمز البرمجي.
عيوب خريطة المصادر
للأسف، لا تكون عمليات ربط المصادر دائمًا كاملة كما تريد.
في مثالنا الأول، تم تحسين المتغير greet
أثناء عملية الإنشاء
على الرغم من أن قيمتها تكون مضمنة مباشرة في إخراج السلسلة النهائية.
![لم يتم تعيين رسالة الترحيب للمتغيّر.](https://web.dev/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171.png?authuser=19&hl=ar)
greet
في الأصل
الرمز غير متوفّر في عملية الربط.في هذه الحالة، عند تصحيح أخطاء الرمز البرمجي، قد لا تتمكّن أدوات المطوّرين من إجراء ما يلي: لاستنتاج القيمة الفعلية وعرضها. يمكن أن يؤدي هذا النوع من الأخطاء إلى جعل المراقبة والتحليل بشكل أكثر صعوبة.
![متغير الترحيب غير محدد.](https://web.dev/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26.png?authuser=19&hl=ar)
greet
".هذه مشكلة تحتاج إلى حلها في تصميم خرائط المصدر. وَاحِدْ هو تضمين معلومات النطاق في خرائط المصدر في بالطريقة نفسها التي تفعل بها لغات البرمجة الأخرى مع معلومات تصحيح الأخطاء الخاصة بها.
ومع ذلك، يتطلب هذا الأمر من المنظومة المتكاملة بأكملها العمل معًا من أجل تحسين مواصفات خريطة المصادر وتنفيذها. لمتابعة الإجراءات الجارية على تحسين قابلية تصحيح الأخطاء باستخدام خرائط المصدر، راجع اقتراح الإصدار 4 من "خرائط المصدر" على GitHub.