আপনার ক্লায়েন্ট-সাইড কোডটি পঠনযোগ্য এবং ডিবাগযোগ্য রাখুন এমনকি আপনি এটিকে একত্রিত, ছোট বা সংকলন করার পরেও। সোর্স প্যানেলে আপনার কম্পাইল করা কোডে আপনার সোর্স কোড ম্যাপ করতে সোর্স ম্যাপ ব্যবহার করুন।
প্রিপ্রসেসর দিয়ে শুরু করুন
প্রিপ্রসেসরের সোর্স ম্যাপের কারণে DevTools আপনার ছোট ফাইলগুলি ছাড়াও আপনার আসল ফাইলগুলিকে লোড করে।
ক্রোম আসলে আপনার মিনিফাইড কোড চালাবে কিন্তু সোর্স প্যানেল আপনাকে আপনার লেখা কোডটি দেখাবে। আপনি ব্রেকপয়েন্ট সেট করতে পারেন এবং সোর্স ফাইলগুলিতে কোডের মাধ্যমে ধাপ করতে পারেন এবং সমস্ত ত্রুটি, লগ এবং ব্রেকপয়েন্টগুলি স্বয়ংক্রিয়ভাবে ম্যাপ হয়ে যাবে।
আপনার ডেভেলপমেন্ট সার্ভার দ্বারা পরিবেশিত এবং ব্রাউজার দ্বারা কার্যকর করা কোডের বিপরীতে এটি আপনাকে কোডটিকে ডিবাগ করার চেহারা দেয় যেমন আপনি এটি লিখেছেন।
উত্স প্যানেলে উত্স মানচিত্র ব্যবহার করতে:
- শুধুমাত্র প্রিপ্রসেসর ব্যবহার করুন যা উৎস মানচিত্র তৈরি করতে পারে।
- আপনার ওয়েব সার্ভার সোর্স ম্যাপ পরিবেশন করতে পারে তা যাচাই করুন।
একটি সমর্থিত প্রিপ্রসেসর ব্যবহার করুন
উৎস মানচিত্রের সংমিশ্রণে ব্যবহৃত সাধারণ প্রিপ্রসেসরগুলির মধ্যে রয়েছে কিন্তু সীমাবদ্ধ নয়:
- ট্রান্সপিলার: বাবেল
- কম্পাইলার: টাইপস্ক্রিপ্ট এবং ডার্ট
- মিনিফায়ার: টারসার
- বান্ডলার এবং ডেভেলপমেন্ট সার্ভার: Webpack , Vite , esbuild , এবং Parcel
একটি বর্ধিত তালিকার জন্য, উত্স মানচিত্র দেখুন: ভাষা, সরঞ্জাম এবং অন্যান্য তথ্য ।
সেটিংসে সোর্স ম্যাপ চালু করুন
ইন 
সেটিংস > পছন্দ > উত্স , চেক করতে ভুলবেন না 
জাভাস্ক্রিপ্ট উৎস মানচিত্র ।
উৎস মানচিত্র সফলভাবে লোড হয়েছে কিনা তা পরীক্ষা করুন
বিকাশকারী সংস্থানগুলি দেখুন: ম্যানুয়ালি উত্স মানচিত্রগুলি দেখুন এবং লোড করুন ৷
উৎস মানচিত্র দিয়ে ডিবাগিং
উত্স মানচিত্র প্রস্তুত এবং সক্ষম হলে, আপনি নিম্নলিখিতগুলি করতে পারেন:
- উত্স প্যানেলে আপনার ওয়েবসাইটের উত্সগুলি খুলুন ৷
শুধুমাত্র আপনি যে কোডটি লেখেন তার উপর ফোকাস করতে, ফাইল ট্রিতে ফাইল রচয়িত এবং স্থাপন করা হয়েছে । তারপর প্রসারিত
লেখক বিভাগ এবং সম্পাদকে আপনার মূল উৎস ফাইল খুলুন।