আপনি যদি ক্রোম ১১১ বা তার পরবর্তী সংস্করণ ব্যবহার করেন, তাহলে হয়তো ইতিমধ্যেই লক্ষ্য করেছেন যে আমরা আমাদের ব্রেকপয়েন্ট সাইডবারের ডিজাইন পরিবর্তন করেছি। ক্রোম ১১৩-এ, নতুন সাইডবারটি পুরোনো ডিজাইনটিকে সম্পূর্ণরূপে প্রতিস্থাপন করেছে। এই নতুন ডিজাইনের মাধ্যমে আমাদের লক্ষ্য ছিল ব্রেকপয়েন্ট ওয়ার্কফ্লোকে উন্নত করা, যা নিম্নোক্ত উপায়ে করা হয়েছে:
সেট করা সমস্ত ব্রেকপয়েন্টের একটি উন্নততর সার্বিক ধারণা প্রদান করা। ব্রেকপয়েন্টসহ সাধারণ ইউজার ওয়ার্কফ্লোকে আরও সহজে অ্যাক্সেসযোগ্য এবং আরও স্বজ্ঞাত করে তোলা। বিদ্যমান চমৎকার ব্রেকপয়েন্ট ফিচারগুলোকে দৃশ্যমান করা।
এই পোস্টটি ধরে নিচ্ছে যে আপনি ব্রেকপয়েন্ট ব্যবহার করে ডিবাগিংয়ের সাথে আগে থেকেই পরিচিত। যদি আপনি আগে ব্রেকপয়েন্ট ব্যবহার না করে থাকেন, তাহলে ব্রেকপয়েন্টের উপর এই ওভারভিউটি দেখুন এবং আপনার কোড ডিবাগ করার জন্য কীভাবে ব্রেকপয়েন্ট ব্যবহার করতে পারেন সে সম্পর্কে আরও জানুন।
এবার চলুন দেখে নেওয়া যাক এই নতুন ডিজাইনে কী কী থাকছে এবং আপনি কীভাবে নতুন সাইডবারটি ব্যবহার করতে পারবেন! উল্লেখ্য যে, এই নতুন ডিজাইনে নতুন ফিচার যোগ করার পরিবর্তে বিদ্যমান ফিচারগুলোকে আরও সহজবোধ্য ও সহজে ব্যবহারযোগ্য করে তোলার ওপর বেশি মনোযোগ দেওয়া হয়েছে।
আপনার কোডে কেন ত্রুটি দেখা দিচ্ছে তা খতিয়ে দেখতে এক্সেপশনের সময় বিরতি দিন।
আপনার কোড কি কোনো এক্সেপশন থ্রো করে? চিন্তা করবেন না! Chrome DevTools আপনাকে এক্সেপশনের সময় কোড পজ করার সুবিধা দেয়, যার ফলে এক্সেপশনটি ঘটার মুহূর্তে আপনি কোডটিকে সেখানেই থামিয়ে দিতে পারেন। এটি আপনাকে আপনার কোডে কী পরিস্থিতিতে এরর হচ্ছে, তা তদন্ত করতে এবং আরও ভালোভাবে বুঝতে সাহায্য করতে পারে। সাইডবারে থাকা সংশ্লিষ্ট চেকবক্সগুলোতে টিক দিয়ে আপনি বেছে নিতে পারেন যে, আপনি কট (caught) এক্সেপশন, আনক্যাচড (uncaught) এক্সেপশন, নাকি উভয় ক্ষেত্রেই কোডটি পজ করতে চান।
আপনার ব্রেকপয়েন্টগুলো পরিচালনা করুন: প্রাসঙ্গিক ব্রেকপয়েন্ট গ্রুপগুলো প্রসারিত করুন এবং প্রাসঙ্গিক বিষয়ের উপর মনোযোগ কেন্দ্রীভূত করতে অন্যগুলো সংকুচিত করুন।
ব্রেকপয়েন্টগুলো একাধিক ফাইলে ছড়িয়ে থাকতে পারে। ব্রেকপয়েন্ট সাইডবারটি ব্রেকপয়েন্টগুলোকে তাদের সংশ্লিষ্ট ফাইল অনুযায়ী গ্রুপ করে। প্রাসঙ্গিক ব্রেকপয়েন্ট গ্রুপগুলো এক্সপ্যান্ড করে এবং বাকিগুলো কলাপ করে আপনার বর্তমান ডিবাগিং সেশনের জন্য শুধু গুরুত্বপূর্ণ ব্রেকপয়েন্টগুলোর উপর মনোযোগ দিন।
আপনার ব্রেকপয়েন্টগুলো পরিচালনা করুন: এক ক্লিকেই কোডে ঝাঁপ দিন, মুছে ফেলুন, অথবা ব্রেকপয়েন্ট চালু/বন্ধ করুন।
ব্রেকপয়েন্ট সাইডবার আপনাকে এক ক্লিকে সাধারণ কাজগুলো সম্পন্ন করার সুযোগ দেয়। আপনি কীভাবে এটি করতে পারেন তার একটি সংক্ষিপ্ত বিবরণ এখানে দেওয়া হলো...
কোড এডিটরে ব্রেকপয়েন্টের অবস্থানে যান। একটি ফাইলের মধ্যে থেকে একটি বা সমস্ত ব্রেকপয়েন্ট মুছে ফেলুন। একটি ফাইলের মধ্যে থেকে একটি বা সমস্ত ব্রেকপয়েন্ট সক্রিয় বা নিষ্ক্রিয় করুন।
আর এই সবকিছুই এক ক্লিকে! অবশ্যই, এই বিকল্পগুলো কনটেক্সট মেনুতেও পাওয়া যায়:
ব্রেকপয়েন্ট কোড স্নিপেটে ক্লিক করে ব্রেকপয়েন্টের অবস্থানে যান।
আপনি কি কোডের কোথায় ব্রেকপয়েন্ট সেট করেছেন তা পরীক্ষা করতে এবং আশেপাশের কোড বিশ্লেষণ করতে চান? সাইডবারের মধ্যে থাকা ব্রেকপয়েন্টের কোড স্নিপেটটিতে শুধু ক্লিক করুন, এবং এটি কোড এডিটরে কোডের সেই অবস্থানটি খুলে দেবে।
রিমুভ বাটনে ক্লিক করে একটি ফাইলের মধ্যে থাকা একটি বা সমস্ত ব্রেকপয়েন্ট মুছে ফেলুন।
কোনো ব্রেকপয়েন্ট বা ব্রেকপয়েন্ট গ্রুপের উপর মাউস রাখলে একটি রিমুভ বাটন দেখা যাবে, যেটি ক্লিক করলে ফাইল থেকে একটি বা সমস্ত ব্রেকপয়েন্ট মুছে যাবে।
একটি ফাইলের মধ্যে থাকা একটি বা সমস্ত ব্রেকপয়েন্ট নিষ্ক্রিয় করুন
কোনো ব্রেকপয়েন্ট চালু বা বন্ধ করতে সেটির পাশের চেকবক্সটি চেক বা আনচেক করুন।
একটি ফাইলের সমস্ত ব্রেকপয়েন্ট সক্রিয় বা নিষ্ক্রিয় করতে, ব্রেকপয়েন্ট গ্রুপটির উপর মাউস রাখুন এবং ফাইলের নামের পাশে প্রদর্শিত চেকবক্সটিতে টিক চিহ্ন দিন বা তুলে দিন।
ব্রেকপয়েন্টের এই কম পরিচিত বৈশিষ্ট্যগুলো ব্যবহার করুন: কন্ডিশনাল ব্রেকপয়েন্ট এবং লগপয়েন্ট।
একটি ব্রেকপয়েন্ট সম্পাদনা করে ব্রেকপয়েন্টের শর্তাবলী পরিবর্তন করুন অথবা আপনার লগপয়েন্ট লগ পরিবর্তন করুন।
কোনো ব্রেকপয়েন্টের উপর মাউস নিয়ে গিয়ে প্রদর্শিত এডিট বোতামে ক্লিক করে ব্রেকপয়েন্টের শর্ত বা লগ সম্পাদনা করুন। এটি আপনার ব্রেকপয়েন্টের ধরন এবং বিবরণ পরিবর্তন করার জন্য একটি ডায়ালগ বক্স খুলবে।
বিকল্পভাবে, কোড এডিটরে ব্রেকপয়েন্টের লাইনটি সিলেক্ট করুন এবং ব্রেকপয়েন্ট এডিট ডায়ালগটি খোলার জন্য লিনাক্সে Control + Alt + b এবং ম্যাকে Command + Alt + b টাইপ করুন।
এছাড়াও, সাইডবারে থাকা ব্রেকপয়েন্টের উপর মাউস রেখে আপনি আপনার কন্ডিশন বা লগপয়েন্ট লগ দ্রুত পুনরায় যাচাই করে নিতে পারেন:
উপসংহার
ব্রেকপয়েন্ট সাইডবারটি নতুন করে ডিজাইন করার পেছনে আমাদের লক্ষ্য ছিল ব্রেকপয়েন্টের সাহায্যে ডিবাগিং আরও সহজ করা। সবচেয়ে গুরুত্বপূর্ণভাবে, আমাদের উদ্দেশ্য ছিল বিষয়গুলোকে আরও সুসংগঠিত করা এবং সেগুলোকে সহজে ব্যবহারযোগ্য ও বোধগম্য করে তোলা। আমরা আশা করি, এই উন্নতিগুলো আপনার পরবর্তী ডিবাগিং সেশনে সহায়ক হবে!
আরও উন্নতির জন্য আপনার কোনো পরামর্শ থাকলে, একটি বাগ রিপোর্ট করে আমাদের জানান!
প্রিভিউ চ্যানেলগুলি ডাউনলোড করুন
আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসেবে Chrome Canary , Dev , বা Beta ব্যবহার করার কথা বিবেচনা করুন। এই প্রিভিউ চ্যানেলগুলো আপনাকে সর্বশেষ DevTools ফিচারগুলো ব্যবহারের সুযোগ দেয়, অত্যাধুনিক ওয়েব প্ল্যাটফর্ম API পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীদের আগেই সাইটের সমস্যাগুলো খুঁজে বের করতে সাহায্য করে!
Chrome DevTools টিমের সাথে যোগাযোগ করুন
DevTools-এর নতুন ফিচার, আপডেট বা অন্য যেকোনো বিষয় নিয়ে আলোচনা করতে নিম্নলিখিত অপশনগুলো ব্যবহার করুন।
- crbug.com- এ আমাদের কাছে মতামত এবং নতুন ফিচারের অনুরোধ জমা দিন।
- DevTools-এর কোনো সমস্যা রিপোর্ট করতে More options > Help > Report a DevTools issue in DevTools-এ যান।
- @ChromeDevTools- কে টুইট করুন।
- 'What's new in DevTools' ইউটিউব ভিডিও অথবা 'DevTools Tips' ইউটিউব ভিডিওগুলিতে মন্তব্য করুন।