WebView DevTools অ্যাপ ব্যবহার করে ডিবাগ করুন

WebView DevTools অ্যাপটি সিস্টেম WebView কম্পোনেন্ট পরিচালনা এবং ডিবাগ করার জন্য একটি অন-ডিভাইস ইউটিলিটি। এটি Chrome DevTools থেকে আলাদা, যা আপনার ডেভেলপমেন্ট মেশিনে চলে এবং আপনাকে WebView-এর একটি ইনস্ট্যান্সের মধ্যে চলমান লাইভ ওয়েব কন্টেন্ট (HTML, CSS এবং JavaScript) দূরবর্তীভাবে ডিবাগ করতে দেয়।

WebView DevTools হল একটি সহযোগী অ্যাপ যা WebView সিস্টেম কম্পোনেন্টের সাথে আপনার ডিভাইসে স্বয়ংক্রিয়ভাবে ইনস্টল হয়ে যায়। অ্যাপটি চারটি ক্ষেত্রে বিভক্ত:

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

WebView DevTools চালান

Android 16 বা তার বেশি ভার্সনের ডিভাইসগুলিতে যেখানে Developer Mode সক্ষম করা আছে, আপনি Settings > System > Developer options > WebView DevTools এ নেভিগেট করে WebView DevTools চালু করতে পারেন।

সাম্প্রতিক সমস্ত অ্যান্ড্রয়েড রিলিজে, আপনি একটি adb কমান্ড ব্যবহার করে WebView DevTools চালু করতে পারেন:

adb shell am start -a "com.android.webview.SHOW_DEV_UI"

বিকল্পভাবে, যদি আপনি WebView এর একটি প্রি-লিজ চ্যানেল যেমন Beta , Dev , অথবা Canary ইনস্টল করেন, তাহলে আপনি WebView DevTools লঞ্চার আইকন ব্যবহার করতে পারেন।

WebView DevTools লঞ্চার আইকন।
চিত্র ১. ডিভাইসে ইনস্টল করা অ্যাপের জন্য WebView DevTools আইকন।

প্রথমবার যখন আপনি WebView DevTools চালাবেন, তখন এটি আপনার সক্ষম করা ডেভেলপার ফ্ল্যাগগুলির তালিকা সহ একটি স্থায়ী বিজ্ঞপ্তি দেখানোর জন্য বিজ্ঞপ্তির অনুমতির অনুরোধ করবে।

একটি প্রি-রিলিজ চ্যানেলে স্যুইচ করুন

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

  1. স্থিতিশীলতা এবং সর্বশেষ পরিবর্তনগুলিতে অ্যাক্সেসের মধ্যে আপনার পছন্দের ট্রেড-অফের উপর নির্ভর করে WebView-এর Beta , Dev , অথবা Canary সংস্করণটি ইনস্টল করুন।
  2. WebView DevTools অ্যাপটি খুলুন এবং Change Provider এ ট্যাপ করুন।
  3. যদি আপনি সেই বিকল্পটি দেখতে না পান, তাহলে উপরের ডানদিকের কোণায় তিনটি বিন্দুতে আলতো চাপুন এবং ওয়েবভিউ প্রদানকারী পরিবর্তন করুন নির্বাচন করুন।

আরও তথ্যের জন্য WebView Beta, Dev, অথবা Canary ব্যবহার করে দেখুন।

ওয়েবভিউ চ্যানেল

ওয়েবভিউ চ্যানেলগুলি ক্রোম রিলিজ চ্যানেলের উপর ভিত্তি করে তৈরি। প্রতিটি চ্যানেল কোডের স্থিতিশীলতা এবং সতেজতার একটি ভিন্ন স্তর উপস্থাপন করে। প্রতিটি ওয়েবভিউ চ্যানেল কখন ব্যবহার করতে হবে তার একটি সংক্ষিপ্ত বিবরণ এখানে দেওয়া হল:

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

  • ডেভেলপার : সপ্তাহে একবার বা দুবার আপডেট করা হয়। এই চ্যানেলটি ক্যানারির চেয়ে বেশি স্থিতিশীল, তবে এখনও অত্যাধুনিক পরিবর্তন রয়েছে। এটি এমন ডেভেলপারদের জন্য সেরা যারা নতুন বৈশিষ্ট্য পরীক্ষা করতে চান কিন্তু ক্যানারির তুলনায় সম্পর্কহীন বাগের ঝুঁকি কম।

  • বিটা : প্রায় প্রতি সপ্তাহে আপডেট করা হয়, প্রতি ৪ সপ্তাহে একটি বড় আপডেট সহ। এই চ্যানেলটি আপনাকে WebView-এর পরবর্তী স্থিতিশীল সংস্করণের বৈশিষ্ট্যগুলির একটি পূর্বরূপ দেখায় স্থিতিশীল সংস্করণের প্রায় ৪-৬ সপ্তাহ আগে। সামঞ্জস্যতা যাচাই করতে WebView-এর আসন্ন সংস্করণের সাথে আপনার ওয়েব অ্যাপ পরীক্ষা করতে এটি ব্যবহার করুন।

  • স্থিতিশীল : প্রধান রিলিজের জন্য প্রতি ৪ সপ্তাহে আপডেট করা হয়, জরুরি বাগ সংশোধনের জন্য প্রতি ২-৩ সপ্তাহে ছোট রিলিজ করা হয়। এটি ওয়েবভিউয়ের প্রোডাকশন চ্যানেল, যা সকল ব্যবহারকারীর জন্য চালু করা হয়েছে। এটি সবচেয়ে স্থিতিশীল চ্যানেল, অন্যান্য চ্যানেলে পরীক্ষার মধ্য দিয়ে গেছে। আপনি যদি আপনার ওয়েব অ্যাপটি ওয়েবভিউতে অভিজ্ঞতা অর্জন করতে চান যেভাবে বেশিরভাগ ব্যবহারকারী বর্তমানে করেন, সম্ভবত তারা যে বাগ রিপোর্ট করেছেন তা পুনরুত্পাদন করতে এটি ব্যবহার করুন।

ক্র্যাশ UI

আপনার অ্যাপ তৈরির সময় যদি WebView ক্র্যাশের সম্মুখীন হন, তাহলে আপনি WebView DevTools ব্যবহার করে তাদের বিরুদ্ধে বাগ রিপোর্ট তালিকাভুক্ত, আপলোড এবং ফাইল করতে পারেন।

  1. আপনার অ্যাপ ক্র্যাশ হওয়ার পরে, ক্র্যাশ রিপোর্ট তৈরি হয়েছে কিনা তা নিশ্চিত করতে অ্যাপটি পুনরায় চালু করুন।
  2. WebView DevTools অ্যাপটি খুলুন এবং Crashes এ ট্যাপ করুন।

আরও তথ্যের জন্য, ক্র্যাশ UI ডকুমেন্টেশন দেখুন।

ফ্ল্যাগ UI

WebView DevTools অ্যাপটি আপনাকে আপনার ডিভাইস জুড়ে সমস্ত WebView-এর আচরণ পরিবর্তন করার জন্য বেশ কয়েকটি কার্যকর ফ্ল্যাগ সেট করতে দেয়। বেশিরভাগ ফ্ল্যাগ শুধুমাত্র WebView-এর ডেভেলপমেন্টের জন্য ব্যবহৃত হয়, তবে কয়েকটি অ্যান্ড্রয়েড অ্যাপ ডেভেলপারদের জন্য কার্যকর।

  • highlight-all-webviews : ওয়েবভিউগুলির উপরে হলুদ আভা যোগ করে তাদের শনাক্ত করুন।
  • net-log : WebView নেটওয়ার্ক কার্যকলাপের নিম্ন-স্তরের লগিং সক্ষম করুন।
  • webview-log-js-console-messages : জাভাস্ক্রিপ্ট কনসোল লগগুলিকে Logcat-এ প্রদর্শিত করুন।
ওয়েবভিউ ডেভটুলস অ্যাপটি ফ্ল্যাগস UI দেখাচ্ছে।
চিত্র ২। WebView DevTools অ্যাপে ফ্ল্যাগস UI।

আরও তথ্যের জন্য, ফ্ল্যাগ UI ডকুমেন্টেশন দেখুন।

নেট লগ

যদি আপনি Chrome DevTools ব্যবহার করে WebView-এ সার্ভার সংযোগের সমস্যা সমাধান করতে না পারেন, তাহলে নিম্ন-স্তরের নেটওয়ার্ক লগ ক্যাপচার করতে WebView DevTools ব্যবহার করুন।

  1. আপনার অ্যাপ কোডে WebView ডিবাগিং সক্ষম করুন
  2. WebView DevTools-এ, Flags খুলুন, net-log খুঁজুন এবং এটি চালু করুন। ফ্ল্যাগটি কার্যকর হওয়ার জন্য আপনার অ্যাপটি পুনরায় চালু করুন।
  3. আপনি যে নেটওয়ার্ক আচরণটি ডিবাগ করতে চান তা ট্রিগার করে এমন ক্রিয়া সম্পাদন করুন। সমস্যাটি পুনরুত্পাদন করার পরে, আপনার অ্যাপটি বন্ধ করুন।
  4. নেট লগ ফাইলটি খুঁজে পেতে এবং শেয়ার করতে WebView DevTools-এর নেট লগ বিভাগটি খুলুন।
  5. আপনি JSON লগ ফাইলটি Netlog Viewer- এ লোড করতে পারেন, যা নেটওয়ার্ক লগগুলি ভিজ্যুয়ালাইজ করার জন্য একটি অনলাইন টুল, যাতে নিম্ন-স্তরের নেটওয়ার্ক ইভেন্ট, সকেট তথ্য এবং সময়ের বিবরণ পরিদর্শন করা যায়।

আরও তথ্যের জন্য, WebView-এ নেট ডিবাগিং দেখুন।