Mobile App Development AMP পেজ Debugging এবং Error Handling গাইড ও নোট

AMP পেজ Debugging এবং Error Handling হল AMP প্রকল্পের একটি গুরুত্বপূর্ণ অংশ, যেখানে AMP পেজের ত্রুটি সনাক্তকরণ এবং সমাধান করার জন্য কিছু নির্দিষ্ট কৌশল এবং সরঞ্জাম রয়েছে। AMP পেজের রেন্ডারিং এবং কার্যকারিতা সঠিকভাবে কাজ করার জন্য এগুলোর সঠিক ব্যবহার প্রয়োজন।

AMP পেজ Debugging

AMP পেজ ডিবাগিং হল এমন একটি প্রক্রিয়া যা AMP পেজের ত্রুটি সনাক্তকরণ এবং তা ঠিক করার জন্য ব্যবহৃত হয়। AMP পেজে সাধারণত কিছু নির্দিষ্ট ত্রুটি বা সীমাবদ্ধতা থাকতে পারে, যা সঠিকভাবে কাজ না করলে পেজটি সঠিকভাবে রেন্ডার হবে না।

AMP পেজ ডিবাগিং করার জন্য গুরুত্বপূর্ণ টুলস ও পদ্ধতি:

1. AMP Validator:
   • AMP পেজের সমস্ত কন্টেন্ট সঠিকভাবে AMP স্ট্যান্ডার্ড মেনে তৈরি হয়েছে কিনা তা চেক করতে AMP Validator ব্যবহার করা হয়। এটি পেজের HTML এবং AMP কম্পোনেন্টগুলির সঠিকতা যাচাই করতে সাহায্য করে।
   • AMP Validator ব্যবহার করতে:
     • পেজের URL লিখে ব্রাউজারে https://validator.ampproject.org/ এ গিয়ে পেস্ট করুন। এটি স্বয়ংক্রিয়ভাবে আপনার AMP পেজের সমস্ত ত্রুটি চিহ্নিত করে এবং সংশোধন করার জন্য পরামর্শ দেয়।

     • অথবা, পেজের HTML কোডে AMP সঠিকতা চেক করতে amphtml মেটা ট্যাগ ব্যবহার করতে পারেন। উদাহরণ:

       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <script async src="https://cdn.ampproject.org/v0.js"></script>

2. Console Log and Browser Developer Tools:
   • ব্রাউজারের ডেভেলপার টুলস (যেমন Chrome DevTools) ব্যবহার করে AMP পেজের ডিবাগিং করা যেতে পারে। এটি আপনাকে AMP পেজের সমস্ত কনসোল লগ দেখতে এবং ত্রুটি সনাক্ত করতে সাহায্য করবে।
   • ব্রাউজারে F12 চাপলে ডেভেলপার টুলস খুলবে, যেখানে আপনি Console ট্যাব থেকে JavaScript বা AMP পেজের অন্য ত্রুটিগুলি দেখতে পারেন।
3. AMP Test Page:
   • AMP এর নিজস্ব টেস্ট পেজ আছে যেখানে আপনি আপনার পেজের URL পেস্ট করে এর AMP কমপ্লায়েন্স চেক করতে পারেন। AMP টেস্ট পেজ ব্যবহার করে আপনি সহজেই আপনার পেজের স্ট্যাটাস এবং ত্রুটি দেখতে পারবেন।
     • AMP Test URL: https://www.ampproject.org/test
4. AMP Debug Mode:

   • AMP পেজে ডিবাগিং মোড চালু করলে AMP কম্পোনেন্টের সমস্ত ত্রুটি দেখতে পাবেন। AMP HTML ডকুমেন্টের হেড অংশে নিম্নলিখিত মেটা ট্যাগটি যোগ করে ডিবাগিং মোড চালু করা যায়:

     <meta name="amp-analytics" content="debug">

5. Error Logs in Console:
   • AMP পেজে কোনো ত্রুটি ঘটলে এটি ব্রাউজার কনসোলে লগ হিসেবে দেখায়। যেমন, যদি কোন AMP কম্পোনেন্ট ভুলভাবে ব্যবহার করা হয়, তাহলে কনসোলটি ত্রুটি বার্তা প্রদর্শন করবে।

AMP Error Handling

AMP পেজে ত্রুটি সনাক্তকরণ এবং তা সমাধান করা গুরুত্বপূর্ণ, কারণ ভুল বা অনুপস্থিত AMP কম্পোনেন্টের কারণে পেজ সঠিকভাবে লোড নাও হতে পারে। AMP পেজে ত্রুটি ব্যবস্থাপনা করা হলে পেজ দ্রুত রেন্ডার হবে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত হবে।

AMP ত্রুটি সমাধানের কিছু কৌশল:

1. পেজ লোডিং সমস্যা (Lazy Loading Issues):
   • যদি ইমেজ বা অন্যান্য রিসোর্স সঠিকভাবে লোড না হয়, তবে amp-img কম্পোনেন্টে "loading" অ্যাট্রিবিউটটি সঠিকভাবে ব্যবহার করা হচ্ছে কিনা তা নিশ্চিত করুন।

   • উদাহরণ:

     <amp-img src="image.jpg" width="600" height="400" layout="responsive" alt="Image" loading="lazy"></amp-img>

2. Unsupported or Missing Components:

   • AMP পেজে যদি কোনো কম্পোনেন্ট অনুপস্থিত থাকে অথবা সঠিকভাবে লোড না হয়, তবে কনসোলটি ত্রুটি বার্তা দেখাবে। নিশ্চিত করুন যে আপনি সঠিক AMP স্ক্রিপ্ট লিংক ব্যবহার করছেন। উদাহরণস্বরূপ:

     <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

3. AMP JavaScript Errors:
   • AMP কম্পোনেন্টের মধ্যে যদি JavaScript ত্রুটি থাকে, তবে ব্রাউজারের কনসোল থেকে ত্রুটি বার্তা পাওয়া যাবে। এই ধরনের ত্রুটিগুলি সাধারনত পেজের AMP কম্পোনেন্ট সঠিকভাবে কাজ না করার কারণ হয়। AMP সাইটের স্ক্রিপ্ট সঠিকভাবে লোড হচ্ছে কিনা, এটি নিশ্চিত করতে হবে।
4. Unallowed Custom JavaScript:
   • AMP তে কাস্টম JavaScript ব্যবহারের অনুমতি নেই। তাই যদি আপনি আপনার পেজে সাধারণ JavaScript বা কোনো JavaScript লাইব্রেরি ব্যবহার করতে চান, তবে AMP সেগুলো অনুমোদন করবে না। কাস্টম স্ক্রিপ্টের পরিবর্তে AMP এর সিস্টেমের মাধ্যমে সমাধান করতে হবে।
5. AMP Errors in Content:
   • কন্টেন্টে ভুল বা অনুমোদিত নয় এমন HTML ট্যাগ ব্যবহার করা হলে, AMP Validator ত্রুটি দেখাবে। যেমন <div> ট্যাগের পরিবর্তে AMP ট্যাগ ব্যবহার করতে হবে।
6. AMP Compatibility Issues:
   • কিছু ওয়েব ব্রাউজার AMP এর কিছু কম্পোনেন্ট বা ফিচার সঠিকভাবে সাপোর্ট নাও করতে পারে। এটি নিশ্চিত করতে হবে যে আপনার AMP পেজটি সেই ব্রাউজারে সঠিকভাবে কাজ করছে কিনা।

AMP ত্রুটি সমাধান উদাহরণ:

1. Invalid or Missing amp-img Component

ত্রুটি: যদি amp-img কম্পোনেন্ট সঠিকভাবে কাজ না করে:

<amp-img src="image.jpg" width="600" height="400" layout="responsive" alt="Image"></amp-img>

সমাধান: সঠিক AMP স্ক্রিপ্ট লিংক নিশ্চিত করুন:

<script async custom-element="amp-img" src="https://cdn.ampproject.org/v0/amp-img-0.1.js"></script>

2. Unsupported JavaScript

ত্রুটি: যদি কাস্টম JavaScript বা স্ক্রিপ্ট নিষিদ্ধ থাকে:
সমাধান: AMP এর জন্য কাস্টম স্ক্রিপ্ট ব্যবহার না করে AMP এর নিজস্ব স্ক্রিপ্ট ব্যবহার করুন।

AMP ত্রুটি সমাধান সংক্ষেপে:

• AMP Validator ব্যবহার করে পেজের AMP স্ট্যাটাস চেক করুন।
• ব্রাউজারের ডেভেলপার টুলস থেকে কনসোল লগ চেক করুন।
• ভুল বা অসম্পূর্ণ AMP কম্পোনেন্ট চিহ্নিত করুন এবং সঠিক স্ক্রিপ্ট লিংক ব্যবহার করুন।
• কাস্টম JavaScript এবং স্ক্রিপ্ট গুলি AMP কম্প্যাটিবল করে পরিবর্তন করুন।
• AMP কম্পোনেন্টের ফিচার এবং সঠিক ব্যবহার নিয়ম অনুসরণ করুন।

AMP পেজের ডিবাগিং এবং ত্রুটি সমাধান করা AMP পেজের কার্যক্ষমতা নিশ্চিত করে এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

AMP Validator একটি টুল যা AMP পেজের সঠিকতা যাচাই করতে ব্যবহৃত হয়। AMP Validator পেজের মধ্যে সঠিকভাবে AMP কম্পোনেন্ট এবং এলিমেন্ট ব্যবহার করা হয়েছে কিনা তা চেক করে এবং কোনো syntax errors বা validation errors থাকলে তা রিপোর্ট করে। এই রিপোর্টের মাধ্যমে আপনি আপনার AMP পেজের কোড ঠিক করতে পারবেন।

AMP Validator ব্যবহার করে Syntax Errors ঠিক করার পদক্ষেপ:

১. AMP Validator ব্যবহার করুন

প্রথমে AMP পেজের URL যাচাই করতে AMP Validator ওয়েবসাইটে যান:

• AMP Validator ওয়েবসাইট: https://validator.ampproject.org/

আপনার AMP পেজের URL ইনপুট বক্সে প্রবেশ করান এবং Validate বা Check বাটনে ক্লিক করুন। AMP Validator আপনার পেজ স্ক্যান করবে এবং যদি কোনো ভুল থাকে, তাহলে একটি রিপোর্ট প্রদান করবে।

২. Report দেখুন

যদি আপনার পেজে কোনো syntax error বা validation error থাকে, AMP Validator তা বিস্তারিতভাবে দেখাবে। এই রিপোর্টে error এবং warning-এর বিস্তারিত থাকবে, যার মধ্যে থাকবে:

• Error Type: কোথায় সমস্যা হচ্ছে, যেমন: "Missing amp-img tag" বা "Invalid <script> tag".
• Line Number: ত্রুটি কোথায় ঘটছে, তার সঠিক স্থান।

৩. Error বা Warning বুঝুন

AMP Validator এর রিপোর্টে যদি কোনো error বা warning থাকে, তা নিচে দেওয়া হবে। যেমন:

• Error Example:
  • Missing amp-img tag: আপনার ইমেজ ট্যাগ AMP কনফিগারেশন অনুযায়ী সঠিকভাবে দেওয়া হয়নি।
  • Invalid <script> tag: AMP পেজে JavaScript সাধারণত সীমিত থাকে, তবে আপনি যদি সাধারণ <script> ট্যাগ ব্যবহার করেন, তবে এটি একটি error হিসেবে রিপোর্ট হবে।
• Warning Example:
  • layout attribute missing: AMP পেজের মধ্যে ইমেজ, ভিডিও বা অন্যান্য কম্পোনেন্টের জন্য layout অ্যাট্রিবিউট দেয়া উচিত।

৪. Syntax Errors ঠিক করার পদক্ষেপ

একবার যদি আপনি AMP Validator থেকে ত্রুটির রিপোর্ট পান, তবে আপনার কোডে সেগুলোর সমাধান করতে হবে। নিচে কিছু সাধারণ সমস্যা এবং তাদের সমাধান দেওয়া হলো:

• Error: Missing amp-img tag:
  • সমাধান: AMP-এ <img> ট্যাগের পরিবর্তে amp-img ট্যাগ ব্যবহার করতে হবে।

  • সঠিক কোড:

    <amp-img src="image.jpg" width="600" height="400" layout="responsive" alt="description"></amp-img>

• Error: Invalid <script> tag usage:
  • সমাধান: AMP পেজে সাধারণ JavaScript ব্যবহার করা যায় না, তবে AMP-এ নির্দিষ্ট স্ক্রিপ্টগুলির জন্য amp-script ট্যাগ ব্যবহৃত হয়।

  • সঠিক কোড:

    <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>

• Error: Invalid layout:
  • সমাধান: AMP কম্পোনেন্টের মধ্যে layout অ্যাট্রিবিউট সঠিকভাবে উল্লেখ করতে হবে।

  • সঠিক কোড:

    <amp-img src="image.jpg" width="600" height="400" layout="responsive" alt="description"></amp-img>

• Error: Missing amp-carousel or amp-lightbox:
  • সমাধান: যদি আপনি carousel বা lightbox ব্যবহার করেন, তাহলে আপনাকে সঠিক AMP কম্পোনেন্ট (যেমন amp-carousel বা amp-lightbox) সঠিকভাবে ব্যবহার করতে হবে।

  • সঠিক কোড:

    <amp-carousel width="300" height="200" layout="responsive" type="slides">
      <div><img src="image1.jpg" alt="Image 1"></div>
      <div><img src="image2.jpg" alt="Image 2"></div>
    </amp-carousel>

৫. পুনরায় AMP Validator ব্যবহার করুন

কোড ঠিক করার পর, আবার AMP Validator ব্যবহার করে পেজটি যাচাই করুন। যদি সব ঠিক থাকে, তবে আপনি "Valid AMP Page" বার্তা পাবেন, যা নির্দেশ করে যে পেজটি AMP স্ট্যান্ডার্ড মেনে চলছে।

৬. উদাহরণ: সম্পূর্ণ AMP পেজ ঠিক করা

মূল কোড (ভুল):

<!doctype html>
<html>
  <head>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>AMP Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <img src="image.jpg" width="600" height="400">
  </body>
</html>

ভুল শনাক্তকরণ: AMP পেজে <img> ট্যাগের বদলে amp-img ট্যাগ ব্যবহার করা প্রয়োজন এবং layout অ্যাট্রিবিউটও প্রয়োজন।

সংশোধিত কোড (সঠিক):

<!doctype html>
<html>
  <head>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>AMP Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <amp-img src="image.jpg" width="600" height="400" layout="responsive" alt="description"></amp-img>
  </body>
</html>

এখন, এই কোডটি AMP Validator দ্বারা যাচাই করার পর "Valid AMP Page" বার্তা পেতে হবে।

AMP Validator থেকে প্রাপ্ত ত্রুটির ধরন

• Critical Errors: যেমন Missing amp-img, Invalid <script> ইত্যাদি।
• Warnings: কিছু ছোটখাটো সমস্যাগুলি যেমন layout অ্যাট্রিবিউট অভাব ইত্যাদি।
• Informational: যখন পেজে উন্নত বৈশিষ্ট্য বা অপ্টিমাইজেশন প্রস্তাব দেওয়া হয়।

Conclusion

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

Chrome DevTools ব্যবহার করে AMP (Accelerated Mobile Pages) পেজের debugging করা একটি কার্যকরী পদ্ধতি, যা আপনাকে AMP পেজের লোডিং সমস্যা, কনসোলের ত্রুটি, এবং অন্যান্য ইনস্পেকশন বিষয়গুলির দ্রুত চিহ্নিত করতে সহায়তা করে। AMP পেজের নির্দিষ্ট বৈশিষ্ট্য যেমন AMP HTML, AMP JavaScript, এবং AMP উপাদানগুলির আচরণ সঠিকভাবে বুঝতে এবং সমাধান করতে Chrome DevTools খুবই কার্যকরী।

Chrome DevTools দিয়ে AMP পেজ Debugging

এখানে কিছু প্রধান ধাপ আলোচনা করা হল যা Chrome DevTools ব্যবহার করে AMP পেজ debugging করতে সহায়তা করবে:

1. AMP পেজ লোডিং ইস্যু চেক করা

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

ধাপ:

1. DevTools খোলা:
   • আপনার Chrome ব্রাউজারে AMP পেজটি ওপেন করুন।
   • Chrome DevTools খুলতে, F12 বা Ctrl + Shift + I (Windows) অথবা Cmd + Option + I (Mac) চাপুন।
2. Network Tab ব্যবহার করা:
   • Network ট্যাবটি সিলেক্ট করুন। এটি AMP পেজের সমস্ত নেটওয়ার্ক রিকোয়েস্ট, যেমন AMP JS, AMP Cache, এবং অন্যান্য রিসোর্সগুলি দেখাবে।
   • পেজ রিফ্রেশ করুন (F5), এবং সমস্ত নেটওয়ার্ক রিকোয়েস্ট চেক করুন। যদি কোনো রিকোয়েস্ট আটকে থাকে বা সঠিকভাবে লোড না হয়, তাহলে সেগুলি চিহ্নিত করতে পারেন।
3. AMP Cache চেক করা:
   • AMP পেজ যদি গুগল AMP Cache থেকে লোড হয়, তাহলে এটি "cdn.ampproject.org" ডোমেইনে দেখতে পাবেন। ডোমেইনের রিকোয়েস্ট সঠিকভাবে চলছে কিনা, তা চেক করুন।

2. Console Tab দিয়ে AMP Errors চেক করা

AMP পেজের JavaScript এবং HTML এর কোনো সমস্যা থাকলে তা Console ট্যাবেই প্রদর্শিত হবে। AMP পেজের কম্পোনেন্টের ত্রুটি, কনসোলের লোগস, এবং অন্যান্য ইনফর্মেশন এখানে দেখা যায়। এটি AMP পেজের সমস্যা চিহ্নিত করতে সাহায্য করে।

ধাপ:

1. Console ট্যাব খুলুন:
   • Chrome DevTools এ Console ট্যাবটি সিলেক্ট করুন।
   • AMP পেজের লোড হওয়া ত্রুটিগুলি এখানে দেখতে পারবেন। AMP সনাক্তকৃত ত্রুটিগুলির সাথে সম্পর্কিত ত্রুটি বার্তা এবং ওয়ার্নিং দেখাবে।
2. AMP Errors চেক করা:
   • যদি AMP পেজে কোনো কম্পোনেন্টের সমস্যা থাকে, যেমন <amp-img> বা <amp-carousel>, তাহলে কনসোলে এর সম্পর্কিত ত্রুটি দেখা যাবে। AMP পেজের সঠিক রেন্ডারিং এবং আচরণ নিশ্চিত করতে আপনাকে এই ত্রুটিগুলির সমাধান করতে হবে।
3. Console ত্রুটির উদাহরণ:

   • উদাহরণস্বরূপ, আপনি যদি একটি <amp-img> ট্যাগে একটি ভুল src পাথ দেন, তখন Console এ এই ধরনের ত্রুটি বার্তা দেখতে পারবেন:

     AMP Validator: Failed to find AMP image resource (invalid src).

3. AMP HTML Validator ব্যবহার করা

Chrome DevTools এর AMP Validator পেজের HTML এবং AMP কম্পোনেন্টের বৈধতা চেক করতে সহায়তা করে। এটি AMP পেজে কোনো ভুল HTML বা AMP এর নির্দিষ্ট কনফিগারেশন ভুল রয়েছে কিনা তা দ্রুত খুঁজে বের করতে সাহায্য করে।

ধাপ:

1. AMP Validator চালানো:
   • Chrome DevTools এ Console ট্যাব ব্যবহার করতে পারেন, যেখানে AMP পেজের জন্য AMP Validator রিপোর্ট দেখা যাবে।
   • আপনি একটি AMP পেজ URL অ্যাড করে AMP Validator চালাতে পারেন এবং AMP পেজের বৈধতা পরীক্ষা করতে পারেন।
2. AMP Validation Errors দেখুন:
   • AMP পেজের ত্রুটি গুলি চিহ্নিত করার জন্য AMP Validator চালিয়ে দেখতে পারেন। যদি পেজটি AMP Invalid হয়, তাহলে এটি কনসোলের মধ্যে প্রদর্শিত হবে এবং AMP Validator ত্রুটি বার্তা দিবে।

4. AMP JS এবং CSS সমস্যাগুলি ডিবাগ করা

AMP পেজের ক্ষেত্রে যদি কোনো AMP JavaScript বা CSS সমস্যা থাকে, তাহলে Sources এবং Styles ট্যাব ব্যবহার করে এগুলি ডিবাগ করা সম্ভব।

ধাপ:

1. Sources Tab:
   • Sources ট্যাবটি ব্যবহার করে AMP JS ফাইলগুলির মধ্যে প্রবেশ করুন এবং এটি সঠিকভাবে লোড হচ্ছে কিনা তা পরীক্ষা করুন। আপনি AMP JavaScript এর কোড পর্যবেক্ষণ করতে পারেন এবং কোড লাইনে সমস্যা চিহ্নিত করতে পারেন।
2. Styles Tab:
   • Styles ট্যাবটি ব্যবহার করে AMP পেজে ব্যবহৃত স্টাইল এবং CSS প্রোপার্টি চেক করুন। নিশ্চিত করুন যে CSS ফাইলগুলি AMP এর স্টাইল কনভেনশন অনুসরণ করছে এবং স্টাইলস লোড হচ্ছে।

5. AMP HTML সঠিকতা চেক করা

AMP পেজের HTML কনফিগারেশন সঠিক কিনা তা নিশ্চিত করার জন্য AMP HTML সঠিকতা চেক করা দরকার। আপনি AMP HTML Validator বা Chrome DevTools এর Elements Tab ব্যবহার করে HTML এ কোনো ভুল চিহ্নিত করতে পারেন।

ধাপ:

1. Elements Tab:
   • Elements ট্যাবের মাধ্যমে AMP পেজের DOM (Document Object Model) চেক করুন। আপনি সঠিক AMP কম্পোনেন্টের উপস্থিতি দেখতে পাবেন, যেমন <amp-img>, <amp-carousel>, <amp-form> ইত্যাদি।
2. AMP Validator:
   • আপনি Chrome DevTools এর AMP Validator ব্যবহার করে HTML সঠিকতা চেক করতে পারেন। এটি আপনাকে HTML পেজের ত্রুটি এবং অন্যান্য AMP সম্পর্কিত সমস্যা চিহ্নিত করতে সাহায্য করবে।

উপসংহার

Chrome DevTools ব্যবহার করে AMP পেজের debugging একটি শক্তিশালী এবং কার্যকরী পদ্ধতি, যা আপনাকে AMP কম্পোনেন্টের সমস্যা, কনসোল ত্রুটি, HTML এবং JavaScript এর সমস্যা দ্রুত চিহ্নিত করতে সহায়তা করে। Network, Console, Sources, এবং AMP Validator টুলস ব্যবহার করে আপনি AMP পেজের লোডিং, ত্রুটি, এবং পারফরম্যান্স ইস্যুগুলি চিহ্নিত করতে পারেন এবং তা সমাধান করতে পারেন।

AMP (Accelerated Mobile Pages) ইমেইল বা ওয়েব পেজে যদি কোনও errors বা warnings পাওয়া যায়, তবে সেগুলি সমাধান করা খুবই গুরুত্বপূর্ণ যাতে পেজটি সঠিকভাবে লোড এবং কাজ করে। গুগল AMP এর জন্য নির্দিষ্ট কিছু কৌশল এবং টুলস সরবরাহ করে, যেগুলি AMP পেজ বা ইমেইলে সমস্যাগুলি চিহ্নিত করতে এবং সেগুলি সমাধান করতে সহায়তা করে। নিচে AMP ইরর ও ওয়ার্নিং সমাধানের কিছু সাধারণ পদ্ধতি আলোচনা করা হলো।

AMP Errors সমাধানের উপায়

1. AMP HTML Validation Errors:
   • সমস্যা: AMP HTML কোডে কিছু সঠিক ট্যাগ বা সিনট্যাক্স ভুল থাকতে পারে, যা AMP স্পেসিফিকেশন অনুযায়ী সঠিক নয়।

   • সমাধান:

     • AMP HTML ফাইলটি গুগলের AMP Validator টুল ব্যবহার করে পরীক্ষা করুন। এটি HTML কোডে কোন সমস্যা আছে তা চিহ্নিত করবে এবং সঠিক সংশোধন প্রস্তাব করবে।
     • গুগল AMP স্পেসিফিকেশন অনুযায়ী শুধুমাত্র অনুমোদিত HTML ট্যাগ, অ্যাট্রিবিউট এবং ফিচার ব্যবহার করুন।
     • উদাহরণস্বরূপ, amp-img এর মতো AMP নির্দিষ্ট ট্যাগ ব্যবহার করতে হবে, এবং এই ট্যাগগুলির জন্য নির্দিষ্ট প্রপার্টি (যেমন width, height, src) প্রদান করতে হবে।

     AMP Validator টুল: AMP Validator

2. Invalid AMP Components:
   • সমস্যা: যদি AMP পেজে কোনো ভুল বা অজানা AMP কম্পোনেন্ট (যেমন <amp-video>, <amp-form>) ব্যবহার করা হয়, তবে এটি AMP পেজের জন্য একটি error তৈরি করবে।
   • সমাধান:
     • AMP ডকুমেন্টেশন অনুযায়ী, আপনি যেসব AMP কম্পোনেন্ট ব্যবহার করছেন, তা সঠিকভাবে অন্তর্ভুক্ত এবং ব্যবহার করছেন কিনা নিশ্চিত করুন।
     • AMP কম্পোনেন্টের জন্য সঠিক অ্যাট্রিবিউট, যেমন layout, width, height সহ অন্যান্য উপযুক্ত কনফিগারেশন ব্যবহার করুন।
3. Missing AMP JavaScript Library:
   • সমস্যা: যদি AMP JS লাইব্রেরি পেজে অন্তর্ভুক্ত না থাকে, তাহলে AMP পেজ সঠিকভাবে কাজ করবে না।
   • সমাধান:

     • AMP পেজে AMP JS লাইব্রেরি সঠিকভাবে অন্তর্ভুক্ত করুন। এটি সাধারণত পেজের <head> ট্যাগের মধ্যে থাকে:

       <script async src="https://cdn.ampproject.org/v0.js"></script>

4. AMP HTML Tag Structure Issues:
   • সমস্যা: AMP পেজে কিছু HTML ট্যাগের সঠিক গঠন নাও থাকতে পারে, যেমন ভুলভাবে ইনক্লুড করা <script> বা <style> ট্যাগ।
   • সমাধান:
     • AMP ডকুমেন্টে শুধুমাত্র সঠিক এবং অনুমোদিত ট্যাগগুলিই ব্যবহার করুন। উদাহরণস্বরূপ, amp-script বা amp-style ট্যাগ সঠিকভাবে ব্যবহৃত হতে হবে।
     • শুধু amp-custom স্টাইলশিট ব্যবহার করতে হবে এবং ৫০ কিলোবাইটের কম হতে হবে।
5. AMP Cache Issues:
   • সমস্যা: AMP পেজের ক্যাশে সমস্যা হতে পারে, যা পেজের সঠিক প্রদর্শন বা লোডিং সময় প্রভাবিত করে।
   • সমাধান:
     • গুগলের AMP Cache পরিষ্কার করুন। আপনি যদি সার্ভার সাইডে AMP ক্যাশিং সেটআপ ব্যবহার করেন, তাহলে সেটি সঠিকভাবে কনফিগার করা হয়েছে কিনা যাচাই করুন।

AMP Warnings সমাধানের উপায়

1. Use of Deprecated Tags:
   • সমস্যা: AMP পেজে পুরনো বা অব্যবহৃত ট্যাগ ব্যবহার করা হলে, AMP এটি সতর্কতার মাধ্যমে জানায়।
   • সমাধান:
     • গুগলের AMP ডকুমেন্টেশন এবং পৃষ্ঠা বিশ্লেষণ করে নিশ্চিত করুন যে আপনি সর্বশেষ AMP স্পেসিফিকেশন অনুসরণ করছেন। অব্যবহৃত বা deprecated ট্যাগগুলি বাদ দিন এবং নতুন ট্যাগ ব্যবহার করুন।
2. Missing Required Attributes:
   • সমস্যা: কিছু AMP কম্পোনেন্টের জন্য প্রয়োজনীয় অ্যাট্রিবিউট অনুপস্থিত থাকলে AMP সতর্কতা প্রদান করে।
   • সমাধান:
     • প্রতিটি AMP কম্পোনেন্টের জন্য গুগল AMP স্পেসিফিকেশন অনুসারে সব আবশ্যক অ্যাট্রিবিউট প্রদান করুন। যেমন, amp-img কম্পোনেন্টে width, height, এবং src ফিল্ড থাকা আবশ্যক।
3. Image Aspect Ratio Warning:
   • সমস্যা: যখন ইমেজের সঠিক width এবং height বা aspect ratio প্রদান না করা হয়, তখন AMP একটি ওয়ার্নিং তৈরি করতে পারে।
   • সমাধান:
     • প্রতিটি ইমেজের জন্য সঠিক width এবং height অ্যাট্রিবিউট ব্যবহার করুন এবং সেগুলোর আসল অনুপাত অনুসরণ করুন।
4. Inline CSS Style Warning:
   • সমস্যা: AMP স্পেসিফিকেশন অনুসারে, কিছু ক্ষেত্রে inline CSS স্টাইল নিষিদ্ধ হতে পারে।
   • সমাধান:
     • amp-custom এর মাধ্যমে সিএসএস ফাইল ব্যবহার করুন এবং এটি ৫০ কিলোবাইটের বেশি হওয়া উচিত নয়। প্রয়োজনে, কাস্টম CSS স্টাইল অ্যাপ্লাই করতে হলে সেগুলিকে পৃথক ফাইলে রাখতে হবে।
5. Non-AMP Scripts:
   • সমস্যা: AMP পেজে যদি কোন সেকেন্ডারি স্ক্রিপ্ট ব্যবহার করা হয় যা AMP স্পেসিফিকেশন অনুযায়ী অনুমোদিত নয়, তবে AMP একটি ওয়্যার্নিং দেখাবে।
   • সমাধান:
     • AMP পেজে শুধুমাত্র গুগল থেকে অনুমোদিত AMP JS এবং স্টাইলশিট ব্যবহার করুন। অন্য স্ক্রিপ্ট বা সি-ডি-এন থেকে লোড করা স্ক্রিপ্টগুলি ব্যবহার না করার চেষ্টা করুন।

AMP Error এবং Warning সমাধানে ব্যবহৃত টুলস

1. AMP Validator:
   • AMP Validator টুলটি ব্যবহার করে আপনি AMP পেজ বা ইমেইল কোডের সমস্ত ইরর ও ওয়ার্নিং চেক করতে পারেন। এটি আপনাকে কোন কোন অংশে ভুল বা সমস্যা রয়েছে তা জানায়।
   • লিঙ্ক: AMP Validator
2. AMP Dev Tools:
   • AMP Dev Tools ব্রাউজার প্লাগিন হিসেবে অ্যাভেইলেবল, যা AMP পেজের কনসোল এড়িয়ে সঠিক বিশ্লেষণ প্রদান করে।
3. AMP Cache Checker:
   • গুগলের AMP Cache পরীক্ষা করার জন্য আপনি AMP Cache টুল ব্যবহার করতে পারেন। এটি পেজের ক্যাশিং সমস্যা সমাধান করতে সহায়তা করবে।

উপসংহার

AMP পেজ বা ইমেইল তৈরি এবং অপ্টিমাইজেশন একটি সঠিক প্রক্রিয়া অনুসরণ করা উচিত যাতে কোডের যে কোনও ধরনের ত্রুটি বা সমস্যা সমাধান করা যায়। AMP Validator, AMP Dev Tools এবং অন্যান্য টুলস ব্যবহার করে AMP পেজে ইরর ও ওয়ার্নিং নিরীক্ষণ ও সমাধান করা সম্ভব। AMP ডকুমেন্টেশন এবং গুগলের টুলস অনুসরণ করলে AMP পেজের পারফরম্যান্স এবং সঠিক প্রদর্শন নিশ্চিত করা সম্ভব।

AMP Development Mode এবং Real-time Debugging হলো AMP পেজ ডেভেলপমেন্টে সহায়ক দুটি গুরুত্বপূর্ণ টুল। এগুলি ব্যবহার করে ডেভেলপাররা AMP পেজ ডেভেলপমেন্ট প্রক্রিয়াকে সহজ এবং দ্রুত করতে পারেন। AMP এর এই দুইটি ফিচার পেজে কোন ধরনের সমস্যা বা ত্রুটি দ্রুত চিহ্নিত করতে সহায়তা করে এবং ডেভেলপমেন্ট প্রক্রিয়া অপটিমাইজ করে।

AMP Development Mode কী?

AMP Development Mode একটি ডেভেলপমেন্ট টুল যা গুগল AMP প্রজেক্টের অংশ। এটি ডেভেলপারদের জন্য একটি কার্যকরী পদ্ধতি, যা সরাসরি AMP পেজের কোডে ত্রুটি এবং সমস্যাগুলো চিহ্নিত করতে সহায়তা করে।

AMP Development Mode এর সুবিধাসমূহ:

1. লাইভ রিয়্যাকশন:
   • যখন AMP পেজ তৈরি করছেন, তখন AMP Development Mode আপনাকে সরাসরি কোডে ত্রুটি এবং বার্তা প্রদর্শন করে, যা পেজের ত্রুটি দ্রুত চিহ্নিত করতে সহায়তা করে।
2. ডিবাগিং ফিচার:
   • এই মোডে AMP পেজের ভুল কনফিগারেশন, ভুল HTML ট্যাগ, অথবা JavaScript এর সমস্যা ইত্যাদি ত্রুটি দ্রুত শনাক্ত করা যায়।
3. পারফরম্যান্স মনিটরিং:
   • AMP Development Mode পেজের পারফরম্যান্স এবং লোডিং টাইম মনিটর করার সুযোগ দেয়, যাতে আপনি দ্রুত জানতে পারেন পেজটি কতটা অপ্টিমাইজড এবং কোথায় উন্নতির সুযোগ রয়েছে।
4. কনসোল সতর্কতা:
   • কনসোল সতর্কতা এবং ত্রুটির বার্তা AMP পেজের ইন্টারফেসের মাধ্যমে সরাসরি প্রদর্শিত হয়, যাতে ডেভেলপাররা দ্রুত সমাধান করতে পারে।

AMP Development Mode ব্যবহার করার উপায়:

এটি ব্যবহারের জন্য AMP পেজে #development=1 প্যারামিটার যোগ করতে হয়। উদাহরণস্বরূপ, যদি আপনি AMP পেজের URL এ #development=1 প্যারামিটার যোগ করেন, তবে ডেভেলপমেন্ট মোড চালু হবে এবং AMP পেজের সমস্ত ত্রুটি এবং সতর্কতা কনসোলে দেখাবে।

https://example.com/amp-page.html#development=1

এখন, যদি আপনি AMP পেজটি ব্রাউজারে খুলেন, তবে আপনি সমস্ত ডিবাগ বার্তা এবং ত্রুটি দেখতে পারবেন, যা পেজটি রেন্ডার করার সময় AMP সিস্টেম প্রদান করবে।

Real-time Debugging কী?

Real-time Debugging হলো AMP পেজ ডেভেলপমেন্টের আরেকটি গুরুত্বপূর্ণ টুল, যা ডেভেলপারদের জন্য পেজের ত্রুটি, লোডিং সমস্যা, এবং পারফরম্যান্সের ত্রুটিগুলো তাত্ক্ষণিকভাবে চিহ্নিত করার সুযোগ দেয়।

Real-time Debugging এর উপকারিতা:

1. তাত্ক্ষণিক ত্রুটি শনাক্তকরণ:
   • ডেভেলপাররা পেজে ত্রুটি খুঁজে পেতে সময় নষ্ট না করে, রিয়েল-টাইম ডিবাগিংয়ে ত্রুটিগুলি তাত্ক্ষণিকভাবে পেতে পারেন। এটি গুগল ডেভেলপারের কনসোল বা ব্রাউজার কনসোলে বার্তা প্রদান করে।
2. কনসোল ডিবাগিং:
   • AMP পেজে console.log() ফাংশন ব্যবহার করে আপনি ডিবাগging বার্তা দেখতে পারেন। এর মাধ্যমে, আপনি কনসোল থেকে ত্রুটি বা স্টেটমেন্টগুলি দেখতে পাবেন এবং কোডে কোন সমস্যা হচ্ছে তা চিহ্নিত করতে পারবেন।
3. পারফরম্যান্স অ্যানালাইসিস:
   • রিয়েল-টাইম ডিবাগিংয়ের মাধ্যমে আপনি AMP পেজের লোডিং টাইম, ইন্টারঅ্যাকটিভিটি এবং অন্যান্য পারফরম্যান্স ইস্যু সম্পর্কে তাত্ক্ষণিকভাবে জানবেন। এটি পেজের ইমেজ, CSS বা JavaScript কোডের সমস্যাগুলি দ্রুত চিহ্নিত করতে সাহায্য করে।
4. ট্র্যাকিং ডেটা:
   • যদি আপনি AMP পেজে গুগল অ্যানালিটিক্স বা অন্য কোনো ট্র্যাকিং সিস্টেম ব্যবহার করেন, তাহলে রিয়েল-টাইম ডিবাগিংয়ের মাধ্যমে আপনি সমস্ত ট্র্যাকিং ডেটা দেখতে পারেন। এটি নিশ্চিত করতে সাহায্য করে যে আপনার ট্র্যাকিং সঠিকভাবে কাজ করছে।

Real-time Debugging এর উদাহরণ:

AMP পেজে রিয়েল-টাইম ডিবাগিং ব্যবহার করতে AMP Inspector টুল ব্যবহার করা যায়। AMP Inspector হলো গুগল ক্রোমের একটি ডেভেলপমেন্ট টুল, যা AMP পেজের কোড, পারফরম্যান্স এবং স্টাইলিং সম্পর্কিত বিশ্লেষণ সরবরাহ করে।

AMP Inspector টুল ব্যবহার:

1. AMP পেজের URL ব্রাউজারে খুলুন।
2. গুগল ক্রোমের ডেভেলপার টুলস খুলুন (Ctrl+Shift+I অথবা Cmd+Option+I), তারপর AMP ট্যাব সিলেক্ট করুন।
3. এখানে আপনি সমস্ত AMP সম্পর্কিত ত্রুটি, উইজেটের পারফরম্যান্স এবং কনসোল বার্তা দেখতে পারবেন।

AMP Development Mode এবং Real-time Debugging এর সমন্বয়ে পারফরম্যান্স বুস্ট:

1. তথ্য নির্ভুলতা:
   • ডেভেলপাররা ত্রুটি বা সমস্যা শনাক্ত করার জন্য দ্রুত পদক্ষেপ নিতে পারে। AMP Development Mode এবং Real-time Debugging-এর মাধ্যমে সমস্যাগুলি দ্রুত চিহ্নিত করা যায়, যা ডেভেলপমেন্ট প্রক্রিয়াকে দ্রুত করে তোলে।
2. পারফরম্যান্স পর্যালোচনা:
   • AMP পেজের লোডিং সময় এবং পারফরম্যান্সের বিশ্লেষণ ডেভেলপারদের পেজ অপটিমাইজ করার জন্য সহায়ক। যখন AMP পেজের কোড অপ্টিমাইজড হয়, তখন পেজের রেন্ডারিং দ্রুত হয় এবং ব্যবহারকারী অভিজ্ঞতা উন্নত হয়।
3. প্রতিটি পদক্ষেপে মনিটরিং:
   • ডেভেলপাররা প্রতিটি পদক্ষেপে পেজের পারফরম্যান্স এবং কোড বিশ্লেষণ করতে পারেন, যা ভবিষ্যতে অ্যাপ্লিকেশন বা সাইটের কার্যকারিতা উন্নত করতে সাহায্য করে।

উপসংহার:

AMP Development Mode এবং Real-time Debugging ডেভেলপারদের জন্য অত্যন্ত গুরুত্বপূর্ণ টুল। এগুলি AMP পেজের ডেভেলপমেন্ট প্রক্রিয়ায় ত্রুটি এবং সমস্যা দ্রুত চিহ্নিত করতে সহায়তা করে এবং পেজের পারফরম্যান্স নিশ্চিত করে। AMP Development Mode কোডের সঠিকতা নিশ্চিত করতে সহায়তা করে, আর Real-time Debugging ত্রুটি শনাক্তকরণ এবং পারফরম্যান্স অ্যানালাইসিসের জন্য কার্যকরী হয়। এই দুটি টুল একসাথে ব্যবহার করলে, AMP পেজের উন্নতি এবং অপ্টিমাইজেশন সহজতর হয়।