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

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

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

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

WebView DevTools রান করুন

Android 16 বা তার পরবর্তী ভার্সন সহ যেসব ডিভাইসে ডেভেলপার মোড চালু করা আছে, সেগুলিতে আপনি সেটিংস > সিস্টেম > ডেভেলপার বিকল্প > WebView DevTools-এ গিয়ে WebView DevTools চালু করতে পারবেন।

Android-এর সাম্প্রতিক সব রিলিজে, আপনি adb কমান্ড ব্যবহার করে WebView DevTools লঞ্চ করতে পারবেন:

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

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

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

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

প্রি-রিলিজ চ্যানেলে পাল্টান

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

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

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

WebView চ্যানেল

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

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

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

  • বিটা: প্রায় প্রতি সপ্তাহে আপডেট করা হয়, প্রতি ৪ সপ্তাহে একটি বড় আপডেট করা হয়। এই চ্যানেল আপনাকে WebView-এর পরবর্তী স্টেবল রিলিজের ফিচারের প্রিভিউ দেয়, যা স্টেবল রিলিজের প্রায় ৪-৬ সপ্তাহ আগে পাওয়া যায়। WebView-এর আসন্ন রিলিজের সাথে আপনার ওয়েব অ্যাপের কম্প্যাটিবিলিটি যাচাই করতে এটি ব্যবহার করুন।

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

ক্র্যাশ UI

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

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

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

ফ্ল্যাগ UI

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

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

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

নেট লগ

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

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

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