আপনার Windows, Mac, বা Linux কম্পিউটার থেকে একটি Android ডিভাইসে রিমোট ডিবাগ লাইভ সামগ্রী। এই টিউটোরিয়ালটি আপনাকে শেখায় কিভাবে:
- রিমোট ডিবাগিংয়ের জন্য আপনার Android ডিভাইস সেট আপ করুন এবং আপনার ডেভেলপমেন্ট মেশিন থেকে এটি আবিষ্কার করুন।
- আপনার ডেভেলপমেন্ট মেশিন থেকে আপনার অ্যান্ড্রয়েড ডিভাইসে লাইভ কন্টেন্ট পরিদর্শন এবং ডিবাগ করুন।
- আপনার অ্যান্ড্রয়েড ডিভাইস থেকে আপনার ডেভেলপমেন্ট মেশিনে একটি DevTools উদাহরণে সামগ্রী স্ক্রিনকাস্ট করুন।
ধাপ 1: আপনার অ্যান্ড্রয়েড ডিভাইস আবিষ্কার করুন
নীচের কর্মপ্রবাহ বেশিরভাগ ব্যবহারকারীদের জন্য কাজ করে। সমস্যা সমাধান দেখুন: আরও সাহায্যের জন্য DevTools Android ডিভাইস সনাক্ত করছে না ।
- আপনার অ্যান্ড্রয়েডে বিকাশকারী বিকল্প স্ক্রীন খুলুন। ডিভাইসে বিকাশকারী বিকল্পগুলি কনফিগার করুন দেখুন।
- USB ডিবাগিং সক্ষম করুন নির্বাচন করুন।
- আপনার ডেভেলপমেন্ট মেশিনে, Chrome খুলুন।
-
chrome://inspect#devices
এ যান। নিশ্চিত করুন ডিসকভার USB ডিভাইস সক্রিয় করা আছে.
একটি USB কেবল ব্যবহার করে আপনার অ্যান্ড্রয়েড ডিভাইসটিকে সরাসরি আপনার ডেভেলপমেন্ট মেশিনের সাথে সংযুক্ত করুন।
আপনি যদি প্রথমবার আপনার ডিভাইসটি সংযুক্ত করেন, তাহলে ডিভাইসটি "অফলাইন" এবং মুলতুবি প্রমাণীকরণ হিসাবে প্রদর্শিত হবে৷
এই ক্ষেত্রে, আপনার ডিভাইসের স্ক্রিনে ডিবাগিং সেশন প্রম্পট গ্রহণ করুন।
আপনি যদি আপনার Android ডিভাইসের মডেলের নাম দেখতে পান, DevTools সফলভাবে আপনার ডিভাইসের সাথে সংযোগ স্থাপন করেছে।
ধাপ 2 এ চালিয়ে যান।
সমস্যা সমাধান: DevTools Android ডিভাইস সনাক্ত করছে না
আপনার হার্ডওয়্যার সঠিকভাবে সেট আপ করা হয়েছে তা নিশ্চিত করুন:
- আপনি যদি একটি USB হাব ব্যবহার করেন তবে পরিবর্তে আপনার অ্যান্ড্রয়েড ডিভাইসটিকে সরাসরি আপনার ডেভেলপমেন্ট মেশিনে সংযুক্ত করার চেষ্টা করুন।
- আপনার অ্যান্ড্রয়েড ডিভাইস এবং ডেভেলপমেন্ট মেশিনের মধ্যে USB কেবলটি আনপ্লাগ করার চেষ্টা করুন এবং তারপরে এটিকে আবার প্লাগ ইন করুন৷ আপনার অ্যান্ড্রয়েড এবং ডেভেলপমেন্ট মেশিনের স্ক্রিনগুলি আনলক থাকা অবস্থায় এটি করুন৷
- নিশ্চিত করুন যে আপনার USB তার কাজ করে। আপনার ডেভেলপমেন্ট মেশিন থেকে আপনার অ্যান্ড্রয়েড ডিভাইসে ফাইলগুলি পরিদর্শন করতে সক্ষম হওয়া উচিত।
আপনার সফ্টওয়্যার সঠিকভাবে সেট আপ করা হয়েছে তা নিশ্চিত করুন:
- যদি আপনার ডেভেলপমেন্ট মেশিন উইন্ডোজ চালায়, তাহলে আপনার অ্যান্ড্রয়েড ডিভাইসের জন্য ইউএসবি ড্রাইভার ম্যানুয়ালি ইনস্টল করার চেষ্টা করুন। ই এম ইউএসবি ড্রাইভার ইনস্টল দেখুন।
- উইন্ডোজ এবং অ্যান্ড্রয়েড ডিভাইসের কিছু সংমিশ্রণে (বিশেষ করে স্যামসাং) অতিরিক্ত সেট আপের প্রয়োজন। দেখুন Chrome DevTools ডিভাইসগুলি প্লাগ ইন করার সময় ডিভাইস সনাক্ত করে না ৷
আপনি যদি আপনার অ্যান্ড্রয়েড ডিভাইসে ইউএসবি ডিবাগিং প্রম্পটের অনুমতি না দেখতে পান তবে চেষ্টা করুন:
- যখন DevTools আপনার ডেভেলপমেন্ট মেশিনে ফোকাস করছে এবং আপনার Android হোম স্ক্রীন দেখাচ্ছে তখন USB কেবলটি সংযোগ বিচ্ছিন্ন এবং পুনরায় সংযোগ করা হচ্ছে। অন্য কথায়, আপনার অ্যান্ড্রয়েড বা ডেভেলপমেন্ট মেশিন স্ক্রিন লক করা থাকলে কখনও কখনও প্রম্পটটি দেখায় না।
- আপনার অ্যান্ড্রয়েড ডিভাইস এবং ডেভেলপমেন্ট মেশিনের জন্য ডিসপ্লে সেটিংস আপডেট করা যাতে তারা কখনই ঘুমাতে না যায়।
- Android এর USB মোড PTP তে সেট করা হচ্ছে। দেখুন Galaxy S4 অথরাইজ USB ডিবাগিং ডায়ালগ বক্স দেখায় না ।
- এটিকে একটি নতুন অবস্থায় রিসেট করতে আপনার অ্যান্ড্রয়েড ডিভাইসের বিকাশকারী বিকল্প স্ক্রীন থেকে ইউএসবি ডিবাগিং অনুমোদন প্রত্যাহার করুন নির্বাচন করুন৷
আপনি যদি এমন একটি সমাধান খুঁজে পান যা এই বিভাগে উল্লেখ করা হয়নি বা Chrome DevTools ডিভাইসগুলি প্লাগ ইন করার সময় ডিভাইস সনাক্ত করে না , তাহলে দয়া করে সেই স্ট্যাক ওভারফ্লো প্রশ্নের একটি উত্তর যোগ করুন, অথবা developer.chrome.com সংগ্রহস্থলে একটি সমস্যা খুলুন !
ধাপ 2: আপনার ডেভেলপমেন্ট মেশিন থেকে আপনার অ্যান্ড্রয়েড ডিভাইসে কন্টেন্ট ডিবাগ করুন
- আপনার Android ডিভাইসে Chrome খুলুন।
আপনার ডেভেলপমেন্ট মেশিনে
chrome://inspect/#devices
এ, আপনি আপনার অ্যান্ড্রয়েড ডিভাইসের মডেলের নাম, এর ক্রমিক নম্বর দেখেন। এর নীচে, আপনি বন্ধনীতে সংস্করণ নম্বর সহ ডিভাইসে চলমান Chrome-এর সংস্করণ দেখতে পারেন৷ইউআরএল টেক্সট বক্স সহ খুলুন ট্যাবে , একটি URL লিখুন এবং তারপরে খুলুন ক্লিক করুন। পৃষ্ঠাটি আপনার Android ডিভাইসে একটি নতুন ট্যাবে খোলে।
প্রতিটি দূরবর্তী Chrome ট্যাব
chrome://inspect/#devices
এ নিজস্ব বিভাগ পায়। আপনি এই বিভাগ থেকে সেই ট্যাবের সাথে ইন্টারঅ্যাক্ট করতে পারেন। WebView ব্যবহার করে কোনো অ্যাপ থাকলে, আপনি সেই অ্যাপগুলির প্রতিটির জন্যও একটি বিভাগ দেখতে পাবেন। এই উদাহরণে, শুধুমাত্র একটি ট্যাব খোলা আছে।আপনি যে ইউআরএলটি খুলেছেন তার পাশের পরিদর্শনে ক্লিক করুন। একটি নতুন DevTools উদাহরণ খোলে৷
আপনার অ্যান্ড্রয়েড ডিভাইসে চলমান Chrome-এর সংস্করণটি আপনার ডেভেলপমেন্ট মেশিনে খোলা DevTools-এর সংস্করণ নির্ধারণ করে। সুতরাং, যদি আপনার অ্যান্ড্রয়েড ডিভাইসটি ক্রোমের একটি খুব পুরানো সংস্করণ চালায়, তাহলে DevTools দৃষ্টান্ত আপনি যা ব্যবহার করছেন তার থেকে খুব আলাদা দেখাতে পারে।
আরও ক্রিয়া: বিরতি, ফোকাস, পুনরায় লোড বা একটি ট্যাব বন্ধ করুন৷
URL এর নীচে আপনি একটি ট্যাবকে বিরতি, ফোকাস, পুনরায় লোড বা বন্ধ করার জন্য একটি মেনু খুঁজে পেতে পারেন৷
উপাদান পরিদর্শন করুন
আপনার DevTools ইন্সট্যান্সের এলিমেন্টস প্যানেলে যান এবং আপনার Android ডিভাইসের ভিউপোর্টে হাইলাইট করতে একটি এলিমেন্টের উপর হোভার করুন।
এছাড়াও আপনি উপাদান প্যানেলে এটি নির্বাচন করতে আপনার Android ডিভাইসের স্ক্রিনে একটি উপাদান আলতো চাপতে পারেন। এলিমেন্ট নির্বাচন করুন ক্লিক করুন আপনার DevTools উদাহরণে, এবং তারপরে আপনার Android ডিভাইসের স্ক্রিনে উপাদানটি আলতো চাপুন। মনে রাখবেন যে প্রথম স্পর্শের পরে উপাদান নির্বাচন অক্ষম করা হয়েছে, তাই আপনি যখনই এই বৈশিষ্ট্যটি ব্যবহার করতে চান তখন আপনাকে এটি পুনরায় সক্ষম করতে হবে।
আপনার ডেভেলপমেন্ট মেশিনে আপনার অ্যান্ড্রয়েড স্ক্রিন স্ক্রিনকাস্ট করুন
টগল স্ক্রিনকাস্ট ক্লিক করুন আপনার DevTools উদাহরণে আপনার Android ডিভাইসের সামগ্রী দেখতে।
আপনি একাধিক উপায়ে স্ক্রিনকাস্টের সাথে ইন্টারঅ্যাক্ট করতে পারেন:
- ক্লিকগুলি ট্যাপে অনুবাদ করা হয়, ডিভাইসে সঠিক স্পর্শ ইভেন্টগুলি ফায়ার করে৷
- আপনার কম্পিউটারের কীস্ট্রোকগুলি ডিভাইসে পাঠানো হয়৷
- একটি চিমটি অঙ্গভঙ্গি অনুকরণ করতে, টেনে আনার সময় Shift ধরে রাখুন।
- স্ক্রোল করতে, আপনার ট্র্যাকপ্যাড বা মাউস হুইল ব্যবহার করুন, বা আপনার মাউস পয়েন্টার দিয়ে ফ্লিং করুন।
স্ক্রিনকাস্টে কিছু নোট:
- স্ক্রিনকাস্ট শুধুমাত্র পৃষ্ঠার বিষয়বস্তু প্রদর্শন করে। স্ক্রিনকাস্টের স্বচ্ছ অংশগুলি ডিভাইস ইন্টারফেসের প্রতিনিধিত্ব করে, যেমন Chrome অ্যাড্রেস বার, অ্যান্ড্রয়েড স্ট্যাটাস বার, বা অ্যান্ড্রয়েড কীবোর্ড।
- স্ক্রিনকাস্ট নেতিবাচকভাবে ফ্রেম হার প্রভাবিত করে। আপনার পৃষ্ঠার পারফরম্যান্সের আরও সঠিক ছবি পেতে স্ক্রোল বা অ্যানিমেশন পরিমাপ করার সময় স্ক্রিনকাস্টিং অক্ষম করুন।
- আপনার অ্যান্ড্রয়েড ডিভাইসের স্ক্রিন লক হলে, আপনার স্ক্রিনকাস্টের বিষয়বস্তু অদৃশ্য হয়ে যাবে। স্ক্রিনকাস্ট স্বয়ংক্রিয়ভাবে পুনরায় শুরু করতে আপনার Android ডিভাইসের স্ক্রীন আনলক করুন।
অ্যান্ড্রয়েড ডিবাগ ব্রিজ (এডিবি) এর মাধ্যমে ম্যানুয়ালি ডিবাগ করুন
কিছু বিরল ক্ষেত্রে, দূরবর্তী ডিবাগিংয়ের একটি বিকল্প পদ্ধতি কার্যকর হতে পারে। উদাহরণস্বরূপ, আপনি Android এ আপনার Chrome এর Chrome DevTools Protocol (CDP)-এর সাথে সরাসরি সংযোগ করতে চাইতে পারেন।
এটি করার জন্য, আপনি অ্যান্ড্রয়েড ডিবাগ ব্রিজ (এডিবি) ব্যবহার করতে পারেন:
- আপনার অ্যান্ড্রয়েড ডিভাইসে বিকাশকারী বিকল্প এবং USB ডিবাগিং সক্ষম করা নিশ্চিত করুন৷
- আপনার Android ডিভাইসে Chrome খুলুন।
এর মাধ্যমে অ্যান্ড্রয়েড ডিভাইসটিকে আপনার ডেভেলপমেন্ট মেশিনে সংযুক্ত করুন:
- একটি ইউএসবি তারের (সরাসরি)।
- বিকল্পভাবে, adb Wi-Fi সংযোগ ।
আপনার ডেভেলপমেন্ট মেশিনের কমান্ড লাইনে,
adb devices -l
চালান এবং আপনার ডিভাইস তালিকায় উপস্থিত আছে কিনা তা পরীক্ষা করুন।ডিভাইসে থাকা CDP সকেটটিকে আপনার মেশিনের স্থানীয় পোর্টে ফরোয়ার্ড করুন, উদাহরণস্বরূপ,
9222
। এটি করতে, চালান:adb forward tcp:9222 localabstract:chrome_devtools_remote
একবার সফলভাবে সংযুক্ত হলে, দেখুন যে:
-
http://localhost:9222/json
আপনারpage
লক্ষ্যগুলি তালিকাভুক্ত করে। -
http://localhost:9222/json/version
browser
টার্গেট এন্ডপয়েন্ট প্রকাশ করে, যেমন CDP ডকুমেন্টেশন নির্দেশ করে। -
chrome://inspect/#devices
জনবহুল, এমনকি Discover USB ডিভাইস সেটিং চেক করা ছাড়াই।
-
সমস্যা সমাধানের জন্য, দেখুন:
-
adb
ডকুমেন্টেশন ঐচ্ছিকভাবে, আপনি পুরানো গাইড পড়তে পারেন: