কোনো ওয়েবসایت পুরোপুরি সঠিকভাবে তৈরি হয়না। মানুষের তৈরি সকল পণ্যের মতো, কোড ত্রুটি প্রক্রিয়ার অংশ। इसलিয়ে আপনার তৈরি কোনো নতুন ওয়েবসایت ভালোভাবে টেস্ট করা গুরুত্বপূর্ণ যাতে সেটি যতটা সম্ভব ত্রুটিমুক্ত হয় এবং আপনার ব্যবহারকারীদের সেরা অভিজ্ঞতা দেয়।
Google Chrome-এর DevTools কিট ব্যবহার না করেই ওয়েবসাইট টেস্ট করা উচিত নয়। Chrome developer mode আপনাকে একটি নতুন সাইট (বা বিদ্যমান একটি) ভালোভাবে টেস্ট করতে দেয় যাতে বাগ খুঁজে বের করা এবং ফিক্স করা যায়। এছাড়া এটি আপনাকে অন্যান্য সাইট কীভাবে চালানো হয় সে সম্পর্কে অন্তর্দৃষ্টি দেয়, সোর্স কোড দেখা যাওয়ার সুযোগসহ।
Google Chrome ব্রাউজার ডেভেলপার মোড সম্পর্কে আপনার জানা দরকার সব কিছু এখানে দেওয়া হলো, এর কী কী টুল রয়েছে এবং কীভাবে কার্যকরভাবে ব্যবহার করবেন।
Chrome Developer Mode কী?
আমরা Chrome developer mode বলতে যেটি বুঝাই, সেটি Chromebook-এ দেখা ডেভেলপার মোডের সাথে এক নয়। আমরা যে টুলটি বোঝাচ্ছি সেটি হলো ব্যাপক Chrome ডেভেলপমেন্ট টুলস (যাকে Google DevTools বলা হয়) যা ব্রাউজারের ভিতরে বিল্ট-ইন রয়েছে।
এই টুলগুলো একটি ওয়েব পেজ টেস্ট, বিশ্লেষণ এবং প্রয়োজনে স margolতোড় করার জন্য ডিজাইন করা হয়েছে, যা Google Chrome ব্রাউজারে লোড করা হয়েছে টেস্টিং উদ্দেশ্যে। মৌলিক স্তরে, আপনি DevTools ব্যবহার করে একটি ওয়েবসাইটের সোর্স কোড দেখতে পারেন, যাতে আপনি エンজিনের নিচে ঝাঁকি मारুন এবং দেখুন সাইটটি কীভাবে তৈরি হয়েছে এবং কতটুকু ভালো চলছে।
Google DevTools শুধু এটিই অফার করে না। Chrome developer mode ব্যবহার করে আপনি লোড হওয়ার পর একটি পেজ পরিবর্তন করতে পারেন, Google Chrome কনসোল কমান্ড চালিয়ে পেজ নিয়ন্ত্রণ ও ম্যানিপুলেট করতে পারেন, এবং স্পিড ও নেটওয়ার্ক টেস্ট চালিয়ে ওয়েব ট্রাফিক মনিটর করতে পারেন।
আপনি Chrome DevTools মোডে অন্যান্য ডিভাইস অনুকরণও করতে পারেন, বিভিন্ন অপারেটিং সিস্টেম এবং স্ক্রিন রেজোলিউশন সহ। এতে আপনি দেখতে পাবেন কোন সাইটে রেসপন্সিভ ওয়েব ডিজাইন আছে কিনা, এবং সাইট কন্টেন্ট ও লেআউট ডিভাইস রেজোলিউশন বা টাইপ অনুযায়ী কীভাবে পরিবর্তন হয়।
যদিও এই টুলগুলো প্রফেশনাল ওয়েব ডেভেলপার বা টেস্টারের জন্য তৈরি, সাধারণ Chrome ব্যবহারকারীদেরও DevTools সুইটের সাথে পরিচিত থাকা কাজে লাগে। আপনি কোনো সাইটে সমস্যা দেখলে যা আপনি সমাধান করতে পারছেন না, Chrome developer mode-এ স্যুইচ করলে আপনি বুঝতে পারবেন সমস্যা সাইটে নাকি আপনার ব্রাউজারে।
Google Chrome DevTools মেনু কীভাবে অ্যাক্সেস করবেন
Google Chrome DevTools মেনু অ্যাক্সেস করার কিছু উপায় রয়েছে, আপনি কোন টুল ব্যবহার করতে চান তার উপর নির্ভর করে।
সবচেয়ে সহজ পদ্ধতি হলো Google Chrome মেনু থেকে। এটি করতে, উপরের ডানে three-dots মেনু আইকন-এ ক্লিক করুন। প্রদর্শিত মেনু থেকে More Tools > Developer Tools ক্লিক করুন।
এটি আপনার খোলা Chrome ট্যাব বা উইন্ডোর ডান দিকে একটি নতুন মেনুতে DevTools কিট খুলবে।
আপনি কিবোর্ড শর্টকাটও ব্যবহার করতে পারেন। Windows বা Linux PC-এ, Chrome ব্রাউজার খুলে F12 কী চাপুন। অথবা খোলা Chrome ট্যাব বা উইন্ডোতে Ctrl + Alt + J বা Ctrl + Alt + I কী চাপুন।
macOS-এ, F12 চাপুন অথবা Option + Command + J বা Option + Command + I কী চাপুন Chrome DevTools মেনু খোলার জন্য। এটি Chrome কনসোল খুলবে, DevTools মেনুর শীর্ষে অন্যান্য Chrome টুলসে যাওয়ার অপশন সহ।
আপনি যদি চান, তবে যেকোনো ওপেন ওয়েব পেজে রাইট-ক্লিক করে Inspect অপশন ক্লিক করলে ওয়েবসাইটের সোর্স কোড দেখতে পারেন (এতে DevTools মেনুর Elements ট্যাব খুলবে)।
Chrome DevTools ব্যবহার করা
আমরা সংক্ষেপে যা আলোচনা করেছি, Chrome DevTools কিট ব্যবহার করে আপনি Elements ট্যাবে একটি ওয়েবসাইটের সোর্স কোড দেখতে পারেন। এটি আপনাকে লোড করা পেজের পিছনের কোড বিশ্লেষণ করতে দেয়, সেইসাথে Console ট্যাবে Chrome কনসোলে এরর মেসেজ দেখতে পারেন (যে সাইট কীভাবে লোড হয়েছে সেটির সমস্যা নির্দেশ করে)।
আপনি Sources ট্যাবে একটি ওয়েবসাইটের কন্টেন্টের বিভিন্ন সোর্স দেখতে পারেন। উদাহরণস্বরূপ, কোন সাইট কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN) ব্যবহার করলে, সেটি থেকে মিডিয়া এখানে ভিন্ন সোর্স হিসেবে লিস্টেড থাকবে।
Chrome developer mode আপনাকে সেই কন্টেন্ট সরাসরি ডাউনলোড করতে দেয়, বা আরও জটিল বিশ্লেষণ করতে দেয়।
আপনি যদি চান কোন সাইট কীভাবে পারফর্ম করছে তা টেস্ট করা, তবে Network ট্যাবে আপনার নেটওয়ার্ক ব্যবহার মনিটর ও রেকর্ড করতে পারেন। এটি আপনার ব্রাউজার এবং সাইটের মধ্যে হওয়া নেটওয়ার্ক রিকোয়েস্টের স্পিড, সাইজ এবং টাইপ দেখাবে।
উদাহরণস্বরূপ, পেজ প্রথম লোড হলে, সাইট পেজ কন্টেন্ট লোড করবে, কিন্তু এটি থার্ড-পার্টি ডাটাবেস থেকে ডাটা রিকোয়েস্টও করতে পারে। উদাহরণস্বরূপ, আপনি সাইন ইন করলে, এটি একটি ডাটাবেস কোয়েরি করতে পারে যা এখানে নেটওয়ার্ক রিকোয়েস্ট হিসেবে দেখাবে।
আপনি Performance ট্যাবে এটিকে আরও বিশ্লেষণ করতে পারেন, যেখানে আপনি আপনার Chrome ব্রাউজার ব্যবহার আরও গভীরে রেকর্ড করতে পারেন, বিভিন্ন পয়েন্টে স্ক্রিনশট রেকর্ডিং সহ। এটি আপনার সাইট লোড হতে কতক্ষণ লাগে সেটি লগ করবে আরও বিশ্লেষণের জন্য।
Google Chrome PC মেমোরির ক্ষেত্রে ভারী হওয়ার জন্য বিখ্যাত, তাই আপনি Memory ট্যাবে আপনার সাইটের JavaScript মেমোরি ব্যবহার টেস্ট করতে পারেন। এখানে বিভিন্ন Chrome টেস্টিং প্রোফাইল ব্যবহার করা যায়, এর বিস্তারিত জানতে Chrome DevTools ডকুমেন্টেশন পেজ দেখুন।
আপনার সাইট কন্টেন্ট এবং এটি যে ব্রাউজার স্টোরেজ ব্যবহার করছে (উদাহরণস্বরূপ, ডাটা লগ করার জন্য) আরও গভীরে বিশ্লেষণ করতে Application ট্যাবে সার্চ করতে পারেন। এখানে Cookies সেকশনে সাইট কুকি ইনফো দেখতে পারেন, বা Clear storage অপশন ক্লিক করে ব্যবহৃত স্টোরেজ ক্লিয়ার করতে পারেন।
আপনি যদি আপনার সাইট সিকিউরিটি নিয়ে চিন্তিত হন, তবে Security ট্যাবে চেক করতে পারেন কতটুকু ভালো পারফর্ম করছে। এটি Chrome-এর সিকিউরিটি অ্যানালিসিসের কুইক ওভারভিউ দেবে, এতে থাকবে পেজে সঠিক এবং বিশ্বস্ত SSL সার্টিফিকেট আছে কিনা।
আপনি যদি আপনার সাইট পারফরম্যান্সের রিপোর্ট জেনারেট করতে চান, এতে থাকবে এটি টিপিক্যাল ইউজার স্ট্যান্ডার্ড মিট করে কিনা এবং সাইট পারফরম্যান্স সার্চ ইঞ্জিন অপ্টিমাইজেশনকে প্রভাবিত করছে কিনা, তবে Lighthouse ট্যাবে ক্লিক করুন। এতে আপনার রিপোর্টের জন্য সেটিংস চেক/আনচেক করার অপশন থাকবে—Generate report ক্লিক করলে রিপোর্ট তৈরি হয়ে দেখাতে পারবেন।
এটি কেবল Chrome developer mode-এর সম্ভাবনার সতহ ছুঁয়ে দিয়েছে। আপনি যদি আরও জানতে চান, তবে Chrome DevTools ডকুমেন্টেশন আপনাকে অফার করা টুল এবং ফিচারসহ সাহায্য করবে, এতে থাকবে কীভাবে নিজের ইউজার টেস্ট বিল্ড করবেন।
উন্নত Google Chrome ট্রিকস
বেশিরভাগ Chrome ব্যবহারকারী কখনোই জানবেন না যে তাদের ব্রাউজারে Google Chrome DevTools কিট রয়েছে, কিন্তু পাওয়ার ইউজারদের জন্য এটি ওয়েবসাইট টেস্ট ও বিশ্লেষণ করার অত্যন্ত কার্যকর উপায়। থার্ড-পার্টি Chrome এক্সটেনশনও রয়েছে ওয়েব ডেভেলপারদের জন্য যারা সাইট আরও টেস্ট করতে সাহায্য করে।
আপনি যদি বেসিক ওয়েবসাইট বানান, তবে Chrome developer mode-এ স্যুইচ করলে আপনি আপনার সাইটের যেসব ত্রুটি খুঁজে পেতে পারেন যা অবিলম্বে দৃশ্যমান নয়। আপনি এটি তখনই করতে পারবেনযখন Chrome সঠিকভাবে কাজ করছে, তাই আপনি যদি Chrome ক্র্যাশের সমস্যায় পড়েন, তবে প্রথমে ব্রাউজার রিসেট বা রি-ইনস্টল করতে হতে পারে।
