রিমোট ডিবাগার হিসেবে weinre

Weinre , Apache foundation এর একটি প্রকল্প যার পূর্ণ অর্থ দাঁড়ায় WEb INspector REmote.এটা তার নামের মতই অর্থ বহন করে-যা কিনা ফায়ারবাগ অথবা ওয়েব-ইন্সপেক্টর এর সাথেই থাকে কিন্তু একসাথে  তা ওয়েবপেইজ এর ডিবাগ ও রান করতে পারে। যদি আপনি কখনও এইধরনের ফায়ারফক্স টুলস অথবা ক্রম টুলস ব্যাবহার করে থাকেন তাহলে Weinre আপনার ব্যাবহারের দ্বিতীয় নির্বাচিত টুলস হওয়া উচিৎ।

 Weinre সেট করাঃ

যেহেতু weiner,Node.js এর উপরে রান করে তাই প্রথম পোর্ট কল হিসেবে Node.js. ইন্সটল করতে হবে। Node.js একটি বানডেল হিসেবে আসে এবং আমরা এখন এটাই ইন্সটল করতে ব্যাবহার করব। টার্মিনাল ওপেন করে নিম্নোক্ত কমান্ড লিখুনঃ

 npm -g install weinre

নোটঃ -g flag weiner কে global Node.js module হিসেবে ইন্সটল করে কমান্ডলাইন এর সুন্দর ব্যাবহার এর জন্য কিন্তু লিনাক্স আর ম্যাক  এ শুধু মাত্র তার মানে উপরের কমান্ডগুলো sudo কমান্ড হিসেবে ব্যাবহার করতে হবে ।

ইন্সটল কমপ্লিট হলে আমরা weiner ব্যাবহার করতে প্রস্তুত হব ।

Weinre স্টার্ট করাঃ 

weiner সার্ভার চালু করতে নিচের কমান্ডগুলো লিখুনঃ

$ weinre --boundHost 127.0.0.1 --httpPort 9090

এইখানে দুটি প্যারামিটার হোসট এবং পোর্ট সার্ভার কে নির্দেশ করে ।একবার সার্ভার স্টার্ট হওয়ার পর নিচের লাইনগুলো টার্মিনালে দেখাবেঃ

2013-01-28T10:42:40.498Z weinre: starting server at http://127.0.0.1:9090

ইহার সাথে ব্রাউজার ওপেন করেন (নোটঃWeinre এর UI আসলে ওয়েবকিট বেসড ব্রাউজার এর জন্য যা কিনা অন্য ব্রাউজার এ  কাজ করতে পারে,তাই ক্রম ইউজ করার পরামর্শ  দেওয়া হয় ) এবং http://127.0.0.1:9090. এ পয়েন্ট করুন। যখন পেইজ টি লোড হবে তখন ডিবাগ ক্লাইনট ইউসার ইন্টারফেস এ ক্লিক করুন । এই UI অপশন থেকে আপনারা কানেক্টেড ক্লাইনটস দেখতে পাবেন আসলে একটি যেটি কিনা ওয়েব ইন্সপেক্টর এর বর্তমান পর্যায়।আরও দেখতে পাবেন সার্ভার এর কিছু সাধারন properties এবং  আপনার টার্গেট।

Weinre টার্গেট সেট করাঃ 

Weiner এ টার্গেট গুলো হল আপনি জেই ওয়েবপেইজ অথবা এপ্লিকেশন ডিবাগ করত চান সেগুলো। এবং আপনার টার্গেটকে কানেক্ট করতে আপনার অ্যাপ এর ঈক্তি নির্দিষ্ট স্থানে একটি ওয়ান লাইনার অ্যাড করতে হবে ।উদাহরন স্বরূপঃ

আপনি যদি weiner  ইউস কর gaia তে ক্যালেন্ডার অ্যাপটি ডিবাগ করতে চান তাহলে আপনাকে প্রথমে যে কাজটি করতে হবে তা হলঃ

open giaia>apps>calender>index.html ওপেন করে clong body tag এর আগে নিম্নোক্ত লাইন লিখতে হবেঃ

<script src="http://127.0.0.1:9090/target/target-script-min.js#anonymous"></script>

সাধারনত আপনাকে এই কাজ গুলো করতে হবে আপনার টার্গেট সেট করার জন্য, কিন্তু ফায়ারফক্স ওএস এর জন্য আর একটি কাজ করতে হবে ।Gaia একধরনের Contact Security Policy ব্যাবহার করে এবং ওইটা অনুসারে স্ক্রিপ্ট কে নির্দেশ করা হয় যেন তা একবারের জন্যই same origin থেকে অ্যাপ লোড করতে পারে। তাই এখন যদি আমরা ক্যালেন্ডার লোড করতে চেষ্টা করি তাহলে উপরের স্ক্রিপ্টটি ব্লক হয়ে যাবে যতক্ষণ না আপনি কোন নির্দিষ্ট অরিজিন থেকে তা লোড না করবেন।

ইহা হতে পরিত্রানের জন্য আমাদের CSP টেম্পোরারিলি বন্ধ করতে হবে। এটা করার জন্য ওপেন করতে হবেঃ

 gaia -> build -> preferences.js এবং ২৪ নাম্বার লাইন এ নিচের লাইন যুক্ত করুনঃ

prefs.push(["security.csp.enable", false]);

Weinre এবং B2G Desktop দিয়ে ডিবাগিংঃ

আমাদের ডেস্কটপ ওপেন করার আগে Gaia প্রোফাইল তৈরি করতে  হবেঃ

DEBUG=1 make

যখন প্রোফাইল তৈরি হবে তখন B2G ডেস্কটপ ওপেন করুনঃ

/Applications/B2G.app/Contents/MacOS/b2g-bin -profile /Users/username/mozilla/projects/gaia/profile

যখন B2G ওপেন হবে তখন স্ক্রিন আনলক করে ক্যালেন্ডার অ্যাপ এ যেতে হবে। ক্যালেন্ডার অ্যাপ এর আইকন টি টেপ করে weiner debug client UI এ নজর রাখতে হবে । যখন অ্যাপ টি আপনাকে লঞ্চ করবে আপনি আপনার টার্গেট দেখতে পাবেন ।এরপর আমরা আমাদের কোড যাচাই শুরু করব তাই ইলিমেনট ট্যাব ওপেন করে html এবং CSS inspector ওপেন করুন।এরপর আপনি আপনার html ও CSS কোড গুলো এডিট করতে পারবেন ।আপনি চাইলে এখানে নতুনভাবে স্টাইল এড করতে পারেন element.stule block অথবা  amending existing rules এর দ্বারা । আপনি দেখবেন আপনি computed style এর জন্য অনুমতি পাবেন এবং তার সাথে সাথে কারেন্ট ইলিমেনট এর matrics পার্ট ও।

 

 Console দিয়ে কাজ করাঃ

আমাদের কাছে পরবর্তী ট্যাব এর নাম হল Console tab.এখানে আপনি সরাসরি জাভাস্ক্রিপ্ট এর কোড গুলো রান করতে পারেন আর চাইলে তা অ্যাপ এর পক্ষে বা বিরুদ্ধে রান করতে পারেন ।Console tab  কে প্রদর্শন করাতে হলে ডায়ালার এর কল লগ পোরশন  টার্গেট করতে হবে এবং ওখানকার রেকর্ড এর সাথে যোগাযোগ করতে হবে ।প্রথমে আপনাকে স্ক্রিপ্ট সোর্স কে ডায়ালার এ নিতে  হবে যা কিনা-

gaia > apps > communication > dailar>index.html

 

এটা এড করার পর প্রোফাইল তৈরি করে ডায়ালার লঞ্চ করতে হবে ।ডায়ালার ওপেন করে কল লগ আইকন এর উপর ক্লিক করতে হবে , বাম পাশে। এখন কল লগে কিছু ডামি ডাটা দিয়ে দেওয়া থাকে ।কিন্তু চলুন নিজেদের টা তৈরি করি।weiner এর Console tab এ ক্লিক করে নিম্নোক্ত লাইন গুলো লিখে এনটার চাপতে হবেঃ

RecentsDBManager.deleteAll();

আমাদের কোড গুলো কাজ করছে কিনা তা দেখতে হলে আমাদের কল লগ রিফ্রেশ করতে হবেঃ:

Recents.refresh();

এখন দেখা যাচ্ছে যে আমরা যা লিপিভুক্ত করলাম তা আমাদের স্টোরেজ এ IndexedDB তে এসেছে।

এবং তা কল লগ ভিউ তে দেখা যাচ্ছে ।আপনি যদি খেয়াল করেন তাহলে দেখে থাকবেন আর একটি অসাধারন ফিচার এড হয়েছে যার নাম অটো-কমপ্লিট যা আপনার ডেভেলপমেন্ট কে আরও গতি দান করবে।

// Dummy entry
var recentCall = {
    type: 'incoming-refused',
    number: '555-6677',
    date: new Date()
};
RecentsDBManager.add(recentCall);
Recents.refresh();

এখন আপনারা দেখতে পাচ্ছেন যে স্টোরেজে এন্ট্রি লিপিবদ্ধ করা হয়েছে IndexedDB নাম দিয়ে এবং তা কল লগে ভিউ করা হয়েছে।এখানে খুব খেয়াল করে দেখলে দেখা যাবে যে এখানে একটি খুব উল্লেখযোগ্য অপশন চালু হয়েছে  অটো - কমপ্লিট নামের যা আপনার পরবর্তী ডেভেলপমেন্ট এর গতি বৃদ্ধি করবে।

 ডিভাইসে ডিবাগিং করাঃ 

উপরে কিভাবে weiner ও B2G ব্যাবহার করতে হয় তা আলোকপাত করা হয়েছে।কিন্তু weiner  ব্যাবহার করে কোড যাচাই আর ডিবাগ খোজার বিষয়টি একই শুধুমাত্র আপনার বেবরিত আই.পি এড্রেস ছাড়া ।যখন আপনি আপনার ডিভাইস এ ডিবাগ করতে যাবেন, আপনার প্রথমে আপনার হোসট কম্পিউটার এর আই.পি এড্রেস জানতে হবে।তখন আপনি weiner স্টার্ট করতে পারেন এই আই.পি কে bounhost হিসেবে, তাছাড়া  আপনার টার্গেট ডকুমেন্ট এর স্ক্রিপ্ট শহ এটা কে আই.পি হিসেবেও ব্যাবহার করতে পারবেন।

ম্যাক আর লিনাক্সে  এড্রেস টি পাবেন ifconfig ব্যাবহার করে আর উইন্ডোজ এ হল

ipconfig.

আপনি যখন নতুন IP পাবেন তখন চলমান weiner বন্ধ করে দিন আর নিচের কাজটি করুনঃ

weinre --boundHost 192.168.1.1 --httpPort 9090:

এরপর আপনার টার্গেট ডকুমেন্ট যুক্ত করুনঃ

<script src="http://192.168.1.1:9090/target/target-script-min.js#anonymous"></script>

আপনার Gaia প্রোফাইল বানান আর ডিভাইসে যুক্ত করুন নিম্নোক্ত পদ্ধতিতঃ:

make install-gaia

আপনার টার্গেট অ্যাপ্লিকেশন চালু করুন আর হয়ে গেল আপনার কাজ!

ডকুমেন্ট ট্যাগ এবং অবদানকারী

ট্যাগ: 
 Contributors to this page: chrisdavidmills, laila_mustari, Didarul
 সর্বশেষ হালনাগাদ করেছেন: chrisdavidmills,