HTML Viewer: HTML Inspector

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

পড়ুন, সম্পাদনা করুন এবং প্রিভিউ করুন

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

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

পৃষ্ঠার কাঠামো পর্যালোচনা করুন

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

লিঙ্ক এবং রিসোর্স পরীক্ষা করুন

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

বিভিন্ন ভিউপোর্ট ব্যবহার করে দেখুন

ফোন, ট্যাবলেট এবং ডেস্কটপ আকারের জন্য রেসপন্সিভ প্রিভিউ প্রিসেট ব্যবহার করুন, অথবা নিজস্ব মাপ লিখুন। ভিউপোর্ট ঘোরান, জুম অ্যাডজাস্ট করুন এবং একটি হালকা, গাঢ় বা সিস্টেম কালার স্কিম বেছে নিন। যখন কোনো ওয়েবসাইট ভিন্ন সার্ভার-রেন্ডার করা কন্টেন্ট প্রদান করে, তখন একটি ভিন্ন ইউজার এজেন্ট দিয়ে রিফ্রেশ করুন। বর্তমান প্রিভিউটি একটি স্ক্রিনশট হিসেবে শেয়ার করুন। একটি সিমুলেটেড ভিউপোর্ট লেআউট তুলনা করতে সাহায্য করে; এটি প্রতিটি বাস্তব ডিভাইসের হুবহু প্রতিরূপ তৈরি করে না।

প্রিভিউয়ের আচরণ খতিয়ে দেখুন

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

প্রয়োজনীয় রেফারেন্স সংরক্ষণ করুন

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

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