আপনি যদি Chrome 111 বা তার পরে থাকেন তবে আপনি হয়তো ইতিমধ্যেই লক্ষ্য করেছেন যে আমরা আমাদের ব্রেকপয়েন্ট সাইডবারের ডিজাইন পরিবর্তন করেছি। ক্রোম 113 এর সাথে, নতুন সাইডবার পুরোনো ডিজাইনকে প্রতিস্থাপন করে। পুনরায় ডিজাইনের সাথে আমাদের লক্ষ্য ছিল ব্রেকপয়েন্ট ওয়ার্কফ্লোকে উন্নত করা :
সেট করা সমস্ত ব্রেকপয়েন্টের উপর একটি ভাল ওভারভিউ প্রদান করা। ব্রেকপয়েন্ট সহ সাধারণ ব্যবহারকারীর কর্মপ্রবাহকে সহজে অ্যাক্সেস করা এবং আরও স্বজ্ঞাত করা । শীতল বিদ্যমান ব্রেকপয়েন্ট বৈশিষ্ট্য দৃশ্যমান করা।
এই পোস্টটি অনুমান করে যে আপনি ব্রেকপয়েন্ট ব্যবহার করে ডিবাগিংয়ের সাথে ইতিমধ্যেই পরিচিত। আপনি যদি আগে ব্রেকপয়েন্ট ব্যবহার না করে থাকেন, তাহলে ব্রেকপয়েন্টের এই ওভারভিউতে যান এবং আপনি কীভাবে আপনার কোড ডিবাগ করতে ব্রেকপয়েন্ট ব্যবহার করতে পারেন সে সম্পর্কে আরও জানুন।
এখন, আসুন দেখে নেওয়া যাক পুনঃডিজাইনটি কী অফার করে এবং আপনি কীভাবে নতুন সাইডবার ব্যবহার করতে পারেন! নোট করুন যে পুনঃডিজাইন নতুন বৈশিষ্ট্যগুলি যোগ করার পরিবর্তে বিদ্যমান বৈশিষ্ট্যগুলিকে ব্যবহার করার জন্য আরও স্বজ্ঞাত এবং অ্যাক্সেস করা সহজ করার দিকে মনোনিবেশ করে৷
আপনার কোড কেন একটি ত্রুটি নিক্ষেপ করছে তা তদন্ত করতে ব্যতিক্রমগুলিতে বিরতি দিন
আপনার কোড একটি ব্যতিক্রম নিক্ষেপ? বিরক্ত না! Chrome DevTools আপনাকে ব্যতিক্রমগুলিতে বিরতি দেওয়ার অনুমতি দেয় যেখানে আপনার ব্যতিক্রমটি নিক্ষেপ করা হয় সেখানে কার্যকর করা বন্ধ করতে। এটি আপনাকে তদন্ত করতে এবং আপনার কোডটি কোন ত্রুটি ছুঁড়েছে এমন পরিস্থিতিতে আরও ভালভাবে বুঝতে সাহায্য করতে পারে। আপনি সাইডবারে সংশ্লিষ্ট চেকবক্স চেক করে ধরা ব্যতিক্রম, ধরা না পড়া ব্যতিক্রম বা উভয়েই বিরতি দিতে চান কিনা তা চয়ন করতে পারেন।
আপনার ব্রেকপয়েন্টগুলি পরিচালনা করুন: প্রাসঙ্গিক ব্রেকপয়েন্ট গোষ্ঠীগুলিকে প্রসারিত করুন এবং প্রাসঙ্গিক বিষয়গুলিতে ফোকাস করতে অন্যদের ভেঙে দিন
ব্রেকপয়েন্টগুলি বিভিন্ন ফাইল জুড়ে ছড়িয়ে থাকতে পারে। ব্রেকপয়েন্ট সাইডবার তাদের অন্তর্গত ফাইল অনুযায়ী ব্রেকপয়েন্ট গ্রুপ. প্রাসঙ্গিক ব্রেকপয়েন্ট গোষ্ঠীগুলিকে প্রসারিত করে এবং অবশিষ্টগুলিকে ভেঙে ফেলার মাধ্যমে আপনার বর্তমান ডিবাগিং সেশনের জন্য গুরুত্বপূর্ণ সেগুলির উপর ফোকাস করুন৷
আপনার ব্রেকপয়েন্ট পরিচালনা করুন: কোডে যেতে, সরাতে বা ব্রেকপয়েন্ট সক্রিয়/অক্ষম করতে এক ক্লিকে
ব্রেকপয়েন্ট সাইডবার আপনাকে এক ক্লিকে সাধারণ কাজগুলি সম্পন্ন করতে দেয়। আপনি কিভাবে করতে পারেন তার একটি ওভারভিউ এখানে...
কোড এডিটরে ব্রেকপয়েন্ট অবস্থানে নেভিগেট করুন। একটি ফাইলের মধ্যে একটি ব্রেকপয়েন্ট বা সমস্ত ব্রেকপয়েন্ট সরান। একটি ফাইলের মধ্যে একটি ব্রেকপয়েন্ট বা সমস্ত ব্রেকপয়েন্ট সক্ষম বা নিষ্ক্রিয় করুন৷
এবং এই সব এক ক্লিকে! অবশ্যই, এই বিকল্পগুলি প্রসঙ্গ মেনুতেও উপলব্ধ:
ব্রেকপয়েন্ট কোড স্নিপেটে ক্লিক করে ব্রেকপয়েন্ট অবস্থানে যান
আপনি যে কোডে আপনার ব্রেকপয়েন্ট সেট করেছেন তা পরীক্ষা করতে চান এবং আশেপাশের কোড বিশ্লেষণ করতে চান? সাইডবারের মধ্যে একটি ব্রেকপয়েন্টের কোড স্নিপেটে ক্লিক করুন, এবং এটি কোড এডিটরে কোড অবস্থান খুলবে।
রিমুভ বোতামে ক্লিক করে একটি ফাইলের মধ্যে একটি একক ব্রেকপয়েন্ট বা সমস্ত ব্রেকপয়েন্ট সরান
একটি ব্রেকপয়েন্ট বা একটি ব্রেকপয়েন্ট গোষ্ঠীর উপর হোভার করুন একটি রিমুভ বোতাম প্রকাশ করতে যা ক্লিকে একটি ফাইলের একটি একক বা সমস্ত ব্রেকপয়েন্ট মুছে দেয়।
একটি ফাইলের মধ্যে একটি একক বা সমস্ত ব্রেকপয়েন্ট অক্ষম করুন
এটি সক্রিয় বা নিষ্ক্রিয় করতে একটি ব্রেকপয়েন্টের পাশের চেকবক্সটি চেক বা আনচেক করুন।
একটি ফাইলের সমস্ত ব্রেকপয়েন্ট সক্রিয় বা নিষ্ক্রিয় করতে, ব্রেকপয়েন্ট গ্রুপের উপর হোভার করুন এবং ফাইলের নামের পাশে প্রদর্শিত চেকবক্সটি চেক বা আনচেক করুন।
এই কম পরিচিত ব্রেকপয়েন্ট বৈশিষ্ট্যগুলি ব্যবহার করুন: শর্তসাপেক্ষ ব্রেকপয়েন্ট এবং লগপয়েন্ট
ব্রেকপয়েন্টের অবস্থা সম্পাদনা করুন বা একটি ব্রেকপয়েন্ট সম্পাদনা করে আপনার লগপয়েন্ট লগ পরিবর্তন করুন
একটি ব্রেকপয়েন্ট কন্ডিশন এডিট করুন বা একটি ব্রেকপয়েন্টের উপর হোভার করে এবং প্রদর্শিত সম্পাদনা বোতামটি ক্লিক করে লগ করুন। এটি ব্রেকপয়েন্টের ধরন এবং আপনার ব্রেকপয়েন্টের বিবরণ পরিবর্তন করার জন্য একটি ডায়ালগ খোলে।
বিকল্পভাবে, কোড এডিটরে ব্রেকপয়েন্টের লাইনটি নির্বাচন করুন এবং ব্রেকপয়েন্ট সম্পাদনা ডায়ালগ খুলতে Linux-এ Control + Alt + b এবং Mac-এ Command + Alt + b টাইপ করুন।
আপনি সাইডবারে ব্রেকপয়েন্টের উপর ঘোরার মাধ্যমে আপনার অবস্থা বা লগপয়েন্ট লগটি দ্রুত দুবার পরীক্ষা করতে পারেন:
উপসংহার
ব্রেকপয়েন্ট সাইডবার পুনরায় ডিজাইন করার পিছনে আমাদের লক্ষ্য ছিল ব্রেকপয়েন্টের সাথে ডিবাগিং সহজ করা। সবচেয়ে গুরুত্বপূর্ণ, আমরা জিনিসগুলিকে আরও সুগঠিত এবং সহজে অ্যাক্সেস এবং বোঝার লক্ষ্য রেখেছি। আমরা আশা করি এই উন্নতিগুলি আপনার পরবর্তী ডিবাগিং সেশনে আপনাকে সাহায্য করবে!
আপনার আরও উন্নতির জন্য পরামর্শ থাকলে, একটি বাগ ফাইল করে আমাদের জানান!
প্রিভিউ চ্যানেল ডাউনলোড করুন
আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসেবে Chrome Canary , Dev বা Beta ব্যবহার করার কথা বিবেচনা করুন। এই পূর্বরূপ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, অত্যাধুনিক ওয়েব প্ল্যাটফর্ম API পরীক্ষা করে এবং আপনার ব্যবহারকারীদের আগে আপনার সাইটে সমস্যাগুলি খুঁজে পায়!
Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে
পোস্টের নতুন বৈশিষ্ট্য এবং পরিবর্তনগুলি বা DevTools সম্পর্কিত অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন৷
- crbug.com এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
- আরও বিকল্প ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন
> সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন । - @ChromeDevTools- এ টুইট করুন।
- আমাদের DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷