গুগল ক্রোমে কীভাবে এইচটিএমএল উত্স দেখতে পাবেন

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

পৃষ্ঠার উত্স দেখুন উত্স দেখুন

ক্রোম ফায়ার করুন এবং আপনি HTML উত্স কোডটি দেখতে চান ওয়েব পৃষ্ঠায় ঝাঁপুন। পৃষ্ঠায় ডান-ক্লিক করুন এবং একটি নতুন ট্যাবে পৃষ্ঠার উত্সটি দেখতে "পৃষ্ঠার উত্স দেখুন" এ ক্লিক করুন বা Ctrl + U টিপুন।

ওয়েবপেজের জন্য সমস্ত এইচটিএমএল সহ একটি নতুন ট্যাব খোলে, সম্পূর্ণরূপে প্রসারিত এবং বিন্যাস ছাড়াই।

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

বিকাশকারী সরঞ্জাম ব্যবহার করে উত্সটি পরীক্ষা করুন

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

ক্রোম খুলুন এবং আপনি যে পৃষ্ঠাতে পরিদর্শন করতে চান তাতে যেতে; তারপরে Ctrl + Shift + i টিপুন। আপনি যে ওয়েবপৃষ্ঠাটি দেখছেন তার পাশাপাশি একটি ডকড ফলকটি খুলবে।

এটি আরও প্রসারিত করতে কোনও উপাদানটির পাশে সামান্য ধূসর তীরটিতে ক্লিক করুন।

আপনি যদি ডিফল্টরূপে পুরো পৃষ্ঠার কোডটি দেখতে না চান তবে পরিবর্তে এইচটিএমএলে কোনও নির্দিষ্ট উপাদানটি পরীক্ষা করেন, পৃষ্ঠার সেই স্থানটিতে ডান ক্লিক করুন, তারপরে "পরিদর্শন করুন" এ ক্লিক করুন।

এই বার ফলকটি খুললে এটি সরাসরি কোডের সেই অংশে চলে যায় যাতে আপনি ক্লিক করেছেন এমন উপাদান রয়েছে।

আপনি যদি ডকের অবস্থান পরিবর্তন করতে চান তবে আপনি এটিকে নীচে, বাম, ডানদিকে সরিয়ে নিতে পারেন বা এটিকে একটি পৃথক উইন্ডোতে আনডক করতে পারেন। মেনু আইকনটিতে ক্লিক করুন (তিনটি বিন্দু), তারপরে হয় আলাদা উইন্ডোতে আনডক চয়ন করুন, বামদিকে ডক করুন, নীচে ডক করুন বা ডানদিকে ডক করুন যথাক্রমে।

এখানেই শেষ এটা পেতে ওখানে যাও. আপনি কোডটি সন্ধান শেষ করার পরে, হয় উত্স দেখুন ট্যাবটি বন্ধ করুন বা আপনার ওয়েবপৃষ্ঠায় ফিরে আসতে বিকাশকারী সরঞ্জামের ফলকে ‘এক্স’ ক্লিক করুন।


$config[zx-auto] not found$config[zx-overlay] not found