উৎস মানচিত্র কি?

Jecelyn Yeen

সোর্স ম্যাপ আধুনিক ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ টুল যা ডিবাগিংকে উল্লেখযোগ্যভাবে সহজ করে তোলে। এই পৃষ্ঠাটি উত্স মানচিত্রের মূল বিষয়গুলি, কীভাবে সেগুলি তৈরি করা হয় এবং কীভাবে তারা ডিবাগিং অভিজ্ঞতা উন্নত করে তা অন্বেষণ করে৷

উৎস মানচিত্র জন্য প্রয়োজন

প্রথম দিকের ওয়েব অ্যাপগুলি কম জটিলতার সাথে তৈরি করা হয়েছিল। বিকাশকারীরা সরাসরি ওয়েবে HTML, CSS এবং JavaScript ফাইল স্থাপন করেছে।

আরও আধুনিক এবং জটিল ওয়েব অ্যাপের ডেভেলপমেন্ট ওয়ার্কফ্লোতে বিভিন্ন ধরনের টুলের প্রয়োজন হতে পারে। যেমন:

• টেমপ্লেটিং ভাষা এবং এইচটিএমএল প্রিপ্রসেসর: পাগ , নানজাকস , মার্কডাউন ।
• CSS প্রিপ্রসেসর: SCSS , LESS , PostCSS ।
• জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক: কৌণিক , প্রতিক্রিয়া , Vue , Svelte ।
• জাভাস্ক্রিপ্ট মেটা ফ্রেমওয়ার্ক: Next.js , Nuxt , Astro ।
• উচ্চ-স্তরের প্রোগ্রামিং ভাষা: টাইপস্ক্রিপ্ট , ডার্ট , কফিস্ক্রিপ্ট ।

এই টুলগুলির জন্য আপনার কোড স্ট্যান্ডার্ড HTML, JavaScript এবং CSS-এ ট্রান্সপিল করার জন্য একটি বিল্ড প্রক্রিয়া প্রয়োজন যা ব্রাউজার বুঝতে পারে। Terser এর মতো একটি টুল ব্যবহার করে এই ফাইলগুলিকে ছোট করে এবং একত্রিত করে কর্মক্ষমতা অপ্টিমাইজ করাও একটি সাধারণ অভ্যাস।

উদাহরণস্বরূপ, বিল্ড টুল ব্যবহার করে, আমরা নিম্নলিখিত টাইপস্ক্রিপ্ট ফাইলটিকে জাভাস্ক্রিপ্টের একটি লাইনে ট্রান্সপিল এবং কম্প্রেস করতে পারি। আপনি গিটহাবের এই ডেমোতে নিজের জন্য এটি চেষ্টা করতে পারেন।

/* 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 , Rollup , Parcel , এবং esbuild সহ বেশিরভাগ বিল্ড টুল দ্বারা এগুলি তৈরি করা যেতে পারে৷

কিছু টুল ডিফল্টরূপে উৎস মানচিত্র অন্তর্ভুক্ত করে। অন্যদের তাদের উত্পাদন করতে অতিরিক্ত কনফিগারেশনের প্রয়োজন হতে পারে:

/* 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 বেস 64 এনকোডেড স্ট্রিং ব্যবহার করে কম্পাইল করা ফাইলের লাইন এবং অবস্থানগুলিকে সংশ্লিষ্ট আসল ফাইলে ম্যাপ করতে। সোর্স-ম্যাপ-ভিজ্যুয়ালাইজেশন বা সোর্স ম্যাপ ভিজ্যুয়ালাইজেশনের মতো সোর্স ম্যাপ ভিজ্যুয়ালাইজার ব্যবহার করে আপনি এই ম্যাপিংটি দেখতে পারেন।

বাম দিকে জেনারেট করা কলামটি সংকুচিত কন্টেন্ট দেখায় এবং মূল কলামটি আসল উৎস দেখায়।

ভিজ্যুয়ালাইজার মূল কলামের প্রতিটি লাইনকে উত্পন্ন কলামে তার সংশ্লিষ্ট কোডের সাথে রঙ-কোড করে।

ম্যাপিং বিভাগ কোডের ডিকোড করা ম্যাপিং দেখায়। উদাহরণস্বরূপ, এন্ট্রি 65 -> 2:2 মানে:

• জেনারেটেড কোড: কম্প্রেসড কন্টেন্টের 65 পজিশন থেকে const শব্দটি শুরু হয়।
• মূল কোড: মূল বিষয়বস্তুর লাইন 2 এবং কলাম 2 থেকে const শুরু হয়।

এটি ডেভেলপারদের দ্রুত মিনিফাইড কোড এবং আসল কোডের মধ্যে সম্পর্ক সনাক্ত করতে দেয়, যা ডিবাগিংকে একটি মসৃণ প্রক্রিয়া করে তোলে।

ব্রাউজার বিকাশকারী সরঞ্জামগুলি ব্রাউজারে আপনার ডিবাগিং সমস্যাগুলি দ্রুত চিহ্নিত করতে সহায়তা করার জন্য এই উত্স মানচিত্রগুলি প্রয়োগ করে৷

উৎস মানচিত্র এক্সটেনশন

উৎস মানচিত্র কাস্টম এক্সটেনশন ক্ষেত্র সমর্থন করে যা একটি x_ উপসর্গ দিয়ে শুরু হয়। একটি উদাহরণ হল Chrome DevTools দ্বারা প্রস্তাবিত x_google_ignoreList এক্সটেনশন ক্ষেত্র। এই এক্সটেনশনগুলি কীভাবে আপনার কোডে ফোকাস করতে সহায়তা করে সে সম্পর্কে আরও জানতে x_google_ignoreList দেখুন৷

উৎস মানচিত্রের ত্রুটি

দুর্ভাগ্যবশত, সোর্স ম্যাপিং সবসময় আপনার প্রয়োজন মতো সম্পূর্ণ হয় না। আমাদের প্রথম উদাহরণে, ভেরিয়েবল greet বিল্ড প্রক্রিয়ার সময় অপ্টিমাইজ করা হয়েছিল, যদিও এর মান সরাসরি চূড়ান্ত স্ট্রিং আউটপুটে এম্বেড করা হয়েছে।

এই ক্ষেত্রে, যখন আপনি কোড ডিবাগ করেন, বিকাশকারী সরঞ্জামগুলি প্রকৃত মান অনুমান করতে এবং প্রদর্শন করতে সক্ষম নাও হতে পারে। এই ধরনের ত্রুটি আপনার কোড পর্যবেক্ষণ এবং বিশ্লেষণ কঠিন করতে পারে.

এটি একটি সমস্যা যা উৎস মানচিত্রের নকশার মধ্যে সমাধান করা প্রয়োজন। একটি সম্ভাব্য সমাধান হল সোর্স ম্যাপে স্কোপের তথ্য অন্তর্ভুক্ত করা যেভাবে অন্যান্য প্রোগ্রামিং ভাষাগুলি তাদের ডিবাগ তথ্যের সাথে করে।

যাইহোক, এর জন্য উৎস মানচিত্রের স্পেসিফিকেশন এবং বাস্তবায়ন উন্নত করতে সমগ্র ইকোসিস্টেমকে একসাথে কাজ করতে হবে। সোর্স ম্যাপের সাথে ডিবাগবিলিটি উন্নত করার চলমান অনুসরণ করতে, GitHub-এ সোর্স ম্যাপ v4- এর প্রস্তাব দেখুন।