ব্যবহারকারীরা ব্রাউজার কনসোল খোলার সবচেয়ে সাধারণ কারণ হলো পেজ এডিটিং, ভাঙা ইন্টারফেস এলিমেন্ট, মিসবিহেভিং ব্লক এবং অন্যান্য ধরনের JavaScript এরর এবং কনফ্লিক্ট আইডেন্টিফাই করা। যাইহোক, প্রতিটি ব্রাউজারের নিজস্ব শর্টকাট এবং স্টেপস আছে যা 궁극적으로 আপনাকে কনসোল খুলতে এবং আপনি যে ওয়েব-পেজ ভিজিট করছেন তার ব্যাক-এন্ড দেখতে দেবে।
যেহেতু ৫% এর বেশি মার্কেট শেয়ার সহ শুধু চারটি ভিন্ন ব্রাউজার আছে (Chrome, Safari, Edge, এবং Firefox), আমরা আপনাকে প্রতিটিতে কনসোল খোলার একাধিক পদ্ধতি দেখাব। কিন্তু মনে রাখবেন প্রতিটি ব্রাউজারের সাথে, এলিমেন্টস এবং এররগুলো সাধারণত কালার-কোডেড এবং ভিন্নভাবে লেবেল করা থাকে।
Google Chrome-এ কনসোল খোলার পদ্ধতি
Chrome-এ, আসলে তিনটি ভিন্ন পদ্ধতি আছে যা আপনাকে বিল্ট-ইন কনসোল খোলতে দেবে।
আপনি যেকোনো Chrome বিল্ড ব্যবহার করছেন না কেন, আপনি বিল্ট-ইন কনসোল খোলা এবং বন্ধ করার জন্য এই শর্টকাটগুলো ব্যবহার করতে পারেন:
- F12
- Ctrl + Shift + J (Mac-এ Cmd + Option + J)
মনে রাখবেন একই শর্টকাটগুলো কনসোল লুকানোর জন্যও ব্যবহার করা যায়। ডিফল্টভাবে, Google Chrome-এর কনসোল স্ক্রিনের সạchা হälfte নেয়, কিন্তু আপনি মাঝপথে স্লাইডার ব্যবহার করে সহজে অনুপাত ঠিক করতে পারেন এবং ব্রাউজার সংশোধনটি মনে রাখবে পরবর্তী বার কনসোল খোলার সময়।
আপনি যদি একটি নির্দিষ্ট এলিমেন্টে ফোকাস করতে চান, তবে আপনি সেটি আপনার মাউস দিয়ে হাইলাইট করে তারপর রাইট-ক্লিক করুন > Inspect। এটি কনসোলের Elements ট্যাব এবং Styles ট্যাব খুলবে, যা আপনাকে Hände এলিমেন্টে ফোকাস করতে দেবে।
তবে, আপনি Google Chrome-এর GUI মেনু 통해서ও কনসোল অ্যাক্সেস করতে পারেন। এটি করতে, সিম্পলি টপ-রাইট কর্নারে একশন বাটনে ক্লিক করুন এবং More Tools > Developer Tools-এ যান।
আপনি যদি możনতাম দক্ষতার সাথে কাজ করতে চান, তবে নিচে Chrome Console শর্টকাটের একটি তালিকা দেওয়া হলো যা আপনি ব্যবহার করতে পারেন।
Google Microsoft Edge-এ কনসোল খোলার পদ্ধতি
অন্য সব ব্রাউজারের মতো, Microsoft Edge-এও একটি Console Tool আছে ডেভেলপারদের ইন্টারঅ্যাক্টিভ ডিবাগিং বা অ্যাড হক টেস্টিং করার জন্য।
এই টুলটি ওই ওয়েবপেজের সাথে যুক্ত ইনফরমেশন লগ করে যা ভিজিট করা হচ্ছে। আপনি Javascript, নেটওয়ার্ক রিকোয়েস্ট এবং সিকিউরিটি এরর সংক্রান্ত ইনফরমেশন পাবেন।
Microsoft Edge-এ Console Tool খোলার সহজ উপায় হলো প্রিডিফাইনড শর্টকাট ব্যবহার করা (F12 Key)।
তবে আপনি GUI মেনু 통해서ও এটি করতে পারেন action button (top-left corner) > More tools > Developer Tools-এ ক্লিক করে।
অন্য ব্রাউজারগুলোর ফাংশনালিটির মতো, Microsoft Edge-ও আপনাকে বিল্ট-ইন কনসোল ব্যবহার করে নির্দিষ্ট এলিমেন্ট ইনস্পেক্ট করতে দেয়। এটি করতে, সিম্পলি একটি এলিমেন্ট সিলেক্ট এবং রাইট-ক্লিক করুন এবং Inspect Element চুজ করুন।
Microsoft Edge-এর বিল্ট-ইন কনসোলের ভিতরে ব্যবহার করতে পারবেন এমন কিছু উপযোগী শর্টকাটের তালিকা:
| কনসোল ফোকাস মোডে লঞ্চ করা | Ctrl + Shift + J |
| কনসোলে স্যুইচ করা | Ctrl + 2 |
| অন্য DevTools ট্যাব থেকে কনসোল শো বা হাইড করা | Ctrl + ` (ব্যাক টিক) |
| এক্সিকিউট (সিঙ্গল-লাইন কমান্ড) | Enter |
| এক্সিকিউট ছাড়া লাইন ব্রেক (মাল্টি-লাইন কমান্ড) | Shift + Enter বা Ctrl + Enter |
| সকল মেসেজ থেকে কনসোল ক্লিয়ার করা | Ctrl + L |
| লগ ফিল্টার করা (সার্চ বক্সে ফোকাস সেট করা) | Ctrl + F |
| অটো-কমপ্লিশন সাজেশন এক্সেপ্ট করা (ফোকাসে থাকার সময়) | Enter বা Tab |
| পূর্ববর্তী/পরবর্তী অটো-কমপ্লিশন সাজেশন | Up arrow key/Down arrow key |
Mozilla Firefox-এ কনসোল খোলার পদ্ধতি
Mozilla Firefox-এ বিল্ট-ইন কনসোল অন্য সমতুল্য مواردা যা আমরা ইতিমধ্যে বিশ্লেষণ করেছি সেগুলোর থেকে কিছুটা ভিন্নভাবে কাজ করে। আমার এই বলতে অর্থ হলো এটি অটোমেটিক্যালি একটি স্ট্যান্ডঅ্যালোন উইন্ডোতে খুলবে, আপনার ব্রাউজার স্ক্রিনকে হাফ করে না।
এটি সেকেন্ড স্ক্রিন সহ মানুষের জন্য আরও প্রোডাক্টিভ এপ্রোচ দেয় কিন্তু যারা একটু ছোট স্ক্রিনে কাজ করতে হয় তাদের জন্য সমস্যা হতে পারে। (আপনি যদি এই সিনেরিওতে হন, তবে আপনি Alt + Tab শর্টকাট ব্যবহার করে Firefox এবং সংশ্লিষ্ট Browser Console-এর মধ্যে সাইকিল করতে পারেন।
Mozilla Firefox-এ বিল্ট-ইন ব্রাউজার কনসোল খোলার আপনার তিনটি অপশন আছে:
- আপনি ইউনিভার্সাল শর্টকাট ব্যবহার করতে পারেন – Ctrl + Shift + J (বা Mac-এ Cmd + Shift + J)
- একশন মেনু থেকে খুলতে পারেন – একশন মেনুতে ক্লিক করুন > Web Developer > Browser Console।
- বা আপনি ব্রাউজার কনসোলকে সরাসরি খোলতে বাধ্য করতে পারেন কমান্ড লাইন থেকে Firefox লঞ্চ করে এবং ‘-jsconsole’ আর্গুমেন্ট পাস করে:
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
নোট: Firefox-এ একটি Web Console ও থাকে, যা Browser Console-এর সাথে খুব মিলতেও কিন্তু এটি একটি সিঙ্গল কন্টেন্ট ট্যাবে প্রয়োগ হয় পুরো ব্রাউজারের পরিবর্তে।
Google Safari-এ কনসোল খোলার পদ্ধতি
আমরা ইতিমধ্যে যেসব ব্রাউজার দেখেছি সেগুলোর과는 আলাদা, Safari-এ Error Console ডিফল্টভাবে নিষ্ক্রিয় থাকে। এই কারণে, আপনাকে আপনার ব্রাউজারে এটি সক্ষম করার জন্য একটি একস্ট্রা স্টেপ নিতে হবে।
এটি করতে, Safari খুলুন এবং Preferences ট্যাবে ক্লিক করুন। একবার Preferences ট্যাবের ভিতরে গেলে, Advanced ট্যাবে ক্লিক করুন এবং Show Develop menu in the menu bar সাথে যুক্ত বক্সটি চেক করুন।
এখন যেহেতু আপনি কনসোলকে ভিজিবল করলেন, আপনি এটিকে টপে Develop ট্যাব অ্যাক্সেস করে এবং Show Error Console-এ ক্লিক করে খুলতে পারেন।
মনে রাখবেন Safari-এর একটি ডাইনামিক পদ্ধতি আছে এরর কনসোল ডিসপ্লে করার। যদি উইন্ডো ছোট হয় যখন আপনি কনসোল খুলেন, তবে আপনি এটি একটি সম্পূর্ণ আলাদা উইন্ডোতে দেখবেন।
যদি আপনি কনসোলটি আপনার পেজের মতো একই উইন্ডোতে খোলতে চান, তবে আপনাকে নিশ্চিত করতে হবে ব্রাউজার উইন্ডোটি ফুল সাইজের আছে কনসোল খোলার আগে।
