Improving Your Software Testing Workflow with Chrome Dev Tools: Learn Essential Features

আমরা সবাই কমবেশি DevTool এই শব্দটার সাথে পরিচিত। সব ব্রাউজারেই Dev Tool রয়েছে। এর মধ্যে Chrome DevTools সবথেকে বেশি জনপ্রিয়। গুগল ক্রোম ব্রাউজারের একটি built-in tool হচ্ছে এই Chrome DevTools.কম বেশি সব developer এটি ব্যবহার করে থাকে। রিয়েল টাইম কোড করা এবং তার রেজাল্ট দেখার সুবিধা আছে এই tool-এ। তাছাড়া একটি ওয়েব এপ্লিকেশনে যেইসব API কল হয় তাদের activity এবং পারফরম্যান্স কেমন হচ্ছে সব এই টুলস এর মাধ্যমে পর্যবেক্ষণ করা যায়। ডেভেলপমেন্ট ওয়ার্কফ্লো বা সফটওয়্যার টেস্টিং ওয়ার্কফ্লো ইমপ্রুভ করার জন্য Chrome Dev Tool একটি এসেনশিয়াল Tool.

যেকোনো web page এ যেয়ে মাউস এ Right Click করলে Inspect একটা অপশন আসে। Inspect-এ ক্লিক করলেই আমাদেরকে Dev Tool show করবে. 

তো এই টুলস টেস্টারদের কিভাবে হেল্প করবে?

Dev tool টেস্টারদের জন্য ও একটি valuable tool। বিভিন্ন ইস্যু identify করতে এবং একটা Web Application এর ফাংশনালিটি টেস্ট করতে এই tool অনেক হেল্প করে। API টেস্টিংয়ের ক্ষেত্রেও এই Dev tool টেস্টারদের হেল্প করে থাকে।

Dev Tool অনেকগুলো ট্যাবে ভাগ করা থাকে এবং একেক ট্যাব একেক ধরনের ফাংশনালিটি প্রোভাইড করে থাকে। সব ব্রাউজারেই কমবেশি সেইম ট্যাব গুলোই থেকে থাকে। আমি সবথেকে কমন এবং মোস্ট ইউজড কিছু ট্যাব নিয়ে একটা ধারণা দিব।

Emulate Device: Dev tool এ এক ধরনের ফিচার রয়েছে যা বিভিন্ন ধরনের ডিভাইস এবং স্ক্রীন সাইজ কে ইমুলেট করতে সাহায্য করে। এটা টেস্টাররা অনেক ব্যবহার করে থাকে। একটা ওয়েব এপ্লিকেশনের responsiveness বিভিন্ন ডিভাইসের জন্য টেস্ট করতে এটা ব্যবহার করা হয় এবং এটা ensure করা যায় যে অ্যাপ্লিকেশনটি বিভিন্ন ধরনের ডিভাইসের জন্য compatible কি না।

Element: প্রথমে আমরা যেই ট্যাব টি দেখতে পাই সেটা হচ্ছে Element ট্যাব। একটা web পেইজের html, css এর কোড দেখতে এবং edit করতে পারা যায় এই ট্যাবের মাধ্যমে এবং এই changes গুলো রিয়েল টাইমে দেখা যায়। Dom(Document Object Model) এর স্টাইল, এলিমেন্টের এট্রিবিউট রিয়েল টাইমে চেঞ্জ করে দেখা যায়।

Console: Console মেইনলি Javascript এর সাথে Deal করে। একটা ওয়েব পেইজেকে ইন্টারেক্টিভ করতে Javascript ব্যবহার করা হয়। ইন্টারেকটিভ এলিমেন্টেসের ইনফরমেশন দেয় Console এ দেখা যায়। Console এ Javascript লিখে কারেন্টলি ভিউয়িং পেইজের সাথে ইন্টারেক্ট করা যায় এবং জাভাস্ক্রিপ্ট এক্সিকিউট হয়েছে নাকি সেটা দেখা যায়। একটা ওয়েবসাইটে অনেক ধরনের Third-party প্লাগিন ইউজ করা হয়। অনেক সময় অনেক প্লাগিন কাজ করেনা। এই নন ওয়ার্কিং প্লাগিন এর ইস্যু গুলো console এ শো করে।

Sources: এই ট্যাবে ওয়েব সাইটে ইউজ করা সব সোর্স গুলো একসাথে দেখানো হয়। এই ট্যাব থেকে চাইলেই প্রত্যেকটা ফাইল ইন্সপেক্ট করে দেখা যায়। মাঝে মাঝে ওয়েবসাইটের লোগোর দরকার হয়। এই সোর্স ট্যাব থেকে লোগো ডাউনলোড করা যায়।

Network: এই ট্যাব সব থেকে বেশি ইউজ হয় এবং ইম্পরট্যান্ট একটা ট্যাব সবার জন্য । একটা পেজ লোড হতে যত ধরনের ফাইলস এবং এপিআই কল হয় এই সব কিছু নেটওয়ার্ক ট্যাবে দেখা যায়। প্রত্যেকটা কল এর request এবং response দেখা যায়। ইন্ডিভিজুয়াল নেটওয়ার্ক কল এর পারফরম্যান্স দেখা যায়। বিভিন্ন নেটওয়ার্ক scenario তে টেস্টও করা যায়।

Performance: মাঝে মাঝেই আমরা ওয়েবসাইটে স্লো রেসপন্স পাই। পারফরম্যান্স ট্যাব থেকে আমরা স্লো জাভাস্ক্রিপ্ট এর স্ক্রিপ্ট ডিবাগ করতে পারি। রেকর্ড বাটন প্রেস করে সাইটে যা যা অ্যাকশন এক্সিকিউট করার সেটা এক্সিকিউট করে স্টপ বাটন প্রেস করব। এরপর শো মেমোরি টাইমলাইনে ক্লিক করে সেখান থেকে ফিল্টার করে JS Memory Heap সিলেক্ট করলেই স্লো স্ক্রিপ্ট গুলো দেখতে পারবো।

Memory: মেমোরি লিকেজ চেক করা যায় এই মেমোরি ট্যাব থেকে। বাই ডিফল্ট Heap snapshot সিলেক্ট করা থাকে। Heap snapshot সিলেক্ট থাকলে এটা পুরা সাইটের একটা  snapshot প্রোভাইড করে যেখানে পেজের Js অবজেক্ট এবং রিলেটেড DOM এ কি পরিমাণ মেমোরি ডিস্ট্রিবিউশন হচ্ছে সেটার একটা overall ইনফরমেশন পাওয়া যায়।

Application: একটা এপ্লিকেশনে কি কি রিসোর্স use হয় যেমন local storage,cookies,service workers etc এসব নিয়ে ইনফরমেশন পাওয়া যায়।

Security: একটা সাইটের বেসিক সিকিউরিটি ইনফরমেশন নিয়ে আইডিয়া পাওয়া যায়। যেমন সাইটে SSL সার্টিফিকেট ইউজ হয়ে থাকলে সেটার ইনফরমেশন বা কোন ধরনের সিকিউরিটি ওয়ার্নিং আছে কি না এই সব বিষয়ে জানা যায়।

Lighthouse: এই ট্যাবটা অনেক ইন্টারেস্টিং। একটা সাইটের পারফরম্যান্স স্কোর কেমন, seo-optimized নাকি, accessibility কেমন এইগুলোর একটা রিপোর্ট জেনারেট করা যায় ডিভাইসের উপর বেইজ করে।

Performance Insights: এই ট্যাব থেকে একটা ওয়েবসাইটের পারফরম্যান্সের ইনসাইটস পাওয়া যায়। একটা Individual পেইজের run time পারফরম্যান্স কেমন এবং কোথায় কোথায় ইমপ্রুভমেন্ট লাগবে সেটার একটা লিস্ট ও প্রোভাইড করে।

প্রত্যেকটা ট্যাব-ই অনেক useful। এছাড়াও আরো অনেক ধরনের টুলস এই dev tool এ built in আছে। নিজের কাজ এর সুবিধা অনুযায়ী সেগুলো select করে নিয়ে কাজ করা যায়।মোবাইল ডিভাইস কানেক্ট করে , ব্রাউজারের developer tools ব্যবহার করেও debugging করা যায়। Android ডিভাইস Chrome DevTools-এ কানেক্ট হতে পারে অন্যদিকে iOS ডিভাইসের জন্য Safari ব্রাউজারের developer tools প্রয়োজন হবে।অনেকেই এই dev tool সম্পর্কে অবগত না। অনেক আবার এটা ব্যবহার করতে চায় না কারন এটাকে জটিল মনে হয়। সত্যি বলতে প্রথম প্রথম জটিল-ই মনে হলেও ডেইলি ব্যবহার করলে তা অনেক সহজ হয়ে উঠে।

Happy learning 😊