Chrome DevTools ডেভেলপারদের জন্য একটি অপরিহার্য টুল। অন্যান্য ব্রাউজারও ট রাবলশুটিং টুল অফার করলেও, Chrome DevTools এর মাল্টি-ফাংশনাল ইন্টারফেস এবং জনপ্রিয়তার কারণে এটি আপনার মনোযোগের যোগ্য।
ক্রোম ডেভেলপারদের জন্য সবচেয়ে জনপ্রিয় ব্রাউজার তার শক্তিশালী ডিবাগিং টুল স্যুটের কারণে। Chrome DevTools ব্যবহার করা সহজ, কিন্তু আপনাকে এটি কীভাবে কাজ করে সেটি বুঝতে হবে এর সর্বোত্তম আউটপুট পেতে।
Chrome Developer Tools কীভাবে কাজ করে
Chrome DevTools আপনাকে একটি ওয়েবসাইটের সমস্যা সমাধান করতে দেয় এর এরর কনসোল এবং অন্যান্য ডিবাগিং ও মনিটরিং টুলের মাধ্যমে। DevTools ব্যবহার করে ফ্রন্টএন্ড লুপহোলস এক্সপোজ করা যায় এবং আপনার ওয়েবসাইট মোবাইল এবং ট্যাবলেট ডিভাইসে কেমন দেখায় সেটি মনিটর করা যায়।
DevTools-এ, আপনি একটি ওয়েবসাইটের কোডে রিয়েল-টাইম এডিট করতে পারেন, যেমন JavaScript, HTML, এবং CSS, এবং আপনার পরিবর্তনগুলোর ইনস্ট্যান্ট ফলাফল পেতে পারেন।
DevTools-এর মাধ্যমে আপনি যে পরিবর্তনগুলো করেন সেগুলো ওয়েবসাইটকে স্থায়ীভাবে প্রভাবিত করে না। সেগুলো শুধু অস্থায়ীভাবে প্রত্যাশিত ফলাফল দেখায় যেন আপনি সেগুলো আসল সোর্স কোডে অ্যাপ্লাই করেছেন। এটি আপনাকে আপনার ওয়েবসাইটকে অনেক দ্রুত লোড করার উপায় বের করতে এবং বাগগুলো আঁচড় করতে সাহায্য করে।
Chrome DevTools অ্যাক্সেস করার পদ্ধতি
আপনি কয়েকভাবে Chrome DevTools অ্যাক্সেস করতে পারেন। Mac OS-এ শর্টকাট মেথড দিয়ে ডেভেলপার টুলস খোলতে, Cmd + Opt + I চাপুন। আপনি যদি Windows OS ব্যবহার করেন, তবে আপনার কিবোর্ডের Ctrl + Shift + I কীগুলো চাপুন।
বিকল্পভাবে, আপনি স্ক্রিনের উপরের ডান কোণার তিনটি ডটে ক্লিক করে Chrome ডেভেলপার টুলস অ্যাক্সেস করতে পারেন। More tools-এ যান এবং Developer tools নির্বাচন করুন। আরেকটি অপশন হলো ওয়েব পেজে রাইট-ক্লিক করে Inspect অপশনটি নির্বাচন করা।
ওয়েবসাইট ডায়গনোসিসের জন্য Chrome Developer Tools ব্যবহার
Chrome DevTools একটি ওয়েবপেজ ট্রাবলশুট এবং ট্রিক করার অনেক উপায় অফার করে। DevTools আপনাকে কীভাবে সাহায্য করতে পারে তার কিছু উপায় দেখে নিই।
দেখুন আপনার ওয়েবসাইট স্মার্টফোনে কেমন দেখায়
একবার আপনি আপনার ক্রোম ব্রাউজারকে ডেভেলপার মোডে স্যুইচ করলে, এটি আপনার ওয়েবপেজের একটি হাফ-সাইজড ভার্সন রেন্ডার করে। যাইহোক, এটি আপনাকে একটি রিয়েল ভিউ দেবে না যে সেটি একটি স্মার্টফোন বা ট্যাবলেটে কেমন দেখাবে।
সৌভাগ্যবশত, একটি ওয়েবপেজের স্ক্রিন সাইজ সেট করার পাশাপাশি, Chrome DevTools আপনাকে বিভিন্ন মোবাইল স্ক্রিন টাইপ এবং ভার্সনের মধ্যে স্যুইচ করতে দেয়।
সেটি অ্যাক্সেস করতে, Inspect মোড অন করুন। পরবর্তী, DevTools-এ উপরের বাম কোণার Responsive ড্রপডাউনে ক্লিক করুন এবং আপনার পছন্দের মোবাইল ডিভাইস নির্বাচন করুন। ওয়েবপেজটি তখন রেন্ডার হবে এবং আপনার নির্বাচিত মোবাইল ডিভাইসের সাইজে ফিট होने জন্য সমায়োজিত হবে।
একটি ওয়েবপেজের সোর্স ফাইল অ্যাক্সেস করুন
আপনি Chrome DevTools ব্যবহার করে একটি ওয়েবপেজ গঠনকারী ফাইলগুলো অ্যাক্সেস করতে পারেন। এই ফাইলগুলো অ্যাক্সেস করতে, DevTools মেনুর উপরের অংশে Sources অপশনে ক্লিক করুন। এটি ওয়েবসাইটের ফাইল সিস্টেম এক্সপোজ করে এবং এডিটিংও দেয়।
আপনি সোর্স ফাইলও সার্চ করতে পারেন, যা একটি রিসোর্স-সম্পন্ন ওয়েবপেজের সাথে কাজ করার সময় সহায়ক। DevTools-এ সোর্স ফাইল সার্চ করতে, কনসোলের ঠিক উপরে Search অপশনে ক্লিক করুন।
যাইহোক, আপনি যদি Search অপশনটি খুঁজে পান না, তবে একটি ভালো বিকল্প হলো কিবোর্ড শর্টকাট ব্যবহার করা। Mac OS-এ, Cmd + Opt + F কীগুলো চাপুন একটি সোর্স ফাইল সার্চ করতে। আপনি যদি Windows OS ব্যবহার করেন, তবে Ctrl + Shift + F কী চাপুন সোর্স ফাইল সার্চ বার অ্যাক্সেস করতে।
একটি ওয়েবপেজে লাইভ এডিট করুন
DevTools ব্যবহার করার প্রধান উদ্দেশ্যের একটি হলো একটি ওয়েবপেজের এলিমেন্টগুলোর ইনস্ট্যান্ট ফেক এডিট করা। একবার আপনি ডেভেলপার টুলসে স্যুইচ করলে, আপনি Elements অপশনে ক্লিক করে একটি ওয়েবসাইটের HTML কন্টেন্ট এডিট করতে পারেন। তারপর, কোড এডিটরে আপনি যেখানে পরিবর্তন প্রয়োগ করতে চান সেখানে রাইট-ক্লিক করুন এবং Edit as HTML নির্বাচন করুন।
ইনলাইন নন থাকা CSS প্রপার্টি এডিট করতে, Sources নির্বাচন করুন। পরবর্তী, আপনি যে CSS ফাইলটি এডিট করতে চান সেটি নির্বাচন করুন। কোড কনসোলে আপনার পছন্দের লাইনে কারসর রাখুন লাইভ এডিট করতে। এটি আপনার ওয়েবপেজে আপনি যা স্টাইল পরিবর্তন প্রয়োগ করছেন তার ইনস্ট্যান্ট ফিডব্যাক দেয়।
মনে রাখবেন যে DevTools-এ একটি পেজ এডিট করলে, আপনার ব্রাউজারে পেজটি রিলোড করলে এটি আসল রূপে ফিরে যাবে, এবং এডিটটি শুধু আপনার কাছে দৃশ্যমান। DevTools-এর মাধ্যমে এডিট করা নেটher ওই ওয়েবসাইটের স্মুথ রানিং নই usages কে প্রভাবিত করে অন্য ব্যবহারকারীদের জন্য।
DevTools কনসোল দিয়ে JavaScript কোড ডিবাগ করুন
JavaScript ডিবাগ করার সেরা উপায়গুলোর একটি হলো Chrome-এর ডেভেলপার টুলস ব্যবহার করা। এটি আপনাকে অবৈধ স্ক্রিপ্টের সরাসরি রিপোর্ট এবং বাগের সঠিক লোকেশন দেয়।
JavaScript-এ একটি ওয়েবসাইট ডিজাইন করার সময় DevTools সবসময় খোলা রাখা একটি ভালো অভ্যাস। উদাহরণস্বরূপ, JavaScript-এর console.log() কমান্ড একটি ইনস্ট্রাকশন সেটে চালালে সেটির রেজাল্ট DevTools কনসোলে দেখাবে যদি প্রোগ্রাম সফলভাবে চলে।
ডিফল্টরূপে, কনসোল আপনার ওয়েবসাইটের যেকোনো JavaScript ইশিউ রিপোর্ট করে। আপনি কনসোলটি DevTools-এর নিচের অংশে পাবেন অথবা Chrome DevTools উইন্ডোর শীর্ষে Console অপশনে ক্লিক করে অ্যাক্সেস করতে পারেন।
ডাটাবেস থেকে রিসোর্স লোডিং মনিটর করুন
JavaScript ডিবাগ করার পাশাপাশি, কনসোল আপনাকে aquell রিসোর্সগুলোর একটি বিস্তারিত বিবরণ দিতে পারে যা ওয়েবসাইটের ডাটাবেস থেকে সঠিকভাবে লোড হচ্ছে না।
যদিও এটি ব্যাকএন্ড ইশিউ ডিবাগ করার সবচেয়ে ভালো উপায় নয় সবসময়, এটি আপনাকে জানিয়ে দেয় যে ডাটাবেস কোয়েরি রান করার পর那些 এলিমেন্টগুলো 404 এরর রিটার্ন করছে।
Chrome Developer Tools-এর অরিয়েন্টেশন পরিবর্তন করুন
Chrome ডেভেলপার টুলসের পজিশন পরিবর্তন করতে, DevTools-এ তিনটি মেনু ডটে ক্লিক করুন (ব্রাউজারের প্রধানটা নয়)। তারপর Dock side অপশন থেকে আপনার পছন্দের পজিশন নির্বাচন করুন।
Chrome DevTools এক্সটেনশন ইনস্টল করুন
আপনি ভাষা বা ফ্রেমওয়ার্ক-স্পেসিফিক এক্সটেনশনও ইনস্টল করতে পারেন যা Chrome DevTools-এর সাথে কাজ করে। এই এক্সটেনশনগুলো ইনস্টল করলে আপনি আপনার ওয়েবপেজ আরও কার্যকরভাবে ডিবাগ করতে পারবেন।
আপনি Chrome DevTools-এর জন্য উপলব্ধ এক্সটেনশনদের তালিকা Chrome-এর Featured DevTools Extensions গ্যালেরিতে পেতে পারেন।
একটি ওয়েবসাইটে নিরাপত্তা সমস্যা চেক করুন
Chrome DevTools আপনাকে আপনার ওয়েবসাইট কতটুকু নিরাপদ সেটি অ্যাক্সেস করতে দেয় প্যারামিটার গুলোর ওপর ভিত্তি করে যেমন ওয়েব সিকিউরিটি সার্টিফিকেটের উপলব্ধতা এবং সংযোগ কতটুকু নিরাপদ, ইত্যাদি। আপনার ওয়েবসাইট নিরাপদ কিনা চেক করতে, DevTools-এর শীর্ষে Security অপশনে ক্লিক করুন।
Security ট্যাব আপনাকে আপনার ওয়েবসাইটের নিরাপত্তা বিবরণের একটি ওভারভিউ দেয় এবং আপনাকে যেকোনো সম্ভাব্য হুমকি বলে।
আপনার ওয়েবসাইট অডিট করুন
Chrome DevTools-এ একটি ফিচার আছে যা আপনাকে নির্দিষ্ট প্যারামিটারসহ আপনার ওয়েবসাইটের সমগ্র পারফরম্যান্স চেক করতে দেয়।
সেটি অ্যাক্সেস করতে, DevTools উইন্ডোর শীর্ষে Lighthouse অপশনটি নির্বাচন করুন। পরবর্তী, আপনি যে প্যারামিটারগুলো চেক করতে চান সেগুলো নির্বাচন করুন, তারপর Mobile অথবা Desktop অপশনে টিক দিন যেন আপনি দেখতে পান আপনার ওয়েবপেজ বিভিন্ন প্ল্যাটফর্মে কীভাবে পারফর্ম করছে।
পরবর্তী, আপনি আগে নির্বাচন করা প্যারামিটারগুলোর ভিত্তিতে আপনার ওয়েবপেজের একটি অ্যানালাইসিস চালানোর জন্য Generate report-এ ক্লিক করুন।
আপনি Performance অপশনে ক্লিক করে একটি ওয়েবসাইটের রান-টাইম বা লোডিং পারফরম্যান্সও আশেস করতে পারেন। একটি টেস্ট চালাতে, Click the record button অপশনের পাশের আইকনে ক্লিক করুন রান-টাইম অ্যানালাইসিস করতে। অথবা, এর নিচের রিলোড বাটনে ক্লিক করুন লোড-টাইম পারফরম্যান্স আশেস করতে। আNALাইজার বন্ধ করে ফলাফল দেখানোর জন্য Stop-এ ক্লিক করুন।
Chrome DevTools-এর সুবিধা নিন
আপনার প্রয়োজনের উপর নির্ভর করে, Chrome DevTools আপনাকে শুধু সাধারণ ওয়েবসাইট ডিবাগিংর চেয়ে অনেক বেশি করতে দেয়। সৌভাগ্যবশত, DevTools সব স্কিল লেভেলের প্রোগ্রামারদের জন্য ব্যবহার করা সহজ। আপনি আপনি যে ওয়েবসাইটগুলো ভিজিট করেন সেসবের সোর্স কোড দেখে ওয়েবসাইট ফ্রন্টএন্ড ডেভেলপমেন্টের কিছু বেসিকও শিখতে পারেন।
আপনি এই আর্টিকেলে আলোচনা না করা কিছু অন্যান্য অপশনও আবিষ্কার করতে পারেন। তাই, উপলব্ধ ফিচারগুলোর সাথে ঘুরে ফিরতে স্বাধীনভাবে অনুভব করুন। বসাইডে, এই ফিচারগুলো ট্রিক করা একটি ওয়েবসাইটকে একটুও ক্ষতি করে না।
