একটি মোবাইল-প্রথম প্রজন্মের জন্য একটি নতুন ডিভাইস মোড
আমরা ডিভাইস মোড প্রবর্তন করেছি, ডিভাইসগুলিকে অনুকরণ করার এবং প্রতিক্রিয়াশীল ডিজাইনের সাথে কাজ করার একটি উপায়, এক বছরেরও কিছু বেশি আগে। এখন এটির প্রথম বড় আপগ্রেডের সময়, ক্রোম 49 থেকে শুরু হচ্ছে। তাই, নতুন কি?
Chrome DevTools-এ মোবাইল স্টার্টিং পয়েন্ট হয়ে উঠছে। আমরা অতীতে মোবাইল অনুকরণ করার উপায় অফার করার সময়, ডেভেলপমেন্ট ডিফল্ট ডেস্কটপ ছিল। মোবাইল এমুলেশন সবসময় চালু করতে হতো। এখন যেহেতু মোবাইল সাইটের ব্যবহার অনেক জায়গায় ডেস্কটপকে ছাড়িয়ে গেছে, আমরা DevTools-এও আমাদের অবস্থান পরিবর্তন করছি।
নতুন কি?
প্রথম এবং সর্বাগ্রে, UI সুবিন্যস্ত এবং অনেক কম স্থান ব্যবহার করে। আমরা আশা করি যে নতুন ডিভাইস মোড বেশিরভাগের জন্য প্রধান ডেভেলপমেন্ট মোড হয়ে উঠবে, তাই একটি পরিষ্কার এবং সাধারণ ডিজাইন যা প্রধান DevTools নেভিগেশন বারকে প্রসারিত করে তা প্রয়োজন।
মিডিয়া প্রশ্নের উপর নতুন দ্রুত-জাম্প ডিভাইস শাসক.
উপরন্তু, আমরা ভিউপোর্ট কেন্দ্রীভূত করেছি এবং শীর্ষে একটি নতুন দ্রুত-জাম্প ডিভাইস রুলার যোগ করেছি, প্রতিক্রিয়াশীলভাবে ডিজাইন করার সময় একটি দুর্দান্ত সাহায্য, যা আপনাকে সবচেয়ে সাধারণ ডিভাইসের আকার সম্পর্কে ধারণা দেয়।
এবং অবশেষে, যখনই সম্ভব টগলের পিছনে প্রচুর বিকল্প বান্ডিল বা লুকানো হয়েছে। এই নতুন যৌগিক বিকল্পগুলি মোডগুলির মধ্যে স্যুইচ করা অনেক সহজ করে তোলে৷ নির্দিষ্ট নিয়ন্ত্রণ টগল করতে বা টুলবারের আপনার অভিজ্ঞতা কাস্টমাইজ করতে, ছোট তিনটি ডট মেনু আইকনে আঘাত করুন।
ডিফল্টরূপে প্রতিক্রিয়াশীল
প্রধান DevTools টুলবার এখন ব্রাউজার উইন্ডোর বাম দিকে প্রসারিত হয় এবং বিভিন্ন মোবাইল এবং ডেস্কটপ ডিভাইসগুলিকে অনুকরণ করার জন্য সবচেয়ে গুরুত্বপূর্ণ সরঞ্জামগুলি অন্তর্ভুক্ত করে৷ আপনি দুটি উন্নয়ন মোড মধ্যে চয়ন করতে পারেন:
- প্রতিক্রিয়াশীল
- নির্দিষ্ট ডিভাইস
উভয় মোডে, ভিউপোর্ট Chrome-এর মধ্যে তার নিজস্ব আকার পরিবর্তনযোগ্য উইন্ডোতে বসে। এটির একটি উল্লেখযোগ্য সুবিধা রয়েছে যে আপনি আপনার ব্রাউজার উইন্ডো এবং DevToolsকে আপনার পছন্দ মতো বড় করতে পারেন এবং যখন আপনি আপনার পৃষ্ঠার একাধিক মাপ পরীক্ষা করেন এবং বারবার যান তখন সেগুলিকে এদিক ওদিক যেতে না দেন৷
প্রতিক্রিয়াশীল হল একটি মোড যা আপনি সক্রিয় পুনরাবৃত্তির সময় থাকতে চান তা নিশ্চিত করতে যে আপনার সাইটটি শুধুমাত্র কয়েকটি নির্দিষ্ট ডিভাইসে নয়, সমস্ত ধরণের ডিভাইসে কাজ করে। এই মোডে, ভিউপোর্টের পাশের হ্যান্ডেলগুলি অবাধে আকার পরিবর্তনযোগ্য।
নির্দিষ্ট ডিভাইস বোঝায় যখন আপনি একটি নির্দিষ্ট ডিভাইস চয়ন করেন এবং ভিউপোর্টটিকে তার আকারে লক করেন। আপনি লঞ্চের কাছাকাছি কয়েকটি জনপ্রিয় ডিভাইসের জন্য চূড়ান্ত সংশোধন এবং স্পর্শ করতে চাইলে এটি কার্যকর হয়ে ওঠে। এই কারণেই আমরা ড্রপডাউনে সমস্ত ধরণের ডিভাইসের একটি বিশাল তালিকা দেখাচ্ছি না, তবে বর্তমানে সবচেয়ে জনপ্রিয়। আপনি যদি একটি নির্বাচন করেন, আমরা এটিকে বাস্তব চুক্তির মতো ঘনিষ্ঠভাবে আচরণ করার জন্য যথাসাধ্য চেষ্টা করি: টাচ ইভেন্ট, ব্যবহারকারী এজেন্ট, ভিউপোর্ট এবং ডিভাইস ক্রোম এবং UI (যদি উপলব্ধ থাকে) সবই অনুকরণ করা হয়।
ইন্টিগ্রেটেড রিমোট ডিবাগিং
অনুকরণ, এমনকি সেরা উপলব্ধ, শুধুমাত্র আপনি পেতে পারেন. এমন কিছু জিনিস আছে যা ইমুলেশন আজ করতে পারে না, যেমন:
- একটি বোতাম আপনার থাম্বের জন্য যথেষ্ট বড় কিনা তা পরীক্ষা করুন।
- একটি ধীর ফোনে আপনার সাইটের কর্মক্ষমতা পরীক্ষা করুন.
- নির্দিষ্ট ডিভাইসের র্যান্ডম কুইর্ক এবং সীমাবদ্ধতা ডিবাগ করুন।
এই সমস্ত পরিস্থিতি পর্যাপ্তভাবে পরীক্ষা করার জন্য, আপনাকে প্রকৃত শারীরিক ডিভাইস ব্যবহার করে পরীক্ষা, কাজ এবং ডিবাগ করতে হবে।
এখন কিছুক্ষণের জন্য, আপনি chrome://inspect ব্রাউজ করতে পারেন, USB এর মাধ্যমে আপনার ডিভাইসটি সংযুক্ত করতে পারেন এবং DevTools এর মাধ্যমে একটি দূরবর্তী ডিবাগিং সেশন খুলতে পারেন৷ কিন্তু আমরা এখন আরও এক ধাপ এগিয়ে গেছি এবং রিফ্যাক্টর করেছি কিভাবে রিমোট ডিবাগিং দেখায় এবং আচরণ করে, এটি DevTools-এর মূল অংশে এম্বেড করে। অন্য পৃষ্ঠায় ব্রাউজ করার পরিবর্তে, আপনি এখন নতুন প্রধান মেনুতে সরাসরি ডায়ালগ হিসাবে ডিভাইসগুলি পরিদর্শন করতে পারেন৷ এটি আপনার ওয়ার্কফ্লোতে শারীরিক ডিবাগিং অন্তর্ভুক্ত করাকে আরও সহজ করে তোলে – শুধু আপনার ফোন প্লাগ ইন করুন, আপনার DevTools থেকে প্রস্থান করার দরকার নেই!
প্রাক্তন এমুলেশন কন্ট্রোলের বাকিদের জন্য নতুন বাড়ি
যেহেতু মোবাইল এখন DevTools জুড়ে ডিফল্ট, তাই নেটওয়ার্ক থ্রটলিং এর মতো বৈশিষ্ট্যগুলি তাদের সঠিক হোমে চলে গেছে, এই ক্ষেত্রে নেটওয়ার্ক প্যানেল।
কিছু বৈশিষ্ট্য, যেমন সেন্সর অনুকরণ বা প্রিন্ট মিডিয়া অনুকরণ করার মতো রেন্ডারিং সেটিংস ড্রয়ারের একটি সামঞ্জস্যপূর্ণ স্থানে সরানো হয়েছে। আপনি "আরো সরঞ্জাম" এর অধীনে নতুন প্রধান মেনুতে সমস্ত অতিরিক্ত খুঁজে পেতে পারেন।
আমরা জানি এটি একটি উল্লেখযোগ্য পরিবর্তন যার সাথে আমাদের সকলকে অভ্যস্ত হতে হবে। আপনি সবেমাত্র আপডেট করা ডিভাইস মোড ডক্সে এর মধ্যে থাকা সমস্ত কিছুর সম্পূর্ণ কভারেজ পাবেন৷ আমরা টুইটারে আপনার কাছ থেকে শুনতে চাই বা আমাদের বাগ ট্র্যাকারে (হ্যাঁ, এমনকি বৈশিষ্ট্যের অনুরোধের জন্যও) আপনার যদি 140টির বেশি অক্ষরের প্রয়োজন হয়।