ওয়েবসাইটের সমস্যা সমাধানের জন্য Chrome DevTools কীভাবে ব্যবহার করবেন

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

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

কিভাবে Chrome ডেভেলপার টুল কাজ করে

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

DevTools-এর সাহায্যে, আপনি জাভাস্ক্রিপ্ট, HTML এবং CSS-এর মতো ওয়েবসাইটের কোডে রিয়েল-টাইম সম্পাদনা করতে পারেন এবং আপনার পরিবর্তনের তাৎক্ষণিক ফলাফল পেতে পারেন।

DevTools-এর মাধ্যমে আপনি যে পরিবর্তনগুলি করেন তা স্থায়ীভাবে ওয়েবসাইটকে প্রভাবিত করে না। তারা শুধুমাত্র অস্থায়ীভাবে প্রত্যাশিত ফলাফল প্রদর্শন করে যেন আপনি তাদের প্রকৃত উৎস কোডে প্রয়োগ করেছেন। এটি আপনাকে আপনার ওয়েবসাইটটি আরও দ্রুত লোড করার উপায়গুলি তৈরি করতে দেয় এবং বাগগুলিকে আয়রন করা সহজ করে তোলে৷

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

আপনি বিভিন্ন উপায়ে Chrome DevTools অ্যাক্সেস করতে পারেন। Mac OS-এ শর্টকাট পদ্ধতি সহ বিকাশকারী সরঞ্জামগুলি খুলতে, Cmd + Opt + I টিপুন . আপনি যদি Windows OS ব্যবহার করেন, তাহলে Ctrl + Shift + I চাপুন আপনার কীবোর্ডের কীগুলি৷

বিকল্পভাবে, আপনি স্ক্রিনের উপরের-ডানদিকে তিনটি বিন্দুতে ক্লিক করে Chrome বিকাশকারী সরঞ্জামগুলি অ্যাক্সেস করতে পারেন৷ আরো টুলস-এ যান এবং ডেভেলপার টুলস নির্বাচন করুন . আরেকটি বিকল্প হল ওয়েব পৃষ্ঠায় ডান-ক্লিক করা এবং পরিদর্শন-এ ক্লিক করা বিকল্প।

ওয়েবসাইট নির্ণয়ের জন্য Chrome ডেভেলপার টুল ব্যবহার করা

Chrome DevTools একটি ওয়েবপৃষ্ঠাকে টুইক এবং সমস্যা সমাধানের বিভিন্ন উপায় অফার করে৷ DevTools আপনাকে সাহায্য করতে পারে এমন কিছু উপায় দেখে নেওয়া যাক৷

দেখুন আপনার ওয়েবসাইটটি একটি স্মার্টফোনে কেমন দেখাচ্ছে

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

সৌভাগ্যক্রমে, একটি ওয়েবপৃষ্ঠার স্ক্রীনের আকার সেট করার পাশাপাশি, Chrome DevTools আপনাকে বিভিন্ন মোবাইল স্ক্রীনের ধরন এবং সংস্করণগুলির মধ্যেও স্যুইচ করতে দেয়৷

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

একটি ওয়েবপৃষ্ঠার উত্স ফাইল অ্যাক্সেস করুন

আপনি Chrome DevTools এর মাধ্যমে একটি ওয়েবপৃষ্ঠা তৈরি করা ফাইলগুলি অ্যাক্সেস করতে পারেন৷ এই ফাইলগুলি অ্যাক্সেস করতে, উৎস-এ ক্লিক করুন৷ DevTools মেনুর উপরের অংশে বিকল্প। এটি ওয়েবসাইটের ফাইল সিস্টেমকে প্রকাশ করে এবং আপনাকে সম্পাদনাও দেয়।

আপনি সোর্স ফাইলগুলিও অনুসন্ধান করতে পারেন, যেটি সহায়ক হতে পারে যখন আপনি এমন একটি ওয়েবপৃষ্ঠা নিয়ে কাজ করছেন যেখানে অনেক সংস্থান রয়েছে৷ DevTools এর মাধ্যমে একটি উৎস ফাইল অনুসন্ধান করতে, অনুসন্ধান এ ক্লিক করুন৷ কনসোলের ঠিক উপরে বিকল্প।

যাইহোক, যদি আপনি অনুসন্ধান খুঁজে না পান বিকল্প, একটি ভাল বিকল্প হল কীবোর্ড শর্টকাট ব্যবহার করা। Mac OS-এ, Cmd + Opt + F টিপুন একটি উৎস ফাইল অনুসন্ধান করার জন্য কী। আপনি যদি Windows OS ব্যবহার করেন, তাহলে Ctrl + Shift + F টিপুন সোর্স ফাইল সার্চ বার অ্যাক্সেস করার জন্য কী।

একটি ওয়েবপেজে লাইভ এডিট সম্পাদন করুন

DevTools ব্যবহার করার প্রধান উদ্দেশ্যগুলির মধ্যে একটি হল ওয়েবপেজে উপাদানগুলির একটি তাত্ক্ষণিক জাল সম্পাদনা করা৷ একবার আপনি বিকাশকারী সরঞ্জামগুলিতে স্যুইচ করলে, আপনি উপাদানগুলিতে ক্লিক করে একটি ওয়েবসাইটের HTML সামগ্রী সম্পাদনা করতে পারেন বিকল্প তারপর, কোড এডিটরের মধ্যে যে কোনো পয়েন্টে আপনি পরিবর্তনগুলি প্রয়োগ করতে চান তার উপর ডান-ক্লিক করুন এবং HTML হিসাবে সম্পাদনা করুন নির্বাচন করুন .

ইনলাইন নয় এমন CSS বৈশিষ্ট্য সম্পাদনা করতে, উৎস নির্বাচন করুন . এরপরে, আপনি যে CSS ফাইলটি সম্পাদনা করতে চান সেটি নির্বাচন করুন। একটি লাইভ সম্পাদনা করতে কোড কনসোলের মধ্যে আপনার পছন্দের লাইনে আপনার কার্সার রাখুন। এটি করার ফলে আপনি ওয়েবপেজে প্রযোজ্য যেকোনো শৈলী পরিবর্তনের বিষয়ে তাৎক্ষণিক প্রতিক্রিয়া পাবেন।

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

DevTools কনসোল দিয়ে জাভাস্ক্রিপ্ট কোড ডিবাগ করুন

জাভাস্ক্রিপ্ট ডিবাগ করার সেরা উপায়গুলির মধ্যে একটি হল Chrome এর বিকাশকারী সরঞ্জামগুলি ব্যবহার করা৷ এটি আপনাকে অবৈধ স্ক্রিপ্টের পাশাপাশি বাগটির সঠিক অবস্থানের একটি সরাসরি প্রতিবেদন দেয়৷

JavaScript দিয়ে ওয়েবসাইট ডিজাইন করার সময় DevTools সবসময় খোলা রাখা ভালো অভ্যাস। উদাহরণস্বরূপ, console.log() চালানো হচ্ছে নির্দেশাবলীর একটি সেটে JavaScript-এর কমান্ড যদি প্রোগ্রামটি সফলভাবে চলে তাহলে DevTools কনসোলে সেই লগের ফলাফল প্রদর্শন করে৷

ডিফল্টরূপে, কনসোল আপনার ওয়েবসাইটে যেকোনো জাভাস্ক্রিপ্ট সমস্যা রিপোর্ট করে। আপনি DevTools-এর নীচের অংশে কনসোলটি খুঁজে পেতে পারেন বা কনসোলে ক্লিক করে এটি অ্যাক্সেস করতে পারেন Chrome DevTools উইন্ডোর শীর্ষে বিকল্প৷

একটি ডাটাবেস থেকে রিসোর্স লোডিং মনিটর করুন

জাভাস্ক্রিপ্ট ডিবাগ করার পাশাপাশি, কনসোল আপনাকে রিসোর্সের বিশদ বিবরণ দিতে পারে যা ওয়েবসাইটের ডাটাবেস থেকে সঠিকভাবে লোড হচ্ছে না।

যদিও এটি সর্বদা ব্যাকএন্ড সমস্যাগুলি ডিবাগ করার সর্বোত্তম উপায় নয়, তবুও এটি আপনাকে বলে যে কোন সংস্থানগুলি একটি 404 ফেরত দিচ্ছে এই উপাদানগুলির একটি ডাটাবেস কোয়েরি চালানোর পরে ত্রুটি৷

ক্রোম ডেভেলপার টুলের ওরিয়েন্টেশন পরিবর্তন করুন

Chrome বিকাশকারী সরঞ্জামগুলির অবস্থান পরিবর্তন করতে, DevTools-এর মধ্যে তিনটি মেনু বিন্দুতে ক্লিক করুন (ব্রাউজারে প্রধানটি নয়)৷ তারপর ডক সাইড থেকে আপনার পছন্দের অবস্থান নির্বাচন করুন বিকল্প।

Chrome DevTools এক্সটেনশন ইনস্টল করুন

আপনি ভাষা বা ফ্রেমওয়ার্ক-নির্দিষ্ট এক্সটেনশন ইনস্টল করতে পারেন যা Chrome DevTools-এর সাথে কাজ করে। এই এক্সটেনশনগুলি ইনস্টল করা আপনাকে আপনার ওয়েবপৃষ্ঠাকে আরও দক্ষতার সাথে ডিবাগ করতে দেয়৷

আপনি Chrome এর বৈশিষ্ট্যযুক্ত DevTools এক্সটেনশন গ্যালারিতে Chrome DevTools-এর জন্য উপলব্ধ এক্সটেনশনগুলির একটি তালিকা অ্যাক্সেস করতে পারেন৷

একটি ওয়েবসাইটে নিরাপত্তা সংক্রান্ত সমস্যাগুলি পরীক্ষা করুন

Chrome DevTools আপনাকে ওয়েব নিরাপত্তা শংসাপত্রের প্রাপ্যতা এবং সংযোগটি কতটা নিরাপদ, অন্যদের মধ্যে আপনার ওয়েবসাইট কতটা নিরাপদ তা মূল্যায়ন করতে দেয়। আপনার ওয়েবসাইট সুরক্ষিত কিনা তা পরীক্ষা করতে, নিরাপত্তা-এ ক্লিক করুন DevTools-এর উপরে বিকল্প।

নিরাপত্তা ট্যাব আপনাকে আপনার ওয়েবসাইটের নিরাপত্তা বিশদ বিবরণের একটি ওভারভিউ দেয় এবং আপনাকে কোনো সম্ভাব্য হুমকির কথা বলে।

আপনার ওয়েবসাইট অডিট করুন

Chrome DevTools-এর একটি বৈশিষ্ট্য রয়েছে যা আপনাকে নির্দিষ্ট প্যারামিটারের উপর ভিত্তি করে আপনার ওয়েবসাইটের সামগ্রিক কর্মক্ষমতা পরীক্ষা করতে দেয়৷

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

এরপর, প্রতিবেদন তৈরি করুন-এ ক্লিক করুন আপনার পূর্বে নির্বাচিত প্যারামিটারের উপর ভিত্তি করে আপনার ওয়েবপৃষ্ঠার একটি বিশ্লেষণ চালানোর জন্য।

এছাড়াও আপনি পারফরম্যান্স-এ ক্লিক করে একটি ওয়েবসাইটের রান-টাইম বা লোডিং কর্মক্ষমতা মূল্যায়ন করতে পারেন। বিকল্প একটি পরীক্ষা চালানোর জন্য, রেকর্ড বোতামে ক্লিক করুন পাশের আইকনে ক্লিক করুন৷ একটি রান-টাইম বিশ্লেষণ সঞ্চালনের বিকল্প। বিকল্পভাবে, লোড-টাইম কর্মক্ষমতা মূল্যায়ন করতে এটির নীচের রিলোড বোতামে ক্লিক করুন। স্টপ এ ক্লিক করুন বিশ্লেষক থামাতে এবং ফলাফল প্রদর্শন করতে।

Chrome DevTools এর সুবিধা নিন

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

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