ক্রোম ডেভেলপার মোড কী এবং এর ব্যবহারগুলি কী?

কোন ওয়েবসাইট নিখুঁতভাবে নির্মিত হয় না. মানুষের দ্বারা তৈরি সমস্ত পণ্যের মতো, কোড ত্রুটিগুলি প্রক্রিয়াটির অংশ। এই কারণেই আপনার ব্যবহারকারীদের সর্বোত্তম সম্ভাব্য অভিজ্ঞতা দেওয়ার জন্য এটি যতটা সম্ভব ত্রুটিমুক্ত তা নিশ্চিত করতে আপনার তৈরি করা যেকোন নতুন ওয়েবসাইটটি পুঙ্খানুপুঙ্খভাবে পরীক্ষা করা গুরুত্বপূর্ণ।

প্রথমে Google Chrome এর DevTools কিট ব্যবহার না করে আপনার কোনো ওয়েব সাইট পরীক্ষা করা উচিত নয়। ক্রোম ডেভেলপার মোড আপনাকে বাগগুলি খুঁজে বের করতে এবং ঠিক করতে একটি নতুন সাইট (বা বিদ্যমান একটি) পরীক্ষা করার এবং পুঙ্খানুপুঙ্খভাবে পরীক্ষা করার অনুমতি দেয়৷ সোর্স কোড দেখা সহ অন্যান্য সাইটগুলি কীভাবে চালানো হয় সে সম্পর্কেও এটি আপনাকে অন্তর্দৃষ্টি দিতে পারে।

গুগল ক্রোম ব্রাউজার ডেভেলপার মোড, এটিতে কী কী সরঞ্জাম রয়েছে এবং কীভাবে এটি কার্যকরভাবে ব্যবহার করা যায় সে সম্পর্কে আপনার যা জানা দরকার তা এখানে রয়েছে৷

Chrome ডেভেলপার মোড কি?

যখন আমরা Chrome ডেভেলপার মোড উল্লেখ করি, তখন আমরা একই ডেভেলপার মোডের কথা বলছি না যা আপনি Chromebook-এ দেখতে পাবেন। আমরা যা উল্লেখ করছি তা হল বিস্তৃত ক্রোম ডেভেলপমেন্ট টুল (যাকে Google DevTools বলা হয় ) যেগুলো ব্রাউজারেই তৈরি হয়।

এগুলি হল এমন সরঞ্জাম যা আপনি পরীক্ষার উদ্দেশ্যে Google Chrome ব্রাউজারে লোড করেছেন এমন একটি ওয়েব পৃষ্ঠা পরীক্ষা, বিশ্লেষণ এবং উদ্দেশ্যমূলকভাবে ভাঙার জন্য ডিজাইন করা হয়েছে। একটি মৌলিক স্তরে, আপনি একটি ওয়েবসাইটের সোর্স কোড দেখতে DevTools ব্যবহার করতে পারেন, একটি সাইট কীভাবে তৈরি করা হয়েছে এবং এটি কতটা ভালভাবে চলছে তা দেখতে আপনাকে হুডের নীচে উঁকি দিতে দেয়৷

Google DevTools এর থেকেও বেশি কিছু অফার করে। আপনি একটি পৃষ্ঠা লোড হওয়ার পরে পরিবর্তন করতে Chrome ডেভেলপার মোড ব্যবহার করতে পারেন, পৃষ্ঠাটিকে নিয়ন্ত্রণ ও পরিচালনা করতে Google Chrome কনসোল কমান্ড চালাতে পারেন, সেইসাথে ওয়েব ট্র্যাফিক নিরীক্ষণের জন্য গতি এবং নেটওয়ার্ক পরীক্ষা চালাতে পারেন৷

আপনি Chrome DevTools মোডে বিভিন্ন অপারেটিং সিস্টেম এবং স্ক্রিন রেজোলিউশন সহ অন্যান্য ডিভাইসগুলিকেও অনুকরণ করতে পারেন৷ এটি আপনাকে দেখতে দেয় যে কোনও সাইটে প্রতিক্রিয়াশীল ওয়েব ডিজাইন আছে কিনা এবং ডিভাইসের রেজোলিউশন বা প্রকারের উপর নির্ভর করে সাইটের সামগ্রী এবং লেআউটগুলি কোথায় পরিবর্তিত হবে৷

যদিও এই টুলগুলি পেশাদার ওয়েব ডেভেলপার বা পরীক্ষকদের লক্ষ্য করে, এটি মানক Chrome ব্যবহারকারীদের জন্য DevTools স্যুটের আশেপাশে তাদের পথ জানতেও সুবিধাজনক। আপনি যদি এমন কোনো সাইটের সমস্যা দেখেন যা আপনি সমাধান করতে পারবেন না, তাহলে Chrome ডেভেলপার মোডে স্যুইচ করলে সমস্যাটি সাইট বা আপনার ব্রাউজারে আছে কিনা তা দেখতে সাহায্য করতে পারে।

কিভাবে Google Chrome DevTools মেনু অ্যাক্সেস করবেন

আপনি যে টুলটি ব্যবহার করতে চান তার উপর নির্ভর করে আপনি Google Chrome DevTools মেনু অ্যাক্সেস করতে পারেন এমন কয়েকটি উপায় রয়েছে৷

এটি করার সবচেয়ে সহজ পদ্ধতি হল Google Chrome মেনু থেকে। এটি করতে, তিন-বিন্দু মেনু আইকনে ক্লিক করুন উপরের ডানদিকে। প্রদর্শিত মেনু থেকে, আরো সরঞ্জাম> বিকাশকারী সরঞ্জাম ক্লিক করুন৷ .

এটি আপনার খোলা Chrome ট্যাব বা উইন্ডোর ডানদিকে একটি নতুন মেনুতে DevTools কিট খুলবে৷

আপনি কীবোর্ড শর্টকাট ব্যবহার করেও এটি করতে পারেন। একটি Windows বা Linux PC থেকে, Chrome ব্রাউজার খুলুন এবং F12 টিপুন মূল. এছাড়াও আপনি Ctrl + Alt + J টিপতে পারেন অথবা Ctrl + Alt + I একটি খোলা Chrome ট্যাব বা উইন্ডোতে কীগুলি৷

macOS এ, F12 টিপুন অথবা বিকল্প + কমান্ড + J টিপুন অথবা বিকল্প + কমান্ড + I পরিবর্তে Chrome DevTools মেনু খুলতে কী। এটি DevTools মেনুর শীর্ষে থাকা অন্যান্য Chrome টুলগুলিতে যাওয়ার বিকল্প সহ Chrome কনসোল খুলবে৷

আপনি যদি চান, আপনি একটি ওয়েবসাইটের জন্য সোর্স কোড দেখতে পারেন (এলিমেন্টগুলি খোলার মাধ্যমে প্রক্রিয়ার মধ্যে DevTools মেনুর ট্যাব) যে কোনো খোলা ওয়েব পৃষ্ঠাতে ডান-ক্লিক করে এবং পরিদর্শন ক্লিক করে বিকল্প।

Chrome DevTools ব্যবহার করা

যেমন আমরা সংক্ষেপে স্পর্শ করেছি, আপনি এলিমেন্টস-এর অধীনে একটি ওয়েবসাইটের সোর্স কোড দেখতে Chrome DevTools কিট ব্যবহার করতে পারেন ট্যাব এটি আপনাকে কনসোল-এর অধীনে ক্রোম কনসোলে আপনার লোড করা পৃষ্ঠার পিছনের কোড বিশ্লেষণ করার পাশাপাশি ত্রুটি বার্তাগুলি (সাইটটি কীভাবে লোড হয়েছে তা নির্দেশ করে) দেখতে দেবে ট্যাব।

আপনি উৎস এর অধীনে একটি ওয়েবসাইট থেকে বিষয়বস্তুর জন্য বিভিন্ন উত্স দেখতে পারেন৷ ট্যাব উদাহরণস্বরূপ, যদি একটি সাইট একটি সামগ্রী বিতরণ নেটওয়ার্ক (CDN) ব্যবহার করে, তাহলে একটি সাইটের মিডিয়া এখানে একটি ভিন্ন উত্স হিসাবে তালিকাভুক্ত হবে৷

ক্রোম ডেভেলপার মোড আপনাকে সেই সামগ্রীটি সরাসরি ডাউনলোড করতে বা সামগ্রীর আরও জটিল বিশ্লেষণ করতে দেয়৷

আপনি যদি একটি সাইট কীভাবে কাজ করছে তা পরীক্ষা করতে চান, আপনি নেটওয়ার্কের অধীনে আপনার নেটওয়ার্ক ব্যবহার নিরীক্ষণ এবং রেকর্ড করতে পারেন ট্যাব এটি আপনার ব্রাউজার এবং সাইটের মধ্যে করা নেটওয়ার্ক অনুরোধের গতি, আকার এবং প্রকার দেখাবে৷

উদাহরণস্বরূপ, যখন একটি পৃষ্ঠা প্রথম লোড হয়, তখন সাইটটি নিজেই পৃষ্ঠার বিষয়বস্তু লোড করবে, তবে এটি তৃতীয় পক্ষের ডেটাবেস থেকে ডেটার অনুরোধও করতে পারে। উদাহরণস্বরূপ, আপনি যখন সাইন ইন করেন, এটি একটি ডাটাবেসকে জিজ্ঞাসা করতে পারে যা এখানে একটি নেটওয়ার্ক অনুরোধ হিসাবে দেখাবে৷

আপনি পারফরমেন্স এর অধীনে এটি আরও বিশ্লেষণ করতে পারেন ট্যাব, যেখানে আপনি বিভিন্ন পয়েন্টে স্ক্রিনশট রেকর্ড করা সহ আরও গভীরতার সাথে আপনার ক্রোম ব্রাউজার ব্যবহার রেকর্ড করতে পারেন। এটি আরও বিশ্লেষণের জন্য আপনার সাইটটি লোড হতে কতক্ষণ সময় নেয় তা লগ করবে৷

আপনার পিসি মেমরিতে কঠোর হওয়ার জন্য Google Chrome-এর খ্যাতি রয়েছে, তাই আপনি মেমরি-এর অধীনে আপনার সাইটের জাভাস্ক্রিপ্ট মেমরি ব্যবহার পরীক্ষা করতে পারেন। ট্যাব Chrome DevTools ডকুমেন্টেশন পৃষ্ঠায় এই পরীক্ষা সম্পর্কে আরও তথ্য সহ বিভিন্ন Chrome টেস্টিং প্রোফাইল এখানে ব্যবহার করা যেতে পারে৷

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

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

আপনি যদি আপনার সাইটের পারফরম্যান্সের উপর একটি প্রতিবেদন তৈরি করতে চান, যার মধ্যে এটি সাধারণ ব্যবহারকারীর মান পূরণ করে কিনা এবং যদি সাইটের কার্যক্ষমতা সার্চ ইঞ্জিন অপ্টিমাইজেশানকে প্রভাবিত করতে পারে তবে আপনি বাতিঘর-এ ক্লিক করতে পারেন ট্যাব এটি সেটিংস অফার করে যা আপনি আপনার প্রতিবেদনের জন্য চেক বা আনচেক করতে পারেন—প্রতিবেদন তৈরি করুন-এ ক্লিক করুন দেখার জন্য রিপোর্ট তৈরি করতে।

ক্রোম ডেভেলপার মোড ডেভেলপারদের কাছে আনতে পারে এমন সম্ভাবনার উপরিভাগটি খুব কমই স্ক্র্যাচ করে। আপনি যদি আরও জানতে চান, তাহলে Chrome DevTools ডকুমেন্টেশন আপনাকে অফারে থাকা সরঞ্জাম এবং বৈশিষ্ট্যগুলির সাথে সাহায্য করবে, এর সাথে আপনার নিজের ব্যবহারকারীর পরীক্ষাগুলি কীভাবে তৈরি করবেন তা সহ।

উন্নত Google Chrome কৌশল

বেশিরভাগ ক্রোম ব্যবহারকারীরা কখনই জানেন না যে Google Chrome DevTools কিটটি তাদের ব্রাউজারে বিদ্যমান, কিন্তু শক্তি ব্যবহারকারীদের জন্য, এটি ওয়েবসাইটগুলি পরীক্ষা এবং বিশ্লেষণ করার জন্য একটি ব্যতিক্রমী কার্যকর উপায় হিসাবে রয়ে গেছে। এছাড়াও ওয়েব ডেভেলপারদের জন্য তৃতীয় পক্ষের ক্রোম এক্সটেনশন রয়েছে যা আপনার সাইটকে আরও পরীক্ষা করতে সাহায্য করবে।

আপনি যদি একটি বেসিক ওয়েবসাইট তৈরি করেন, তাহলে Chrome ডেভেলপার মোডে স্যুইচ করা আপনাকে আপনার সাইটের সাথে সাথে দৃশ্যমান নয় এমন ত্রুটিগুলি চিহ্নিত করতে সাহায্য করতে পারে৷ Chrome সঠিকভাবে কাজ করলেই আপনি এটি করতে পারেন, তাই আপনি যদি Chrome ক্র্যাশের সাথে লড়াই করে থাকেন, তাহলে আপনাকে প্রথমে আপনার ব্রাউজার রিসেট বা পুনরায় ইনস্টল করতে হতে পারে৷