কোড ভুলপ্রবণ। কোড করতে গিয়ে আপনি খুব সম্ভবত কিছু ভুল করবেন... নাহ, কি বলি? অবশ্যই ভুল করবেন। অন্তত আপনি যদি রোবট না হয়ে মানুষ হয়ে থাকেন।
কিন্তু ব্যবহারকারীরা ব্রাউজারে ডিফল্টভাবে ভুল বা এরর দেখে না। তাই স্ক্রিপ্টে কোনকিছু ঠিকমত না হলে আমারা জানব না সমস্যাটা কোথায়, আর সেটা ঠিকও করতে পারব না।
ভুল দেখতে ও স্ক্রিপ্টের বিভিন্ন দরকারী তথ্য পেতে ব্রাউজারগুলোতে 'ডেভেলপার টুলস' সংযুক্ত করে দেয়া হয়েছে।
ডেভেলপমেন্টের জন্য বেশিরভাগ ডেভেলপাররা ক্রোম কিংবা ফায়ারফক্সের দিকে ঝোঁকে, কারণ এদের ডেভেলপার টুলগুলো সবচেয়ে ভাল। অন্য ব্রাউজারগুলোও ডেভেলপার টুল দেয়, অনেকসময় বাড়তি সুবিধাসহ। কিন্তু তারা মূলত ক্রোম অথবা ফায়ারফক্সের পর্যায়ে যাওয়ার চেষ্টাই করছে। বেশিরভাগ ডেভেলপারেরই ডেভেলপমেন্টের জন্য একটা 'প্রিয়' ব্রাউজার থাকে, নির্দিষ্ট ব্রাউজারের সাথে জড়িত কোন সমস্যা দেখা দিলে তখন অন্যগুলোতে যায়।
ডেভেলপার টুলগুলো বেশ কার্যকর; এগুলোতে অনেক ফিচার থাকে। শুরুতে আমরা শিখব এগুলো কিভাবে খুলতে হয়, কিভাবে ভুল দেখতে হয় আর কিভাবে সেগুলোতে জাভাস্ক্রিপ্ট কমান্ড চালানো যায়।
bug.html পেজটি খুলুন।
এর জাভাস্ক্রিপ্টে একটি ভুল আছে। একজন সাধারণ ব্যবহারকারী সেটা দেখবে না। তাই সেটা দেখার জন্য ডেভেলপার টুল খোলা যাক।
key:F12 চাপুন, অথবা ম্যাকে হলে key:Cmd+Opt+J।
ডিফল্টভাবে ডেভেলপার টুলটি কনসোল ট্যাবে খুলবে।
দেখতে অনেকটা এমন হবে:
দেখতে ঠিক কেমন হবে সেটা আপনার ক্রোম ভার্সনের উপর নির্ভর করবে। এটা প্রায়ই বদলায়। তবে কিছুটা এমনই হওয়ার কথা।
- এখানে এরর মেসেজটি লাল রঙে দেখতে পাচ্ছেন। এক্ষেত্রে স্ক্রিপ্টটিতে একটি অজানা "lalala" কমান্ড আছে।
- ডানে
bug.html:12সোর্সটির একটি ক্লিক-উপযোগী লিঙ্ক আছে, যে লাইনে ভুলটি হয়েছে সেই লাইন নাম্বার সহ।
এরর মেসেজটির নিচে নীল একটি > চিহ্ন আছে। এটি একটি "কমান্ড লাইন" নির্দেশ করে, যেখানে আপনি জাভাস্ক্রিপ্ট কমান্ড টাইপ করতে পারবেন। কমান্ডগুলো চালাতে key:Enter চাপুন।
এখন আমরা এরর দেখতে পাচ্ছি। আপাতত এইটুকুই চলবে। সামনে ডেভেলপার টুল আবার আসবে। info:debugging-chrome অধ্যায়ে ডিবাগিং নিয়ে গভীর আলোচনা হবে।
সাধারণভাবে যখন আপনি কনসোলে এক লাইন কোড দিয়ে `key:Enter` চাপেন, সেটা এক্সিকিউট হয়ে যায়।
একাধিক লাইন দিতে `key:Shift+Enter` চাপতে হয়। এভাবে বড় বড় জাভাস্ক্রিপ্ট কোড ইনপুট দেয়া যায়।
অন্য বেশিরভাগ ব্রাউজার ডেভেলপার টুলস খোলার জন্য key:F12 ব্যবহার করে।
সেগুলো দেখতেও কাছাকাছি। যেকোন একটা একবার ব্যবহার করতে শিখে গেলে (ক্রোম দিয়ে শুরু করা যেতে পারে) পরে সহজেই অন্যগুলোতে যাওয়া যায়।
সাফারি (ম্যাকের ব্রাউজার, উইন্ডোজ/লিনাক্সে সাপোর্ট করে না) এখানে একটু অন্যরকম। প্রথমে আমাদের "Develop menu" সক্রিয় করতে হবে।
Open Settings and go to the "Advanced" pane. There's a checkbox at the bottom:
540d753e90789205fc6e75c502f68382c87dea9b
এখন key:Cmd+Opt+C দিয়ে কনসোল টোগল করা যাব। আর খেয়াল করুন, "Develop" নামে টপ মেনুতে নতুন একটা আইটেম এসেছে। এটাতে অনেক কমান্ড ও অপশন আছে।
- ডেভেলপার টুল আমাদের অনেককিছু করতে দেয়, যোমন কমান্ড চালানো, ভ্যারিয়েবল পরীক্ষা করা ইত্যাদি।
- উইন্ডোজে বেশিরভাগ ব্রাউজারে
key:F12চেপে এগুলো খোলা যায়। ম্যাকের ক্রোমেkey:Cmd+Opt+J, সাফারিতে:key:Cmd+Opt+C(প্রথমে সক্রিয় করে নিতে হয়)।
এখন আমাদের পরিবেশ তৈরী। পরবর্তী অধ্যায়ে আমরা পুরোপুরি জাভাস্ক্রিপ্টে ঢুকে যাব।