সোর্স ম্যাপ ব্যবহার করার পরিবর্তে আপনার আসল কোড ডিবাগ করুন

Meggin Kearney

Paul Bakaus

Sofia Emelianova

আপনার ক্লায়েন্ট-সাইড কোডটি পঠনযোগ্য এবং ডিবাগযোগ্য রাখুন এমনকি আপনি এটিকে একত্রিত, ছোট বা সংকলন করার পরেও। সোর্স প্যানেলে আপনার কম্পাইল করা কোডে আপনার সোর্স কোড ম্যাপ করতে সোর্স ম্যাপ ব্যবহার করুন।

প্রিপ্রসেসর দিয়ে শুরু করুন

প্রিপ্রসেসরের সোর্স ম্যাপের কারণে DevTools আপনার ছোট ফাইলগুলি ছাড়াও আপনার আসল ফাইলগুলিকে লোড করে।

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

আপনার ডেভেলপমেন্ট সার্ভার দ্বারা পরিবেশিত এবং ব্রাউজার দ্বারা কার্যকর করা কোডের বিপরীতে এটি আপনাকে কোডটিকে ডিবাগ করার চেহারা দেয় যেমন আপনি এটি লিখেছেন।

উত্স প্যানেলে উত্স মানচিত্র ব্যবহার করতে:

• শুধুমাত্র প্রিপ্রসেসর ব্যবহার করুন যা উৎস মানচিত্র তৈরি করতে পারে।
• আপনার ওয়েব সার্ভার সোর্স ম্যাপ পরিবেশন করতে পারে তা যাচাই করুন।

একটি সমর্থিত প্রিপ্রসেসর ব্যবহার করুন

উৎস মানচিত্রের সংমিশ্রণে ব্যবহৃত সাধারণ প্রিপ্রসেসরগুলির মধ্যে রয়েছে কিন্তু সীমাবদ্ধ নয়:

• ট্রান্সপিলার: বাবেল
• কম্পাইলার: টাইপস্ক্রিপ্ট এবং ডার্ট
• মিনিফায়ার: টারসার
• বান্ডলার এবং ডেভেলপমেন্ট সার্ভার: Webpack , Vite , esbuild , এবং Parcel

একটি বর্ধিত তালিকার জন্য, উত্স মানচিত্র দেখুন: ভাষা, সরঞ্জাম এবং অন্যান্য তথ্য ।

সেটিংসে সোর্স ম্যাপ চালু করুন

ইন সেটিংস > পছন্দ > উত্স , চেক করতে ভুলবেন না জাভাস্ক্রিপ্ট উৎস মানচিত্র ।

উৎস মানচিত্র সফলভাবে লোড হয়েছে কিনা তা পরীক্ষা করুন

বিকাশকারী সংস্থানগুলি দেখুন: ম্যানুয়ালি উত্স মানচিত্রগুলি দেখুন এবং লোড করুন ৷

উৎস মানচিত্র দিয়ে ডিবাগিং

উত্স মানচিত্র প্রস্তুত এবং সক্ষম হলে, আপনি নিম্নলিখিতগুলি করতে পারেন:

1. উত্স প্যানেলে আপনার ওয়েবসাইটের উত্সগুলি খুলুন ৷

2. শুধুমাত্র আপনি যে কোডটি লেখেন তার উপর ফোকাস করতে, ফাইল ট্রিতে ফাইল রচয়িত এবং স্থাপন করা হয়েছে । তারপর প্রসারিত লেখক বিভাগ এবং সম্পাদকে আপনার মূল উৎস ফাইল খুলুন।

   

3. আপনি স্বাভাবিকভাবে একটি ব্রেকপয়েন্ট সেট করুন . উদাহরণস্বরূপ, একটি লগপয়েন্ট । তারপর কোড চালান।

   

4. লক্ষ্য করুন যে সম্পাদক নীচের স্ট্যাটাস বারে স্থাপন করা ফাইলের একটি লিঙ্ক রাখে। একইভাবে, এটি স্থাপন করা CSS ফাইলগুলির জন্য এটি করে।

   

5. কনসোল ড্রয়ার খুলুন । এই উদাহরণে, লগপয়েন্টের বার্তার পাশে, কনসোল মূল ফাইলের একটি লিঙ্ক দেখায়, স্থাপন করা একটি নয়।

   

6. ব্রেকপয়েন্ট টাইপটিকে নিয়মিত একটিতে পরিবর্তন করুন এবং কোডটি আবার চালান। এই সময় ফাঁসি থেমে যায়।

   

   লক্ষ্য করুন যে কল স্ট্যাক ফলকটি মূল ফাইলের নাম দেখায় এবং স্থাপন করা একটি নয়।

7. সম্পাদকের নীচে স্ট্যাটাস বারে, স্থাপন করা ফাইলের লিঙ্কটিতে ক্লিক করুন৷ উত্স প্যানেল আপনাকে সংশ্লিষ্ট ফাইলে নিয়ে যায়।

আপনি যখন কোনো স্থাপন করা ফাইল খোলেন, তখন DevTools আপনাকে সূচিত করে যদি এটি //# sourceMappingURL মন্তব্য এবং সংশ্লিষ্ট আসল ফাইলটি খুঁজে পায়।

লক্ষ্য করুন যে সম্পাদক স্বয়ংক্রিয়ভাবে স্থাপন করা ফাইলটি প্রিন্ট-প্রিন্ট করেছে। বাস্তবে, এটিতে //# sourceMappingURL মন্তব্য ব্যতীত একটি একক লাইনে সমস্ত কোড রয়েছে।

নাম eval() #sourceURL দিয়ে কল করে

eval() কলগুলির সাথে ডিল করার সময় #sourceURL আপনাকে ডিবাগিং সহজ করতে দেয়। এই সাহায্যকারীটি //# sourceMappingURL বৈশিষ্ট্যের সাথে খুব মিল দেখায়। আরও তথ্যের জন্য, সোর্স ম্যাপ V3 স্পেসিফিকেশন দেখুন।

আপনি যখন eval() ব্যবহার করেন তখন //# sourceURL=/path/to/source.file মন্তব্যটি ব্রাউজারকে উত্স ফাইলটি সন্ধান করতে বলে। এটি আপনাকে আপনার মূল্যায়ন এবং ইনলাইন স্ক্রিপ্ট এবং শৈলীর নাম দিতে সহায়তা করে।

এই ডেমো পৃষ্ঠায় এটি পরীক্ষা করুন:

1. DevTools খুলুন এবং উত্স প্যানেলে যান।
2. পৃষ্ঠায়, আপনার কোডের নাম: ইনপুট ক্ষেত্রের মধ্যে একটি নির্বিচারে ফাইলের নাম লিখুন।
3. কম্পাইল বোতামে ক্লিক করুন। CoffeeScript উৎস থেকে মূল্যায়নকৃত সমষ্টির সাথে একটি সতর্কতা উপস্থিত হয়।
4. পৃষ্ঠা ফলকে ফাইল ট্রিতে, আপনার প্রবেশ করা কাস্টম ফাইলের সাথে একটি নতুন ফাইল খুলুন। এটিতে কম্পাইল করা জাভাস্ক্রিপ্ট কোড রয়েছে যেটিতে সোর্স ফাইলের আসল নামের সাথে // #sourceURL মন্তব্য রয়েছে।
5. সোর্স ফাইলটি খুলতে, সম্পাদকের স্ট্যাটাস বারে লিঙ্কটিতে ক্লিক করুন।