রিমোট ডিবাগ অ্যান্ড্রয়েড ডিভাইস

কেসি বাস্কস
Kayce Basques
সোফিয়া এমেলিয়ানোভা
Sofia Emelianova

আপনার উইন্ডোজ, ম্যাক বা লিনাক্স কম্পিউটার থেকে একটি অ্যান্ড্রয়েড ডিভাইসে লাইভ কন্টেন্ট রিমোটলি ডিবাগ করুন। এই টিউটোরিয়ালটি আপনাকে শেখাবে কীভাবে:

  • রিমোট ডিবাগিংয়ের জন্য আপনার অ্যান্ড্রয়েড ডিভাইসটি সেট আপ করুন এবং আপনার ডেভেলপমেন্ট মেশিন থেকে এটিকে খুঁজে বের করুন।
  • আপনার ডেভেলপমেন্ট মেশিন থেকে আপনার অ্যান্ড্রয়েড ডিভাইসের লাইভ কন্টেন্ট পরিদর্শন ও ডিবাগ করুন।
  • আপনার অ্যান্ড্রয়েড ডিভাইস থেকে স্ক্রিনকাস্ট কন্টেন্ট আপনার ডেভেলপমেন্ট মেশিনের একটি DevTools ইনস্ট্যান্সে আপলোড করুন।

রিমোট ডিবাগিং ডায়াগ্রাম

ধাপ ১: আপনার অ্যান্ড্রয়েড ডিভাইসটি খুঁজে বের করুন

নিচের কার্যপ্রণালীটি বেশিরভাগ ব্যবহারকারীর জন্য কাজ করে। আরও সাহায্যের জন্য “সমস্যা সমাধান: DevTools অ্যান্ড্রয়েড ডিভাইসটি সনাক্ত করতে পারছে না” দেখুন।

  1. আপনার অ্যান্ড্রয়েডে ডেভেলপার অপশন স্ক্রিনটি খুলুন। অন-ডিভাইস ডেভেলপার অপশন কনফিগার করুন দেখুন।
  2. ইউএসবি ডিবাগিং সক্ষম করুন নির্বাচন করুন।
  3. আপনার ডেভেলপমেন্ট মেশিনে ক্রোম খুলুন।
  4. chrome://inspect#devices -এ যান।
  5. নিশ্চিত করুন চেকবক্স। ইউএসবি ডিভাইস আবিষ্কার সক্রিয় করা হয়েছে।

    ‘Discover USB Devices’ চেকবক্সটি সক্রিয় করা আছে।

  6. একটি ইউএসবি ক্যাবল ব্যবহার করে আপনার অ্যান্ড্রয়েড ডিভাইসটিকে সরাসরি আপনার ডেভেলপমেন্ট মেশিনের সাথে সংযুক্ত করুন।

  7. আপনি যদি প্রথমবারের মতো আপনার ডিভাইসটি সংযুক্ত করেন, তাহলে ডিভাইসটি "অফলাইন" এবং প্রমাণীকরণের জন্য অপেক্ষমান হিসেবে দেখাবে।

    অফলাইন ডিভাইসটির প্রমাণীকরণ প্রক্রিয়াধীন।

    এক্ষেত্রে, আপনার ডিভাইসের স্ক্রিনে আসা ডিবাগিং সেশন প্রম্পটটি গ্রহণ করুন।

  8. আপনি যদি আপনার অ্যান্ড্রয়েড ডিভাইসের মডেলের নামটি দেখতে পান, তার মানে হলো DevTools আপনার ডিভাইসের সাথে সফলভাবে সংযোগ স্থাপন করতে পেরেছে।

    একটি মডেল নাম দ্বারা চিহ্নিত, সফলভাবে সংযুক্ত ডিভাইস।

  9. ধাপ ২- এ যান।

সমস্যা সমাধান: DevTools অ্যান্ড্রয়েড ডিভাইসটি শনাক্ত করতে পারছে না

আপনার হার্ডওয়্যারটি সঠিকভাবে সেট আপ করা আছে কিনা তা নিশ্চিত করুন:

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

আপনার সফ্টওয়্যারটি সঠিকভাবে সেট আপ করা আছে কিনা তা নিশ্চিত করুন:

  • আপনার ডেভেলপমেন্ট মেশিনটি যদি উইন্ডোজে চলে, তবে আপনার অ্যান্ড্রয়েড ডিভাইসের জন্য ইউএসবি ড্রাইভারগুলো ম্যানুয়ালি ইনস্টল করার চেষ্টা করুন। OEM ইউএসবি ড্রাইভার ইনস্টল করুন দেখুন।
  • উইন্ডোজ এবং অ্যান্ড্রয়েড ডিভাইসের কিছু সংমিশ্রণের (বিশেষ করে স্যামসাং) জন্য অতিরিক্ত সেটআপের প্রয়োজন হয়। 'Chrome DevTools Devices does not detect device when plugged in' দেখুন।

আপনার অ্যান্ড্রয়েড ডিভাইসে 'Allow USB Debugging' প্রম্পটটি দেখতে না পেলে নিম্নলিখিতগুলি চেষ্টা করুন:

  • আপনার ডেভেলপমেন্ট মেশিনে ডেভটুলস ফোকাসে থাকা অবস্থায় এবং অ্যান্ড্রয়েড হোম স্ক্রিন দেখা যাওয়ার সময় ইউএসবি কেবলটি সংযোগ বিচ্ছিন্ন করে আবার সংযোগ করলে এই সমস্যাটি সমাধান হয়। অন্য কথায়, আপনার অ্যান্ড্রয়েড বা ডেভেলপমেন্ট মেশিনের স্ক্রিন লক করা থাকলে কখনও কখনও প্রম্পটটি দেখা যায় না।
  • আপনার অ্যান্ড্রয়েড ডিভাইস এবং ডেভেলপমেন্ট মেশিনের ডিসপ্লে সেটিংস আপডেট করুন, যাতে সেগুলো কখনোই স্লিপ মোডে না যায়।
  • অ্যান্ড্রয়েডের ইউএসবি মোড পিটিপি-তে সেট করা। দেখুন, গ্যালাক্সি এস৪-এ 'অথরাইজ ইউএসবি ডিবাগিং' ডায়ালগ বক্স দেখা যাচ্ছে না ।
  • আপনার অ্যান্ড্রয়েড ডিভাইসটিকে নতুন অবস্থায় রিসেট করতে, এর ডেভেলপার অপশন স্ক্রীন থেকে ‘Revoke USB Debugging Authorizations’ নির্বাচন করুন।

এই বিভাগে অথবা "Chrome DevTools Devices does not detect device when plugged in" -এ উল্লেখ করা হয়নি এমন কোনো সমাধান যদি আপনি খুঁজে পান, তাহলে অনুগ্রহ করে সেই Stack Overflow প্রশ্নটিতে একটি উত্তর যোগ করুন, অথবা developer.chrome.com রিপোজিটরিতে একটি ইস্যু খুলুন !

ধাপ ২: আপনার ডেভেলপমেন্ট মেশিন থেকে আপনার অ্যান্ড্রয়েড ডিভাইসে কন্টেন্ট ডিবাগ করুন।

  1. আপনার অ্যান্ড্রয়েড ডিভাইসে ক্রোম খুলুন।
  2. আপনার ডেভেলপমেন্ট মেশিনের chrome://inspect/#devices এ আপনি আপনার অ্যান্ড্রয়েড ডিভাইসের মডেলের নাম এবং তার পরে সিরিয়াল নম্বর দেখতে পাবেন। এর নিচে, আপনি ডিভাইসটিতে চলমান ক্রোমের সংস্করণটি দেখতে পাবেন, যার সংস্করণ নম্বরটি বন্ধনীর মধ্যে থাকে।

    ডিভাইসটিতে ক্রোমের যে সংস্করণটি চলছে।

  3. 'Open tab with url' টেক্সট বক্সে একটি URL লিখে 'Open'-এ ক্লিক করুন। পেজটি আপনার অ্যান্ড্রয়েড ডিভাইসের একটি নতুন ট্যাবে খুলে যাবে।

    একটি বিভাগে তালিকাভুক্ত একটি রিমোট ট্যাব।

    প্রতিটি রিমোট ক্রোম ট্যাবের জন্য chrome://inspect/#devices এ একটি নিজস্ব সেকশন থাকে। আপনি এই সেকশন থেকে সেই ট্যাবটির সাথে ইন্টারঅ্যাক্ট করতে পারেন। যদি WebView ব্যবহার করে এমন কোনো অ্যাপ থাকে, তাহলে আপনি সেই অ্যাপগুলোর প্রতিটির জন্যও একটি করে সেকশন দেখতে পাবেন। এই উদাহরণে, কেবল একটি ট্যাব খোলা আছে।

  4. আপনি এইমাত্র যে URL-টি খুলেছেন তার পাশে থাকা Inspect-এ ক্লিক করুন। একটি নতুন DevTools ইনস্ট্যান্স খুলে যাবে।

রিমোট ট্যাবের জন্য একটি নতুন DevTools ইনস্ট্যান্স।

আপনার অ্যান্ড্রয়েড ডিভাইসে চলমান ক্রোমের সংস্করণটিই নির্ধারণ করে যে আপনার ডেভেলপমেন্ট মেশিনে ডেভটুলসের কোন সংস্করণটি খুলবে। তাই, যদি আপনার অ্যান্ড্রয়েড ডিভাইসে ক্রোমের খুব পুরোনো কোনো সংস্করণ চলে, তাহলে ডেভটুলস ইনস্ট্যান্সটি আপনার পরিচিত রূপের চেয়ে অনেকটাই ভিন্ন দেখাতে পারে।

আরও কাজ: বিরতি, ফোকাস, রিলোড, বা ট্যাব বন্ধ করা।

URL-এর নিচে আপনি একটি ট্যাব পজ, ফোকাস, রিলোড বা বন্ধ করার জন্য একটি মেনু পাবেন।

পজ, রিলোড, ফোকাস বা ট্যাব বন্ধ করার মেনু।

উপাদানগুলি পরিদর্শন করুন

আপনার DevTools ইনস্ট্যান্সের এলিমেন্টস প্যানেলে যান এবং আপনার অ্যান্ড্রয়েড ডিভাইসের ভিউপোর্টে কোনো একটি এলিমেন্টকে হাইলাইট করতে সেটির উপর মাউস রাখুন।

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

আপনার অ্যান্ড্রয়েড স্ক্রিনটি আপনার ডেভেলপমেন্ট মেশিনে স্ক্রিনকাস্ট করুন।

স্ক্রিনকাস্ট টগল করতে ক্লিক করুন স্ক্রিনকাস্ট টগল করুন আপনার DevTools ইনস্ট্যান্সে আপনার অ্যান্ড্রয়েড ডিভাইসের বিষয়বস্তু দেখতে।

আপনি বিভিন্ন উপায়ে স্ক্রিনকাস্টের সাথে ইন্টারঅ্যাক্ট করতে পারেন:

  • ক্লিকগুলো ট্যাপে রূপান্তরিত হয়, যা ডিভাইসে যথাযথ টাচ ইভেন্ট সক্রিয় করে।
  • আপনার কম্পিউটারের কীস্ট্রোকগুলো ডিভাইসে পাঠানো হয়।
  • পিঞ্চ জেসচার অনুকরণ করতে, ড্র্যাগ করার সময় Shift চেপে ধরুন।
  • স্ক্রল করতে আপনার ট্র্যাকপ্যাড বা মাউস হুইল ব্যবহার করুন, অথবা মাউস পয়েন্টার দিয়ে নাড়াচাড়া করুন।

স্ক্রিনকাস্ট সম্পর্কে কিছু কথা:

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

অ্যান্ড্রয়েড ডিবাগ ব্রিজ (adb) এর মাধ্যমে ম্যানুয়ালি ডিবাগ করুন

কিছু বিরল ক্ষেত্রে, রিমোট ডিবাগিংয়ের একটি বিকল্প পদ্ধতি কার্যকর হতে পারে। উদাহরণস্বরূপ, আপনি অ্যান্ড্রয়েডে আপনার ক্রোমের ক্রোম ডেভটুলস প্রোটোকল (CDP)-এর সাথে সরাসরি সংযোগ করতে চাইতে পারেন।

এটি করার জন্য, আপনি অ্যান্ড্রয়েড ডিবাগ ব্রিজ (adb) ব্যবহার করতে পারেন:

  1. আপনার অ্যান্ড্রয়েড ডিভাইসে ডেভেলপার অপশন এবং ইউএসবি ডিবাগিং চালু করা নিশ্চিত করুন।
  2. আপনার অ্যান্ড্রয়েড ডিভাইসে ক্রোম খুলুন।
  3. নিম্নলিখিত উপায়ে অ্যান্ড্রয়েড ডিভাইসটিকে আপনার ডেভেলপমেন্ট মেশিনের সাথে সংযুক্ত করুন:

  4. আপনার ডেভেলপমেন্ট মেশিনের কমান্ড লাইনে, adb devices -l চালান এবং তালিকায় আপনার ডিভাইসটি আছে কিনা তা পরীক্ষা করুন।

  5. ডিভাইসের CDP সকেটটি আপনার মেশিনের লোকাল পোর্টে, যেমন 9222 , ফরওয়ার্ড করুন। এটি করতে, চালান:

    adb forward tcp:9222 localabstract:chrome_devtools_remote
    
  6. সফলভাবে সংযুক্ত হয়ে গেলে, দেখুন যে:

    • http://localhost:9222/json আপনার page টার্গেটগুলো তালিকাভুক্ত করে।
    • CDP ডকুমেন্টেশন অনুযায়ী, http://localhost:9222/json/version browser টার্গেট এন্ডপয়েন্টটিকে উন্মুক্ত করে।
    • ‘Discover USB devices’ সেটিংটি চেক না করা সত্ত্বেও chrome://inspect/#devices ডেটা চলে আসে।

সমস্যা সমাধানের জন্য দেখুন: