নতুন মাইক্রোসফট এজ (ক্রোমিয়াম) এর ডেভটুলস তালিকা

নতুন মাইক্রোসফট এজ ক্রোমিয়াম ওপেন সোর্স প্রজেক্ট দিয়ে তৈরি। ডেভেলপারদের জন্য এখানে মাইক্রোসফট এজ (ক্রোমিয়াম) এর ডেভ টুলস তালিকা দেওয়া হলো। কিছু নতুন টুল যোগ হয়েছে যা ডেভেলপারদের জন্য ওয়েবসাইট বিল্ড ও টেস্ট করা সহজ ও দ্রুত করে দেবে।

নতুন এজ (ক্রোমিয়াম) এর ডেভটুলস তালিকা

মাইক্রোসফট এজ (ক্রোমিয়াম) ডেভটুলসকে দুটি শ্রেণিতে ভাগ করা যায়:

1. Core Tools
2. Extensions

১. Core Tools

Elements Panel – ওয়েব ডেভেলপারদের জন্য ডেভটুলসের সবচেয়ে উপকারী ফিচার হচ্ছে HTML এবং CSS কে লাইভ এডিট করা। Elements panel দিয়ে HTML/CSS এডিট, অ্যাক্সেসিবিলিটি প্রোপার্টি ইন্সপেক্ট, ইভেন্ট লিস্টেনার দেখা, DOM মিউটেশন ব্রেকপয়েন্ট সেট করা যায়।

Console – কনসোল টুল সাধারণত ওয়েব পেজ সম্পর্কিত তথ্য লগ করে - জাভাস্ক্রিপ্ট, নেটওয়ার্ক রিকোয়েস্ট, সিকিউরিটি এরর। তাই সমস্যা সমাধানের প্রথম ধাপ ব্রাউজার কনসোল চেক করা। এজ ব্রাউজারে ডেডিকেটেড কনসোল প্যানেল আছে। ডেভরা ইন্টারেক্টিভ ডিবাগিং, অ্যাড-হক টেস্টিং, রানিং ওয়েব পেজের সাথে যোগাযোগের জন্য ব্যবহার করতে পারেন।

Sources Panel – জাভাস্ক্রিপ্ট ডেভেলপারদের জন্য একক সবচেয়ে উপকারী টুল - জাভাস্ক্রিপ্ট ডিবাগার। এর মাধ্যমে ডেভ রানটাইমে কোড ওপেন/এডিট করতে পারেন, ব্রেকপয়েন্ট সেট করতে পারেন, কোড ধাপে ধাপে এক্সিকিউট করতে পারেন, জাভাস্ক্রিপ্টের এক লাইন লাইন করে ওয়েবসাইটের স্টেট দেখতে পারেন।

Network Panel – নেটওয়ার্ক ও ব্রাউজার ক্যাশ থেকে রিকোয়েস্ট ও রেসপন্স মনিটর ও ইন্সপেক্ট করতে পারে।

Performance Panel – রানটাইম পারফরম্যান্স ডেটা রেকর্ড করে। রানটাইম পারফরম্যান্স মানে পেজ রান হওয়ার সময় কীভাবে পারফর্ম করছে, লোডিং সময় নয়।

Memory Panel – মেমরি সমস্যা পারফরম্যান্স ইস্যুর প্রধান কারণ। পেজ ধীরে ধীরে অনরেসপন্সিভ ও ল্যাগি হয়ে যেতে পারে। মেমরি প্যানেল সিস্টেম রিসোর্স ব্যবহার পরিমাপ করে, কোড এক্সিকিউশনের বিভিন্ন স্টেটে হিপ স্ন্যাপশট তুলনা করে।

Application Panel – ওয়েব পেজের বিভিন্ন প্রোপার্টি দেখায়। স্টোরেজ, ডাটাবেস, ক্যাশ ইন্সপেক্ট ও ম্যানেজ করতে পারে।

Security Panel – বর্তমান পেজ সিকিউর কিনা চেক করে। এর অরিজিন ইন্সপেক্ট করতে পারে। ডেভরা সিকিউরিটি ইস্যু ডিবাগ করতে এবং HTTPS সঠিকভাবে ইমপ্লিমেন্ট হয়েছে কিনা নিশ্চিত করতে পারেন।

Audits Panel – এটি স্বয়ংব্যাখ্যামূলক। ওয়েবসাইট অডিট করতে দেয়। ফলাফল ওয়েবসাইটের গুণমান বেড়াতে সাহায্য করে।

পড়ুন: Edge DevTools-এ প্রোফাইলিং সেশন শুরু করার সময় এরর।

২. Extensions

এজ এক্সটেনশন সাপোর্ট করে, কিন্তু ডেভটুলসের জন্য কোন এক্সটেনশন উপলব্ধ নয়। 써드-পার্টি এক্সটেনশন স্টোর (যেমন Chrome Web Store) থেকে ইনস্টল করতে হবে।

• এজের টপ-লেফটে থ্রি ডট বা মেনু আইকনে ক্লিক করুন > Extensions।
• Extensions পেজের বটম-লেফটে Allow extensions from other stores টগল অন করুন।
• Chrome Web Store-এ যান, ডেভটুলসের সাথে কাজ করার এক্সটেনশন খুলুন (যেমন Facebook-এর React Developer Tools)।
• Add to Chrome ক্লিক করুন, ডেভটুলস এক্সটেনশন এজে যোগ হয়ে যাবে!

সरल কথায়, এজে ক্রোম এক্সটেনশন ইনস্টল করার এটিই পদ্ধতি। কিন্তু সতর্ক থাকুন: যদি এটি পিউর ক্রোম এক্সটেনশন হয়, তবে মাইক্রোসফ্ট কিছু ক্রোমিয়াম সার্ভিস ও ফিচার সরিয়ে ফেলেছে বলে এটি কাজ করতে পারে নাও পারে।

নতুন এজ ব্রাউজার উইন্ডোজ ১০-এর পরবর্তী ফিচার আপডেটে উপলব্ধ হবে। আপনার ওয়েবসাইট বা বізনেস যদি এজের উপর নির্ভরশীল হয়, তবে আগে থেকে প্রস্তুতি নেওয়া ভালো।

বিস্তারিত জানতে Microsoft.com ভিজিট করুন।