মাস্টার ব্রাউজার ডেভ টুলস:অ্যাডভান্সড জাভাস্ক্রিপ্ট ডিবাগিং টেকনিক

একজন বিকাশকারী হিসাবে আপনি প্রায়ই কোড ডিবাগ করতে চান। আপনি হয়তো ইতিমধ্যেই console.log ব্যবহার করেছেন কিছু চ্যালেঞ্জে, যা ডিবাগ করার সবচেয়ে সহজ উপায়।

এই নিবন্ধে আমরা আপনাকে ব্রাউজারগুলির নেটিভ ডিবাগ-টুলগুলি ব্যবহার করে ডিবাগ করার জন্য কিছু দুর্দান্ত কৌশল বলব৷

ফ্রিকোডক্যাম্প কোড এডিটরের একটি সংক্ষিপ্ত অন্তর্দৃষ্টি:

ডিবাগিং এ ঝাঁপিয়ে পড়ার আগে সেই অসাধারণ কোড চেকিং ইঞ্জিন সম্পর্কে কিছু গোপন তথ্য ফাঁস করা যাক FCC এ।

আমরা কোড এডিটর হিসাবে একটি কাস্টমাইজড CodeMirror ব্যবহার করি। একটি eval() ফাংশনটি সম্পাদক থেকে একটি স্ট্রিং হিসাবে উপস্থাপিত জাভাস্ক্রিপ্ট কোড মূল্যায়ন করতে ব্যবহৃত হয়। যখন eval() বলা হয়, ব্রাউজার নেটিভলি আপনার কোড এক্সিকিউট করবে। কেন এই গোপনীয়তা গুরুত্বপূর্ণ তা আমরা এই নিবন্ধের পরবর্তী অংশগুলিতে আরও জানব।

এখন কৌশলে এগিয়ে যাচ্ছি:

Google Chrome হল V8 নামক একটি অন্তর্নির্মিত জাভাস্ক্রিপ্ট ইঞ্জিন সহ সবচেয়ে জনপ্রিয় ব্রাউজারগুলির মধ্যে একটি, এবং ডেভেলপারদের জন্য Chrome DevTools নামে একটি দুর্দান্ত টুলসেট অফার করে৷ তাদের সম্পূর্ণ জাভাস্ক্রিপ্ট ডিবাগিং গাইড দেখার জন্য অত্যন্ত সুপারিশ করা হয়।

1 :DevTools এর বেসিকস

Chrome DevTools লঞ্চ করা হচ্ছে

F12 হিট করুন

. বিকল্পভাবে আপনি চাপতে পারেন

Ctrl + Shift + I

উইন্ডোজ এবং লিনাক্সে বা

Cmd + Shift + I

Mac এ, অথবা আপনি যদি আপনার মাউস ভালোবাসেন তাহলে Menu > More Tools > Developer Tools এ যান .

Sources জানা এবং console ট্যাব।

এই দুটি ট্যাব ডিবাগ করার সময় সম্ভবত আপনার সেরা বন্ধু হতে চলেছে। Sources আপনি যে ওয়েবপৃষ্ঠাটি পরিদর্শন করছেন তার সমস্ত স্ক্রিপ্টগুলি কল্পনা করতে ট্যাব ব্যবহার করা যেতে পারে। এই ট্যাবে কোড উইন্ডো, ফাইল ট্রি, কল স্ট্যাক এবং ওয়াচ উইন্ডো ইত্যাদির জন্য বিভাগ রয়েছে।

console ট্যাব হল যেখানে সমস্ত লগ আউটপুট যায়। উপরন্তু আপনি জাভাস্ক্রিপ্ট কোড চালানোর জন্য কনসোল ট্যাবের প্রম্পট ব্যবহার করতে পারেন। এটি উইন্ডোজের কমান্ড প্রম্পট বা লিনাক্সে টার্মিনালের সমার্থক।

টিপ:Esc ব্যবহার করে DevTools-এ যেকোনো সময় কনসোল টগল করুন কী।

2 :সাধারণ শর্টকাট এবং বৈশিষ্ট্যগুলি৷

আপনি যখন শর্টকাটগুলির সম্পূর্ণ তালিকা দেখতে পারেন, নীচে কয়েকটি রয়েছে যা সর্বাধিক ব্যবহৃত হয়:

বৈশিষ্ট্য উইন্ডোজ, লিনাক্স ম্যাক
একটি কীওয়ার্ড অনুসন্ধান করুন, regex সমর্থিত। Ctrl +F``Cmd +F
Ctrl একটি ফাইল খুঁজুন এবং খুলুন +P``Cmd +P
Ctrl লাইনে যান +G +:line_no``Cmd +G +:line_no
একটি ব্রেকপয়েন্ট যোগ করুন Ctrl +B , অথবা লাইন নং Cmd-এ ক্লিক করুন +B , অথবা লাইন নম্বরে ক্লিক করুন।
স্ক্রিপ্ট এক্সিকিউশন F8 পজ/পুনরায় শুরু করুন F8
পরবর্তী ফাংশন কল করুন F10 F10
পরবর্তী ফাংশন কল F11 এ যান F11

3 :আমাদের কোডের জন্য একটি উৎস মানচিত্র ব্যবহার করা

একটি দুর্দান্ত বৈশিষ্ট্য যা আপনি পছন্দ করবেন তা হল সোর্স ম্যাপের মাধ্যমে ডাইনামিক স্ক্রিপ্ট ডিবাগ করা৷

DevTools-এর সোর্স ট্যাবে প্রতিটি স্ক্রিপ্ট ভিজ্যুয়ালাইজ করা যেতে পারে। সোর্স ট্যাবে সব জাভাস্ক্রিপ্ট সোর্স ফাইল আছে। কিন্তু কোড এডিটরের কোডটি eval() এর মাধ্যমে কার্যকর করা হয় একটি পাত্রে ব্রাউজার প্রক্রিয়ার মধ্যে একটি ভার্চুয়াল মেশিন(VM) নামে পরিচিত৷

আপনি এখন অনুমান করতে পারেন যে আমাদের কোডটি আসলে একটি স্ক্রিপ্ট যার কোনো ফাইলের নাম নেই। তাই আমরা সোর্স ট্যাবে এটি দেখতে পাচ্ছি না।

এখানে হ্যাক আসে!

আমাদের অবশ্যই Source Maps লিভারেজ করতে হবে আমাদের সম্পাদক থেকে জাভাস্ক্রিপ্টে একটি নাম বরাদ্দ করতে। এটা বেশ সহজ:

ধরা যাক আমরা ফ্যাক্টোরিয়ালাইজ চ্যালেঞ্জে আছি, এবং আমাদের কোড এইরকম দেখাচ্ছে:

function factorialize(num) {
 if(num <= 1){
 ...
}
factorialize(5);

আমাদের যা করতে হবে তা হল //# sourceURL=factorialize.js যোগ করা কোডের শীর্ষে, অর্থাৎ প্রথম লাইন:

//# sourceURL=factorialize.js
function factorialize(num) {
 if(num <= 1){
 ...

এবং ইউরেকা তাই!

এখন DevTools খুলুন এবং ফাইলের নাম অনুসন্ধান করুন। বিরতি পয়েন্ট যোগ করুন, ডিবাগ করুন এবং উপভোগ করুন!

ডিবাগিং সম্পর্কে আরও তথ্য:

• বাগ স্কোয়াশিং-এর জন্য শিক্ষানবিসদের নির্দেশিকা
• শিশুদের জন্য ডিবাগিং টিপস এবং কৌশল
• কিভাবে আপনার ব্রাউজারের ডিবাগিং কনসোল থেকে সবচেয়ে বেশি সুবিধা পাবেন

বিনামূল্যে কোড শিখুন. freeCodeCamp-এর ওপেন সোর্স পাঠ্যক্রম 40,000-এরও বেশি লোককে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন