() translation by (you can also view the original English article)
ওয়েবসাইট তৈরি এবং ডিবাগ করা এবং মোবাইল ডিভাইসের জন্য ওয়েব অ্যাপ্লিকেশন তৈরি করা বেশ ঝামেলার কাজ। ডেস্কটপের জন্য আমাদের শক্তিশালী ডিবাগিং টুল রয়েছে। বেশিরভাগ ব্রাউজারে কোন না কোন ধরণের ওয়েব ইনস্পেক্টর থাকে। কিন্তু আইফোন বা আইপডের মতো ডিভাইসের জন্য আমাদের তেমন কোন টুল নেই। এখন পর্যন্ত আর কি!
সদ্য মুক্তি পাওয়া সাফারি ৬ এবং আইওএস ৬ দিয়ে আপনি ডেস্কটপ ও মোবাইল সাফারিতে ওয়েবসাইট তৈরি ও ডিবাগ করার জন্য ওয়েব ইনস্পেক্টর ব্যবহার করতে পারবেন। সেরা নয় কি? এটি সেট আপ করার প্রক্রিয়াটি খুব সহজ। এই টিউটোরিয়ালটি অনুসরণ করুন এবং আপনার মোবাইলের আইডিভাইস ডিবাগ করার জন্য শক্তিশালী টুল একদম হাতের মুঠোয় পেয়ে যাবেন।
ওয়েবসাইট এবং ওয়েব অ্যাপ্লিকেশন তৈরিতে আধুনিক ব্রাউজার ডেভেলপার টুলগুলো খুব কাজে দেয়। ক্রোমে ডেভেলপার টুল রয়েছে। ফায়ারফক্স? ফায়ারবাগ। সাফারি? ওয়েব ইনস্পেক্টর। ওয়েব ডেভেলপমেন্টের জগতে এই সবগুলোই খুব শক্তিশালী টুল।
যাই হোক না কেন, এতদিন পর্যন্ত মোবাইল ডিভাইসে ডিবাগিং ওয়েবসাইট এবং ওয়েব অ্যাপ্লিকেশন ব্যবহার করা দুরূহ ব্যাপার ছিল। যেহেতু সাফারি এবং ক্রোম দুটোই ওয়েবকিট ইঞ্জিনের সাহায্যে চলে কাজেই ডেস্কটপ আর মোবাইল ব্রাউজারের ওয়েব লেআউট রেন্ডার করার পদ্ধতিতে অনেক মিল রয়েছে। এভাবে, বেশিরভাগ ডিজাইনার/ডেভেলপার এই ব্রাউজারগুলোর কোন একটি ব্যবহার করে তাদের ডেস্কটপে ওয়েবসাইট তৈরি বা সংশোধন করে। তারা মনে করেন ওয়েবকিট ইঞ্জিনের যে মিল রয়েছে তা থেকে মোবাইল ডিভাইসেও পেইজ একই ভাবে রেন্ডার করা যাবে,
যাই হোক, মোবাইল আর ডেস্কটপের প্ল্যাটফর্ম বেশ আলাদা। এদের মেমরি ক্যাপাসিটি, দক্ষতা, ইনপুট ডিভাইস, এবং নেটওয়ার্কের সংযোগ ক্ষমতা ভিন্ন। কাজেই এটা বেশ অপরিহার্য একটা বিষয় যে মোবাইল ডিভাইসে ব্যবহৃত ডিবাগিং টুলটিকে ডেস্কটপে তার অন্য একটি ভার্সনের সাথে তাল মিলাতে হলে অনেক বেশি দক্ষ ও কর্মক্ষম হতে হবে।
আপলের নতুন মুক্তি প্রাপ্ত সফটওয়্যার আইওএস ৬ এবং সাফারি ৬ ডেস্কটপের ব্রাউজারের ডিবাগিং টুলের অনেকগুলো ফিচার মবাইলে নিয়ে এসেছে। এই টিউটোরিয়ালে সাফারির ওয়েব ইনস্পেক্টর ব্যবহার করে মোবাইল ওয়েবসাইট ডিবাগ করার প্রক্রিয়ার সেট আপ করা দেখানো হবে।
শুরু করার আগে কম্প্যাটিবিলিটি নিয়ে কিছু কথা: উইন্ডোজ ব্যবহারকারীদের জন্য কিছুটা খারাপ সংবাদ আছে। আপনি শুধুমাত্র ম্যাক কম্পিউটার দিয়ে রিমোট ওয়েব ইনস্পেক্টর ব্যবহার করে ডিবাগ করতে পারবেন। উইন্ডোজের জন্য সাফারি ৬ কার্যকর নয়। আবার, সাফারি ৬ দিয়ে শুধুমাত্র ওএসএক্স লায়ন বা তার থেকে উন্নত ম্যাকের জন্য প্রস্তুত করা হয়েছে।
ওয়েব ইনস্পেক্টর ব্যবহারের উপায়
মোবাইল সাফারিতে ওয়েব ইনস্পেক্টর ব্যবহারের দুইটি পদ্ধতি আছে:
- সত্যিকারের ডিভাইস ব্যবহার করার প্রক্রিয়া: ইউএসবি দিয়ে আপনার কম্পিউটারে সংযুক্ত সত্যিকারের আইডিভাইস (আইফোন, আইপ্যাড ইত্যাদি) ব্যবহার করুন।
- ভার্চুয়াল ডিভাইস ব্যবহারের প্রক্রিয়া: এক্সকোডের অংশ আইওএস সিমুলেটর ব্যবহার করুন।
আমরা এই দুইটি প্রক্রিয়া নিয়েই আলাপ করবো এবং আপনি আপনার পছন্দের প্রক্রিয়াটি বেছে নিবেন।
ধাপ ১: আপনি সময়ের সাথে তাল মিলিয়ে আছেন তা নিশ্চিত হয়ে নিন
যেহেতু ওয়েব ইনস্পেক্টর দিয়ে মোবাইল ডিভাইস ডিবাগ করা একটি নতুন ফিচার, কাজেই আপনার কাছে সমস্ত নতুন নতুন সফটওয়্যার আছে কিনা নিশ্চিত হয়ে নিন।
সত্যিকারের ডিভাইস ব্যবহারের প্রক্রিয়া: একটি সত্যিকারের আইডিভাইসের সাথে ওয়েব ইনস্পেক্টর ব্যবহার করতে হলে আপনাকে নিচের বিষয়গুলো জানতে হবে:
- আইওএস ৬ চালু আছে এমন একটি আইডিভাইস
- ইউএসবি কেবল
- সাফারি ৬
- ম্যাক ওএসএক্স লায়ন (১০.৭.৪) বা তার চাইতে উন্নত মানের
ভার্চুয়াল ডিভাইস ব্যবহারের প্রক্রিয়া: আইওএস সিমুলেটরের সাথে ওয়েব ইনস্পেক্টর ব্যবহার করতে হলে আপনাকে নিচের বিষয়গুলো অনুসরণ করতে হবে:
- সাফারি ৬
- ম্যাক ওএসএক্স লায়ন (১০.৭.৪) বা তার চাইতে উচ্চ মানের
- আইওএস ৬ এসডিকে সম্বলিত এক্সকোড ৪.৫ (অ্যাপ স্টোরে পাওয়া যায়)
সফটওয়্যারের বিভিন্ন ভার্সন পরখ করে নেওয়া: আপনি আপনার আইডিভাইসে আইওএস ৬ ব্যবহার করছেন কিনা জানতে "সেটিংস > জেনারেল > অ্যাবাউট"-এ যান।
আপনি সাফারি ৬ ব্যবহার করছেন কিনা জানতে সাফারি মেনুবারে যান এবং "সাফারি > অ্যাবাউট সাফারি"-তে ক্লিক করুন।
আপনি লায়ন ব্যবহার করছেন কিনা জানতে মেনু বারে অ্যাপল লোগোতে ক্লিক করুন এবং "অ্যাবাউট দিস ম্যাক" নির্বাচন করুন।
এক্সকোডের সঠিক ভার্সনটি ব্যবহার করছেন কিনা জানতে এক্সকোড ওপেন করুন এবং "এক্সকোড > অ্যাবাউট এক্সকোড" নির্বাচন করুন
ধাপ ২: ডেভেলপার টুল চালু করুন
সাফারির ডেস্কটপ এবং মোবাইল ভার্সনে অবশ্যই ডেভেলপার টুল এবং ওয়েব ইনস্পেক্টর চালু করে নিবেন।
সত্যিকারের ডিভাইস ব্যবহারের প্রক্রিয়া: আপনি যদি একটি বাস্তব ডিভাইস ব্যবহার করেন তাহলে ইউএসবির সাহায্যে সেটিকে আপনার ম্যাকের সাথে যুক্ত করে দিন।
ভার্চুয়াল ডিভাইস ব্যবহারের প্রক্রিয়া: আপনি যদি আইওএস সিমুলেটর ব্যবহার করেন তাহলে এক্সকোড ওপেন করুন। তারপর ডক আইকনের উপর রাইট ক্লিক করে ওপেন ডেভেলপার টুল > আইওএস সিমুলেটর নির্বাচন করুন।
মোবাইল সাফারি: আপনার বাস্তব আইডিভাইস বা আইওএস সিমুলেটরের "সেটিংস > সাফারি > অ্যাডভানসড"-এ যান এবং "ওয়েব ইনস্পেক্টর" চালু করুন।
ডেস্কটপ সাফারি: আপনি যদি এখনও ব্যবহার না করে থাকেন তাহলে সাফারিতে ডেভেলপার টুল চালু করা আছে কিনা নিশ্চিত হয়ে নিন। আপনি যদি মেনু বারে "ডেভেলপ" লেখাটি দেখতে পান তাহলে বুঝবেন যে এটি চালু করা আছে।
আপনি যদি মেনু বারে "ডেভেলপ" লেখা না দেখতে পান তাহলে মেনু বারে গিয়ে "সাফারি > প্রিফারেন্স > অ্যাডভানসড"-এ ক্লিক করুন এবং "Show develop menu in menu bar" সিলেক্ট করুন।
ধাপ ৩: আপনার ওয়েবসাইট পরিদর্শন করুন
এখন যেহেতু আপনার আইওএস সিমুলেটর চালু আছে অথবা আপনার আইডিভাইসটি ইউএসবির সাহায্যে ম্যাকের সাথে সংযুক্ত আছে (কিংবা দুটোই আছে!), কাজেই এখন আপনি আপনার ওয়েবসাইটে ওয়েব ইনস্পেক্টর ব্যবহার করতে প্রস্তুত।
আপনার ম্যাকে সাফারি ওপেন করুন এবং "ডেভেলপ"-এ যান। এখন আপনি ম্যাকের সাথে সংযুক্ত যেকোনো আইডিভাইস (ভার্চুয়াল বা বাস্তব) দেখতে পাবেন। নিচের স্ক্রিনশটে দেখবেন মেন্যুতে আমার দুটো ডিভাইস রয়েছে: একটি হচ্ছে আইওএস সিমুলেটর। আরেকটি হচ্ছে ম্যাকের সাথে সংযুক্ত বাস্তব আইফোন।
ওয়েবসাইট পরীক্ষা করা শুরুর আগে ডিভাইসে মোবাইল সাফারি চালু করা থাকতে হবে। সেই সাথে যে কোন একটি ট্যাব ওয়েবসাইটে ওপেন করা থাকতে হবে। আপনার যদি মোবাইল সাফারি ওপেন করা না থাকে তাহলে আপনি "No Inspectable Application" লেখা বার্তা পাবেন।
পরীক্ষা শুরু করতে হলে মোবাইল সাফারি দিয়ে যেই পেইজটি পরীক্ষা করতে চান সেটির ইউআরএল বসিয়ে দিন এবং "ডেভেলপ" মেনু থেকে সেই সাইটটি বেছে নিন। আপনি আপনার বাস্তব আইডিভাইস বা আইওএস সিমুলেটরে বিভিন্ন সাইট পরীক্ষা করে দেখতে পারেন। যখন কোন পেইজ সিলেক্ট করবেন তখন তার উপর একটু নীল রঙের আস্তরন দেখতে পাবেন। এর মানে হচ্ছে আপনি সেটি সিলেক্ট করেছেন।
কোন একটি সাইট নির্বাচন করে সাফারির ওয়েব ইনস্পেক্টর চালু হয়ে যাবে এবং আপনাকে আপনার ওয়েবসাইট পরীক্ষা করে দেখার সুযোগ দিবে। ব্যাস!
উপসংহার
এখন যেহেতু সাফারির ওয়েব ইনস্পেক্টর আপনার হাতের মুঠোয়, কাজেই এখন ওয়েবসাইট আর ওয়েব অ্যাপ্লিকেশন তৈরি ও ডিবাগ করতে আপনি আরও দক্ষ হয়ে উঠবেন।
মোবাইল সাইট ডিবাগ করার সময় করতে পারবেন এমন আরও কিছু কাজের নমুনা দেওয়া হল:
- সিএসএস এবং এইচটিএমএলে তাৎক্ষণিক পরিবর্তন আনুন।
- জাভাস্ক্রিপ্টের খুঁটিনাটি এবং নেটওয়ার্ক রিকোয়েস্ট দেখাসহ আপনার ওয়েবসাইট/অ্যাপ্লিকেশন কেমন কাজ করছে তা দেখে নিন।
- ব্রেকপয়েন্ট এবং অন্যান্য টুল ব্যবহার করে জাভাস্ক্রিপ্ট ডিবাগ করুন।
- সতর্কীকরণ বাণী এবং ভুল হলে তা দেখানো।
- কনসোলে প্রবেশ করুন।
- ডিওএম খুঁজে দেখুন।
- সাইট স্টোরেজে প্রবেশ করুন এবং দেখুন।
টুল পেয়ে গিয়েছেন, এখন এগিয়ে যান আর কাজ শুরু করে দিন!
