প্রতিটি ব্রাউজারে একটি ওয়েব পেজের সোর্স কোড কিভাবে দেখুন

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

সর্বাধিক ওয়েব ব্রাউজার কোনও অতিরিক্ত সফ্টওয়্যারের প্রয়োজন নেই এমন কোনও ওয়েব পৃষ্ঠার সোর্স কোডটি দেখার ক্ষমতা উপলব্ধ করে, কোনও ব্যাপার না আপনি কোন ধরণের ডিভাইসে আছেন

কিছু এমনকি উন্নত কার্যকারিতা এবং কাঠামো অফার করে, এটি HTML এবং অন্যান্য প্রোগ্রামিং কোড ব্যবহার করে পৃষ্ঠাতে সহজ করে তোলে।

কেন আপনি সোর্স কোড দেখতে চান?

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

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

আপনার ব্রাউজারের পছন্দের ব্রাউজারে উৎস কোডটি কীভাবে দেখতে হবে তা নীচে তালিকাভুক্ত।

গুগল ক্রম

চলমান: Chrome OS, লিনাক্স, ম্যাকোস, উইন্ডোজ

Chrome এর ডেস্কটপ সংস্করণটি একটি পৃষ্ঠার সোর্স কোড দেখার জন্য তিনটি বিভিন্ন পদ্ধতি প্রস্তাব করে, নিম্নোক্ত কীবোর্ড শর্টকাট ব্যবহার করে প্রথম এবং সবচেয়ে সহজতম: CTRL + U (MacOS এ COMMAND + OPTION + U )।

চাপা যখন, এই শর্টকাট সক্রিয় পৃষ্ঠা জন্য এইচটিএমএল এবং অন্যান্য কোড প্রদর্শন একটি নতুন ব্রাউজার ট্যাব খুলুন। এই উৎসটি রং-কোডেড এবং এমনভাবে সাজানো হয়েছে যাতে এটি আপনি কীভাবে খুঁটিনাটি সাজান এবং আপনি যা খুঁজছেন তা খুঁজে পেতে সহজ করে তোলে। আপনি Chrome এর ঠিকানা দণ্ডে নীচের পাঠ্যটি প্রবেশ করে, ওয়েবপৃষ্ঠার URL এর বাম দিকে পাশে যুক্ত করে এবং এন্টার কীটি আঘাত করতে পারেন: view-source: (যেমন, দেখুন-উৎস: https: // www ।)।

তৃতীয় পদ্ধতি হল ক্রোমের বিকাশকারী সরঞ্জামগুলির মাধ্যমে, যা আপনাকে পৃষ্ঠার কোডে গভীর ডুব দিতে সক্ষম করে এবং টেস্টিং এবং ডেভলপমেন্টের জন্য এ-ফ্লাই-এর জন্য এটি টাচ করে দেয়। এই কীবোর্ড শর্টকাট ব্যবহার করে ডেভেলপার সরঞ্জামের ইন্টারফেস খোলা এবং বন্ধ করা যায়: CTRL + SHIFT + I ( COMMAND + OPTION + MacOS এ I )। আপনি নিম্নলিখিত পথ গ্রহণ করে তাদের আরম্ভ করতে পারেন।

  1. ঊর্ধ্ব ডানদিকের কোণায় অবস্থিত Chrome এর প্রধান মেনু বোতামে ক্লিক করুন এবং তিনটি উল্লম্বভাবে সংযুক্ত বিন্দু দ্বারা প্রতিনিধিত্ব করে।
  2. যখন ড্রপ-ডাউন মেনু প্রদর্শিত হবে, আপনার সরঞ্জামগুলি আরও টুলের উপরে মাউস কার্সার রাখো।
  3. যখন সাব-মেনু প্রদর্শিত হয়, তখন বিকাশকারী সরঞ্জামগুলিতে ক্লিক করুন।

অ্যান্ড্রয়েড
অ্যান্ড্রয়েডের জন্য ক্রোমের একটি ওয়েব পেজের উত্স দেখতে নীচের টেক্সটকে তার ঠিকানাটির সামনে (অথবা URL) সামনে এনে এবং এটি জমা দেওয়ার মতই সহজ: দেখুন-উৎস:। এই একটি উদাহরণ দেখতে হবে- উৎস: https: // www। । প্রশ্নের মধ্যে এইচটিএমএল এবং অন্যান্য কোড অবিলম্বে সক্রিয় উইন্ডোতে প্রদর্শিত হবে।

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

অ্যাপ স্টোরে $ 0.99 এর জন্য উপলব্ধ, উৎস উত্স আপনাকে পৃষ্ঠাটির URL টি প্রবেশ করতে অনুরোধ করে (বা Chrome- এর অ্যাড্রেস বার থেকে কপি / পেস্ট করুন, যা কখনও কখনও সরল পথ গ্রহণ করতে পারে) এবং এটি এরকম। এইচটিএমএল এবং অন্যান্য সোর্স কোড প্রদর্শন করার পাশাপাশি, অ্যাপ্লিকেশনটিতে এমন ট্যাব রয়েছে যা পৃথক পৃষ্ঠা সম্পদ প্রদর্শন করে, ডকুমেন্ট অবজেক্ট মডেল (DOM), পাশাপাশি পৃষ্ঠার আকার, কুকিজ এবং অন্যান্য আকর্ষণীয় বিবরণগুলি।

মাইক্রোসফট এজ

চলমান: উইন্ডোজ

এজ ব্রাউজারটি আপনাকে বর্তমান পৃষ্ঠাটির সোর্স কোডটি তার বিকাশকারী সরঞ্জামগুলির ইন্টারফেসের মাধ্যমে দেখতে, বিশ্লেষণ এবং এমনকি ম্যানিপুলেট করতে দেয়। এই সহজ টুলস অ্যাক্সেস করতে আপনি এই কীবোর্ড শর্টকাট এক ব্যবহার করতে পারেন: F12 বা CTRL + ইউ পরিবর্তে যদি আপনি মাউসটি পছন্দ করেন, তাহলে এজ এর মেনু বোতামে ক্লিক করুন (উপরের ডান দিকে অবস্থিত তিনটি বিন্দু) এবং তালিকা থেকে F12 বিকাশকারী সরঞ্জাম বিকল্পটি নির্বাচন করুন।

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

মোজিলা ফায়ারফক্স

চলমান: লিনাক্স, ম্যাকোস, উইন্ডোজ

ফায়ারফক্সের ডেস্কটপ সংস্করণে একটি পৃষ্ঠার সোর্স কোডটি দেখতে আপনি আপনার কীবোর্ডে CTRL + U ( COMMAND + U on MacOS) টিপতে পারেন, যা সক্রিয় ওয়েব পৃষ্ঠার জন্য এইচটিএমএল এবং অন্যান্য কোড ধারণকারী একটি নতুন ট্যাব খুলবে।

নিম্নোক্ত টেক্সটকে ফায়ারফক্স এর অ্যাড্রেস বারে টাইপ করুন, সরাসরি পৃষ্ঠার URL এর বামে, একই উৎসকে বর্তমান ট্যাবে পরিবর্তে দেখাবে: view-source: (যেমন, দেখুন-উৎস: https: // www।) ।

একটি পৃষ্ঠার সোর্স কোড অ্যাক্সেস করার আরেকটি উপায় হল ফায়ারফক্সের বিকাশকারী সরঞ্জামগুলির মাধ্যমে, নিম্নোক্ত ধাপগুলির মাধ্যমে প্রবেশযোগ্য।

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

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

অ্যান্ড্রয়েড
ফায়ারফক্সের অ্যান্ড্রয়েড সংস্করণে সোর্স কোডটি দেখানো হচ্ছে নিম্নোক্ত পাঠ্য সহ ওয়েবপৃষ্ঠাটির ইউআরএল প্রিফিক্সিং দ্বারা প্রাপ্ত: দেখুন-উৎস:। উদাহরণস্বরূপ, আপনার জন্য HTML উৎসটি ব্রাউজারের ঠিকানা দণ্ডে নিম্নোক্ত পাঠ জমাতে হবে: দেখুন-উৎস: https: // www।

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

আপেল সাফারি

আইওএস এবং ম্যাকোএস চলছে

আইওএস
যদিও iOS এর জন্য Safari ডিফল্টভাবে পৃষ্ঠার উত্স দেখার ক্ষমতা অন্তর্ভুক্ত করে না, ব্রাউজারটি দৃশ্যত সোর্স এপ্লিকেশনের সাথে নিখুঁতভাবে সংহত হয় - App Store এর জন্য উপলব্ধ $ 0.99।

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

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

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

  1. স্ক্রিনের শীর্ষে অবস্থিত ব্রাউজার মেনুতে Safari এ ক্লিক করুন।
  2. যখন ড্রপ-ডাউন মেনু প্রদর্শিত হবে, তখন পছন্দগুলি বিকল্পটি নির্বাচন করুন।
  3. সাফারিের পছন্দগুলি এখন দৃশ্যমান হওয়া উচিত। শীর্ষ সারি এর ডান পাশে অবস্থিত উন্নত আইকন, ক্লিক করুন
  4. উন্নত বিভাগের নিচের দিকটি মেনু বারের প্রদর্শন করুন মেনুতে একটি বিকল্প লেবেলের একটি খালি চেকবক্সের পাশাপাশি রয়েছে। এই বাক্সে একবারে একটি চেক চিহ্ন স্থাপন করতে ক্লিক করুন, এবং উপরের বামদিকের কোণায় লাল 'x' এ ক্লিক করে পছন্দের উইন্ডো বন্ধ করুন।
  5. স্ক্রিনের শীর্ষে অবস্থিত বিকাশ মেনুতে ক্লিক করুন।
  6. যখন ড্রপ ডাউন মেনু প্রদর্শিত হবে, পৃষ্ঠা উৎস নির্বাচন করুন নির্বাচন করুন । আপনি এর পরিবর্তে নিম্নলিখিত কীবোর্ড শর্টকাটটিও ব্যবহার করতে পারেন: COMMAND + OPTION + U

অপেরা

চলমান: লিনাক্স, ম্যাকোস, উইন্ডোজ

অপেরা ব্রাউজারের সক্রিয় ওয়েব পেজ থেকে উত্স কোড দেখতে নিম্নলিখিত কীবোর্ড শর্টকাট ব্যবহার করুন: CTRL + U (MacOS এ COMMAND + OPTION + U )। পরিবর্তে আপনি বর্তমান ট্যাবে উত্স লোড করতে চাইলে, ঠিকানা বারের মধ্যে পৃষ্ঠার URL এর বামে নীচের পাঠ্যটি টাইপ করুন এবং এন্টার টিপুন : দেখুন-উৎস: (যেমন, দেখুন-উৎস: https: // www। )।

অপেরা অপারেটিং ডেস্কটপ সংস্করণটি আপনাকে এইচটিএমএল সোর্স, সিএসএস এবং অন্যান্য উপাদানগুলিকে সমন্বিত ইন্টিগ্রেটেড ডেভেলপার টুল ব্যবহার করে দেখতে দেয়। এই ইন্টারফেসটি চালু করতে, যা ডিফল্টভাবে আপনার প্রধান ব্রাউজার উইন্ডোর ডান দিকে প্রদর্শিত হবে, নিম্নোক্ত কীবোর্ড শর্টকাট টিপুন : CTRL + SHIFT + I ( COMMAND + OPTION + MacOS এ I )।

অপেরার বিকাশকারী টুলসগুলি নিম্নলিখিত ধাপগুলি গ্রহণ করে অ্যাক্সেসযোগ্য।

  1. আপনার ব্রাউজার উইন্ডোর উপরের বামদিকের কোণায় অবস্থিত অপেরা লোগোতে ক্লিক করুন।
  2. যখন ড্রপ-ডাউন মেনু প্রদর্শিত হবে, আপনার সরঞ্জামগুলি আরও টুলের উপরে মাউস কার্সার রাখো।
  3. বিকাশকারী মেনু দেখান ক্লিক করুন।
  4. অপেরা লোগোতে আবার ক্লিক করুন
  5. যখন ড্রপ-ডাউন মেনু প্রদর্শিত হয়, বিকাশকারীর উপরে আপনার কার্সার হভার করুন।
  6. যখন সাব-মেনু উপস্থিত হয়, তখন বিকাশকারী সরঞ্জামগুলিতে ক্লিক করুন।

ভিভালডি

Vivaldi ব্রাউজারের মধ্যে পৃষ্ঠা উত্স দেখতে একাধিক উপায় আছে। সহজে CTRL + ইউ কিবোর্ড শর্টকাট এর মাধ্যমে, যা একটি নতুন ট্যাবে সক্রিয় পৃষ্ঠা থেকে কোড উপস্থাপন করে।

আপনি পৃষ্ঠার URL এর সামনে নিম্নলিখিত পাঠ্যটি যোগ করতে পারেন, যা বর্তমান ট্যাবে উৎস কোড প্রদর্শন করে: দেখুন-উৎস:। এর একটি উদাহরণ দেখতে হবে- উৎস: http: // www।

আরেকটি পদ্ধতি হচ্ছে ব্রাউজারের সমন্বিত বিকাশকারী সরঞ্জামগুলির মাধ্যমে, CTRL + SHIFT + I সংমিশ্রণ বা ব্রাউজারের সরঞ্জাম মেনুতে বিকাশকারী সরঞ্জামগুলির বিকল্পের মাধ্যমে অ্যাক্সেসযোগ্য - উপরের বামদিকের কোণায় 'ভি' লোগোতে ক্লিক করে পাওয়া যায়। ডেভেলপমেন্ট সরঞ্জাম ব্যবহার করে পৃষ্ঠার উৎসের আরও বিশ্লেষণ বিশ্লেষণের জন্য অনুমতি দেয়।