একজন ডেভেলপার হিসেবে আপনি প্রায়শই কোড ডিবাগ করতে চান। আপনি ইতিমধ্যে চ্যালেঞ্জগুলোর মধ্যে console.log ব্যবহার করেছেন হতে পারে, যা ডিবাগ করার সবচেYe সিম্পল উপায়।
এই নিবন্ধে আমরা আপনাকে কিছু কুল ট্রিকস বলব, ব্রাউজারদের নেটিভ ডিবাগ টুলস ব্যবহার করে ডিবাগ করতে।
FreeCodeCamp Code Editor-এ একটি সংক্ষিপ্ত অন্তর্দৃষ্টি:
ডিবাগিং-এ ঝাঁপ देने আগে, FCC-র সেই অ দ্ভুত কোড চেকিং ইঞ্জিন-এর কিছু গোপন তথ্য লিক করে দেই।
আমরা একটি কাস্টোমাইজড CodeMirror ব্যবহার করি কোড এডিটর হিসেবে। একটি eval() ফাংশন ব্যবহার হয় এডিটর থেকে স্ট্রিং হিসেবে রিপ্রেজেন্টেড জাভাস্ক্রিপ্ট কোড ইভ্যালুয়েট করার জন্য। যখন eval() কল হয়, ব্রাউজাররা নেটিভলি আপনার কোড এক্সিকিউট করে। আমরা পরে শিখব কেন এই গোপন তথ্যটি গুরুত্বপূর্ণ এই নিবন্ধের পরবর্তী সেকশনগুলোতে।
এখন ট্রিক্সের দিকে যাই:
Google Chrome সবচেYe জনপ্রিয় ব্রাউজারগুলোর একটি যার বিল্ট-ইন জাভাস্ক্রিপ্ট ইঞ্জিন হলো V8, এবং ডেভেলপারদের জন্য একটি দারুণ টুলসেট অফার করে যাকে Chrome DevTools বলা হয়। তাদের Complete JavaScript debugging guide ভিজিট করা হাইরি কমেন্ডেড।
১: DevTools-এর বেসিক্স
Chrome DevTools লঞ্চ করা
F12 চাপুন।
বিকল্পভাবে আপনি চাপতে পারেন
Ctrl + Shift + I
Windows এবং Linux-এ অথবা
Cmd + Shift + I
Mac-এ, অথবা আপনি যদি মাউস ভালোবাসেন তবে যান Menu > More Tools > Developer Tools।
Sources এবং console ট্যাবগুলো জানুন।
এই দুটি ট্যাব হয়তো আপনার ডিবাগিং-এ সেরা বন্ধু হবেন। Sources ট্যাব ব্যবহার করা যায় ওয়েবপেজে থাকা সকল স্ক্রিপ্ট ভিজুয়ালাইজ করার জন্য। এই ট্যাবে কোড উইন্ডো, ফাইল ট্রি, কল স্ট্যাক & ওয়াচ উইন্ডো ইত্যাদির সেকশন রয়েছে।
console ট্যাব হলো যেখানে সব লগ আউটপুট যায়। এছাড়া আপনি console ট্যাবের প্রম্পট ব্যবহার করতে পারেন জাভাস্ক্রিপ্ট কোড এক্সিকিউট করার জন্য। এটি Windows-এ কমান্ড প্রম্পট বা Linux-এ টার্মিনালের মতো।
টিপ: DevTools-এ যেকোনো সময় console টগল করতে Esc কী চাপুন।
২: সাধারণ শর্টকাট এবং ফিচার
আপনি যদি শর্টকাটের সম্পূর্ণ তালিকা দেখতে চান, তবে নিচে কিছু সবচেYe ব্যবহৃতগুলো দেওয়া হলো:
| Feature | Windows, Linux | Mac |
|---|---|---|
| কিওয়ার্ড/রেজেক্স সার্চ | 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 |
৩: আমাদের কোডের জন্য Source Map ব্যবহার
সबচেYe কুল ফিচারগুলোর একটি যা আপনি ভালোবাসবেন সেটি হলো Dynamic Script ডিবাগ করা অন-দ-ফ্লাই, Source Maps দিয়ে।
প্রতিটি স্ক্রিপ্ট DevTools-এ Source ট্যাবে ভিজুয়ালাইজ করা যায়। Source ট্যাবে সব জাভাস্ক্রিপ্ট সোর্স ফাইল থাকে। কিন্তু কোড এডিটর থেকে কোড eval()-এ একটি কন্টেইনারে এক্সিকিউট হয় যাকে সিম্পলি ভার্চুয়াল মেশিন (VM) বলা হয় ব্রাউজার প্রসেসের ভেতরে।
আপনি আশা করছেন এর মানে আমাদের কোড আসলে একটি স্ক্রিপ্ট যেটির কোনো ফাইল নেম নেই। তাই সেটি Source ট্যাবে দেখা যায় না।
এখানেই হ্যাকটি আসে!
আমাদের Source Maps লিভারেজ করতে হবে আমাদের এডিটর থেকে জাভাস্ক্রিপ্টকে একটি নাম অ্যাসাইন করার জন্য। এটা খুব সিম্পল:
মান লें আমরা Factorialize চ্যালেঞ্জে আছি, এবং আমাদের কোড এভাবে দেখাচ্ছে:
function factorialize(num) {
if(num <= 1){ ... }
factorialize(5);
আমাদের শুধু //# sourceURL=factorialize.js কোডের টপে অ্যাড করতে হবে, অর্থাৎ প্রথম লাইনে:
//# sourceURL=factorialize.js
function factorialize(num) {
if(num <= 1){ ... }
এইউরিকা এটিই!
এখন DevTools খুলুন এবং ফাইল নামটি সার্চ করুন। ব্রেকপয়েন্ট যোগ করুন, ডিবাগ করুন এবং উপভোগ করুন!
ডিবাগিং-র সম্পর্কে আরও তথ্য:
- Beginner's guide to bug squashing
- Debugging tips and tricks for beginners
- How to get the most out of your browser's debugging console
ফ্রি কোড ক্যাম্পের ওপেন সোর্স কারিকুলাম ৪০,০০০+ মানুষকে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন।
