মোবাইলের জন্য বিকাশ করা ঠিক ততটাই সহজ হওয়া উচিত যেমন এটি ডেস্কটপের জন্য বিকাশ করছে। আমরা আপনার জন্য জিনিসগুলিকে সহজ করার জন্য Chrome DevTools-এ কঠোর পরিশ্রম করছি এবং কিছু নতুন বৈশিষ্ট্য উন্মোচন করার সময় এসেছে যা নাটকীয়ভাবে আপনার মোবাইল ওয়েব বিকাশকে উন্নত করবে৷ প্রথমে, রিমোট ডিবাগিং এবং তারপরে আমরা সঠিক মোবাইল এমুলেশন উন্মোচন করব ।
ডেস্কটপে আপনার ডিভাইসের স্ক্রিন স্ক্রিনকাস্ট করুন
এখন অবধি, রিমোট ডিবাগিং করার সময় আপনাকে আপনার ডিভাইস এবং আপনার ডেভটুলগুলির মধ্যে আপনার চোখগুলিকে পিছনে সরিয়ে নিতে হয়েছিল। এখন, স্ক্রিনকাস্ট আপনার ডিভাইসের স্ক্রীন ঠিক আপনার devtools বরাবর প্রদর্শন করে । এটি দেখা ভাল, তবে এটির সাথে যোগাযোগ করা আরও ভাল:
- স্ক্রিনকাস্টে ক্লিকগুলি ট্যাপে অনুবাদ করা হয় এবং সঠিক স্পর্শ ইভেন্টগুলি ডিভাইসে ফায়ার করা হয়।
- আপনার ডেস্কটপ পয়েন্টার দিয়ে আপনার ডিভাইসে উপাদান পরিদর্শন করুন
- আপনার ডেস্কটপ কীবোর্ডে টাইপ করুন-- সমস্ত কীস্ট্রোক ডিভাইসে পাঠানো হয় । আপনার থাম্বস দিয়ে টাইপ করার জন্য একটি বিশাল টাইমসেভার।
- আপনার পয়েন্টার দিয়ে পৃষ্ঠাটিকে স্ক্রোল করুন বা আপনার ল্যাপটপের ট্র্যাকপ্যাডে স্লাইড করে স্ক্রোল করুন।
স্ক্রিনকাস্টিংয়ের সম্পূর্ণ ডকুমেন্টেশন এই সমস্ত এবং আরও অনেক কিছু ক্যাপচার করে, যেমন একটি চিমটি জুম অঙ্গভঙ্গি পাঠানো। অ্যান্ড্রয়েড বিটাতে ক্রোম (m32) প্রয়োজন৷
সহজ দূরবর্তী ডিবাগিং
18 মাস আগে, ক্রোম ওয়েবকিট ব্রাউজারগুলির জন্য যথাযথ রিমোট ডিবাগিং চালু করেছিল, কিন্তু আপনি যদি এটি আবার চেষ্টা করে দেখেন, তাহলে আপনাকে একটি 400MB Android SDK ডাউনলোডের সাথে মোকাবিলা করতে হবে, আপনার $PATH এ adb বাইনারি যুক্ত করে এবং কিছু জাদুকরী কমান্ড লাইন মন্ত্র যুক্ত করে৷
এখন, আমরা ঘোষণা করতে পেরে আনন্দিত যে আপনি সেগুলি ভুলে যেতে পারেন৷ Chrome এখন স্থানীয়ভাবে আপনার USB সংযুক্ত ডিভাইসগুলি আবিষ্কার করতে এবং কথা বলতে পারে ৷ আমরা Chrome-এ সরাসরি USB-এর মাধ্যমে adb প্রোটোকল প্রয়োগ করেছি, যাতে আপনি সহজেই Menu > Tools > Inspect Devices যেতে পারেন এবং অবিলম্বে আপনার দূরবর্তী ডিবাগিং সেশন শুরু করতে পারেন।
এটি Chrome OS সহ সমস্ত প্ল্যাটফর্মে দুর্দান্ত কাজ করে, যদিও মনে রাখবেন যে Windows এ, ডিভাইসের সাথে কথা বলার জন্য আপনাকে প্রথমে সঠিক USB ড্রাইভার ইনস্টল করতে হবে। আপনি যদি আগে কখনও এটি চেষ্টা না করে থাকেন তবে আপনাকে ডিভাইসে USB ডিবাগিং সক্ষম করতে হবে এবং নিশ্চিত করতে হবে যে আপনি Android বিটার জন্য Chrome ব্যবহার করছেন৷ সম্পূর্ণ ডক্স পড়ুন. .
স্থানীয় প্রকল্পের জন্য পোর্ট-ফরোয়ার্ড
আপনি লোকালহোস্ট: 8000-এ বিকাশ করছেন কিন্তু আপনার ফোন তাতে পৌঁছাতে পারে না। সুতরাং, আমরা দূরবর্তী ডিবাগিং ওয়ার্কফ্লোতে সরাসরি পোর্ট ফরওয়ার্ডিং যোগ করেছি। এখন কোনো টানেলিং হ্যাক ছাড়াই আপনার সম্পূর্ণ প্রকল্পে কাজ করা সহজ। about:inspect এবং সেগুলি যেতে ভাল হলে সবুজ রঙে আলোকিত হবে৷
মোবাইল এমুলেশন
সামঞ্জস্যের জন্য পরীক্ষা করার জন্য আপনার কাছে সবসময় প্রয়োজনীয় ডিভাইস থাকে না, তাই না? রিমোট ডিবাগিং রিয়েল ডিভাইসগুলি আপনাকে কর্মক্ষমতা এবং স্পর্শের জন্য সর্বোত্তম অনুভূতি দিতে চলেছে, আপনি এখন ডেস্কটপে অনেকগুলি ডিভাইস বৈশিষ্ট্য বাস্তবসম্মতভাবে অনুকরণ করতে পারেন, আপনার সময় বাঁচাতে এবং আপনার পুনরাবৃত্তি লুপকে আরও দ্রুত করে তোলে৷
সম্পূর্ণ টাচ ইভেন্ট সিমুলেশন সহ স্ক্রিনের আকার, ডিভাইসপিক্সেল রেশিও এবং <meta viewport> অনুকরণ করুন
আপনি যদি পূর্ববর্তী ডিভাইস মেট্রিক্স বৈশিষ্ট্যটি দেখে থাকেন তবে এখন যা উপলব্ধ তা হল একটি বিশাল আপগ্রেড৷ নতুন মোবাইল ইমুলেশনটি বাস্তব ডিভাইসে আপনি যা দেখতে পাবেন তার কাছাকাছি বাস্তব উপস্থাপনা পেতে দলটি কঠোর পরিশ্রম করেছে। উদাহরণস্বরূপ, ওয়েবকিট ব্রাউজারগুলি একটি জটিল পাঠ্য অটোসাইজিং অ্যালগরিদম বজায় রাখে এবং প্রকৃতপক্ষে, প্রতিটি ডিভাইসে পাঠ্য অটোসাইজ করার জন্য একটি নির্দিষ্ট "ফাজ ফ্যাক্টর" থাকে যা পাঠ্যকে পাঠযোগ্য রাখতে সাহায্য করে। এমুলেশন মোডে আপনি নিশ্চিত করতে পারেন যে এই আচরণটি প্রয়োগ করা হচ্ছে এবং ফলাফলগুলি দেখুন৷
ডিভাইস পিক্সেল অনুপাত
এখন পর্যন্ত, একটি হাই-ডিপিআই ডিভাইস একটি কম-ডিপিআই ডিভাইসে কী প্রদর্শন করে তা দেখা প্রায় অসম্ভব। এখন, DevTools-এ dPR এমুলেশন আপনার ভিউকে মানিয়ে নেবে যাতে আপনি একটি গভীর DPI দৃশ্যে জুম করতে পারেন। উপরন্তু, আপনি window.devicePixelRatio , @media (-webkit-min-device-pixel-ratio: 2) , image-set( url(pic2x.jpg) 2x, …) , ইত্যাদি আপনার সেটিং প্রতিফলিত করার আশা করতে পারেন, যা আপনাকে অনুমতি দেয় বিভিন্ন dpi-নির্দিষ্ট সম্পদ লোড করা সহ আপনার অ্যাপ কীভাবে মানিয়ে নেয় তা দেখতে।
ডিভাইস এমুলেশন ব্রাউজার বৈশিষ্ট্য বা বাগ সব উপায় প্রসারিত না. সুতরাং, iOS অনুকরণ করার সময়, WebGL এখনও কাজ করবে এবং আপনি iOS 5 ওরিয়েন্টেশন জুম বাগকে আঘাত করবেন না। সেই পরিবর্তনশীলতা অনুভব করতে, ডিভাইসে যান।
<meta viewport> (এবং @viewport ) এর সঠিক অনুকরণ
width=device-width এবং minimum-scale:1.0 এর আচরণ পরীক্ষা করা পূর্বে একটি ডিভাইস-শুধুমাত্র গেম ছিল। এখন আপনি দ্রুত বিভিন্ন ভিউপোর্ট চেষ্টা করে দেখতে পারেন এবং সেগুলি কীভাবে রেন্ডার করা হয় তা পর্যবেক্ষণ করতে পারেন৷
ইভেন্ট সিমুলেশন টাচ করুন
এমুলেট টাচ স্ক্রিন সেটিং নিশ্চিত করবে যে আপনার ক্লিকগুলিকে touchstart হিসাবে ব্যাখ্যা করা হয়েছে ইত্যাদি। এছাড়াও, জুম, স্ক্রোল এবং প্যানের মতো সিন্থেটিক ইভেন্টগুলি কাজ করবে। চিমটি-জুম করতে, বিষয়বস্তুতে জুম করতে কেবল shift +টেনে আনুন বা shift +স্ক্রোল করুন। আপনি ভিউপোর্টের বাইরে কন্টেন্ট স্কেলিংয়ের একটি দুর্দান্ত ভিউ পাবেন।
সবশেষে, আপনার ইউজারজেন্ট স্পুফিং এর স্ট্যান্ডবাই (উভয় অনুরোধ শিরোনাম এবং window.navigator স্তরে), ভূ-অবস্থান, এবং ওরিয়েন্টেশন এমুলেশন আপনাকে আপনার ডিভাইসের সম্পূর্ণ কার্যকারিতা অন্বেষণ করতে দেয়।
ডিভাইস প্রিসেট
ইমুলেশন প্রিসেটগুলি আপনাকে একটি ফোন বা ট্যাবলেট নির্বাচন করতে দেয় এবং সেই ডিভাইসের জন্য প্রয়োগ করা সঠিক স্ক্রীন সাইজ, dPR , UA এবং সম্পূর্ণ টাচ ইভেন্ট এবং ভিউপোর্টও অনুকরণ করে। আপনি নির্দিষ্ট প্রিসেট চেষ্টা করতে পারেন বা সহজেই এই বৈশিষ্ট্যগুলি একে একে পরিবর্তন করতে পারেন।
DevTools সহ মোবাইল এমুলেশনের সম্পূর্ণ ডক্সের জন্য devtools.chrome.com-এ যান
ডেমো
এই সমস্ত বৈশিষ্ট্যগুলির সম্পূর্ণ ডেমো অ্যাকশনে পেতে, মোবাইলের জন্য DevTools-এ Chrome ডেভ সামিট থেকে আমার 23 মিনিটের টক দেখুন: