Chrome DevTools ব্যবহার করে ডিবাগ করুন

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

DevTools সম্পর্কে আরও জানতে, Chrome DevTools-এর ওভারভিউ দেখুন।

Chrome DevTools থেকে সংযোগ সক্রিয় করুন

আপনার অ্যাপের WebView ডিফল্টরূপে Chrome DevTools থেকে সংযোগ সক্ষম করবে না। আপনাকে অবশ্যই আপনার অ্যাপ্লিকেশনের কোডে WebView ডিবাগিং সক্ষম করতে হবে।

  1. আপনার অ্যাপটি কোনো হার্ডওয়্যার বা ভার্চুয়াল ডিভাইসে চালানোর জন্য প্রস্তুত আছেন কিনা, তা নিশ্চিত করুন।
  2. আপনার অ্যাপ্লিকেশন কোডে setWebContentsDebuggingEnabled কল করে WebView ডিবাগিং সক্রিয় করুন। এটি সাধারণত Activity বা Application ক্লাসে করা হয়, যেখানে WebView-টি ইনিশিয়ালাইজ করা হয়।

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

অ্যাপ্লিকেশনের ম্যানিফেস্টে থাকা debuggable ফ্ল্যাগের অবস্থা দ্বারা WebView ডিবাগিং প্রভাবিত হয় না। আপনি যদি শুধুমাত্র debuggable ফ্ল্যাগটি ‘ true সেট করা থাকলেই WebView ডিবাগিং চালু করতে চান, তাহলে নিম্নলিখিত উদাহরণে দেখানো অনুযায়ী রানটাইমে এই ফ্ল্যাগটি পরীক্ষা করুন:

কোটলিন

if (applicationInfo.flags and ApplicationInfo.FLAG_DEBUGGABLE != 0) {
     WebView.setWebContentsDebuggingEnabled(true)
}

জাভা

if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) {
     WebView.setWebContentsDebuggingEnabled(true);
}

আপনার WebView ডিবাগ করা শুরু করুন

আপনার অ্যাপ্লিকেশন কোডে WebView ডিবাগিং সক্রিয় করার পরে এবং আপনার অ্যাপটি কোনো ফিজিক্যাল ডিভাইস বা অ্যান্ড্রয়েড এমুলেটরে চালু হলে, Chrome DevTools-কে আপনার WebView-এর সাথে সংযুক্ত করুন:

  1. আপনার ডেভেলপমেন্ট মেশিনে ক্রোম খুলুন।
  2. chrome://inspect এ যান।
  3. chrome://inspect পেজে, ‘Discover USB devices’ অপশনটি চেক করা আছে কিনা তা নিশ্চিত করুন। ‘Remote Target’ সেকশনে আপনার ডিভাইসটি খুঁজুন।

    ক্রোম ডেভটুলস ইন্সপেক্ট পেজ ডিবাগিংয়ের জন্য উপলব্ধ রিমোট টার্গেটগুলো দেখাচ্ছে।
    চিত্র ১. ক্রোম ডেভটুলস ইন্সপেক্ট পেজ, যেখানে ডিবাগিংয়ের জন্য উপলব্ধ রিমোট টার্গেটগুলো দেখানো হচ্ছে।
  4. আপনার ডিভাইসের নামের নিচে, Chrome সেই ডিভাইসে চলমান সমস্ত ডিবাগ-সক্ষম WebView-এর তালিকা দেখায়, যেগুলোকে সাধারণত ‘WebView in’ এর পরে অ্যাপটির প্যাকেজ নাম দিয়ে চিহ্নিত করা হয়। আপনি যে WebView-টি ডিবাগ করতে চান সেটি খুঁজুন এবং ‘inspect’ লিঙ্কে ক্লিক করুন।

আপনি একটি নতুন DevTools ইনস্ট্যান্স খুলতে দেখবেন, যা ব্যবহার করে আপনি আপনার WebView পরিদর্শন করতে পারবেন।

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