DevTools এ নতুন কি আছে (Chrome 72)

Kayce Basques

Chrome 72-এ Chrome DevTools-এ নতুন বৈশিষ্ট্য এবং বড় পরিবর্তনগুলি আসছে:

• পারফরম্যান্স প্যানেলে পারফরম্যান্স মেট্রিক্স ভিজ্যুয়ালাইজ করুন ।
• DOM ট্রিতে টেক্সট নোড হাইলাইট করুন ।
• DOM Tree থেকে একটি DOM নোডে JS পাথ কপি করুন ।
• অডিট প্যানেল আপডেট , যার মধ্যে রয়েছে একটি নতুন অডিট যা JS লাইব্রেরি সনাক্ত করে এবং কমান্ড মেনু থেকে অডিট প্যানেল অ্যাক্সেস করার জন্য নতুন কীওয়ার্ড।

এই রিলিজ নোটগুলির ভিডিও সংস্করণ

পারফর্ম্যান্স মেট্রিক্স ভিজ্যুয়ালাইজ করুন

পৃষ্ঠা লোড রেকর্ড করার পর, DevTools এখন সময় বিভাগে DOMContentLoaded এবং First Meaningful Paint এর মতো কর্মক্ষমতা মেট্রিক্স চিহ্নিত করে।

চিত্র ১. সময় বিভাগে প্রথম অর্থপূর্ণ রঙ

টেক্সট নোড হাইলাইট করুন

যখন আপনি DOM Tree-তে একটি টেক্সট নোডের উপর কার্সার রাখেন, তখন DevTools এখন ভিউপোর্টে সেই টেক্সট নোডটি হাইলাইট করে।

চিত্র ২. একটি টেক্সট নোড হাইলাইট করা

JS পাথ কপি করুন

ধরুন আপনি একটি অটোমেশন পরীক্ষা লিখছেন যার মধ্যে একটি নোড ক্লিক করা জড়িত (হয়তো Puppeteer এর page.click() ফাংশন ব্যবহার করে) এবং আপনি দ্রুত সেই DOM নোডের একটি রেফারেন্স পেতে চান। স্বাভাবিক ওয়ার্কফ্লো হল Elements প্যানেলে যাওয়া, DOM Tree-তে নোডটিতে ডান-ক্লিক করা, Copy > Copy selector নির্বাচন করা, এবং তারপর সেই CSS নির্বাচকটিকে document.querySelector() এ পাস করা। কিন্তু যদি নোডটি Shadow DOM- এ থাকে তবে এই পদ্ধতিটি কাজ করবে না কারণ নির্বাচকটি shadow tree-এর ভেতর থেকে একটি পথ তৈরি করে।

একটি DOM নোডের রেফারেন্স দ্রুত পেতে, DOM নোডে ডান-ক্লিক করুন এবং Copy > Copy JS path নির্বাচন করুন। DevTools আপনার ক্লিপবোর্ডে একটি document.querySelector() এক্সপ্রেশন কপি করে যা নোডের দিকে নির্দেশ করে। উপরে উল্লিখিত হিসাবে, Shadow DOM এর সাথে কাজ করার সময় এটি বিশেষভাবে সহায়ক, তবে আপনি এটি যেকোনো DOM নোডের জন্য ব্যবহার করতে পারেন।

চিত্র ৩। JS পাথ কপি করুন

DevTools আপনার ক্লিপবোর্ডে নীচের মত একটি এক্সপ্রেশন কপি করে:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

অডিট প্যানেল আপডেট

অডিট প্যানেল এখন Lighthouse 3.2 চালাচ্ছে। সংস্করণ 3.2-তে Detected JavaScript libraries নামে একটি নতুন অডিট অন্তর্ভুক্ত করা হয়েছে। এই অডিট পৃষ্ঠায় JS লাইব্রেরি Lighthouse কী কী সনাক্ত করেছে তা তালিকাভুক্ত করে। আপনি এই অডিটটি আপনার প্রতিবেদনে সেরা অনুশীলন > উত্তীর্ণ অডিট বিভাগে খুঁজে পেতে পারেন।

চিত্র ৪। সনাক্ত করা জাভাস্ক্রিপ্ট লাইব্রেরি

এছাড়াও, আপনি এখন কমান্ড মেনু থেকে Lighthouse অথবা PWA টাইপ করে Audits প্যানেল অ্যাক্সেস করতে পারবেন।

চিত্র ৫। কমান্ড মেনুতে lighthouse টাইপ করা

প্রিভিউ চ্যানেলগুলি ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসেবে Chrome Canary , Dev , অথবা Beta ব্যবহার করার কথা বিবেচনা করুন। এই প্রিভিউ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, আপনাকে অত্যাধুনিক ওয়েব প্ল্যাটফর্ম API পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীদের আগে আপনার সাইটে সমস্যাগুলি খুঁজে পেতে সহায়তা করে!

Chrome DevTools টিমের সাথে যোগাযোগ করুন

DevTools সম্পর্কিত নতুন বৈশিষ্ট্য, আপডেট বা অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন।

• crbug.com এ আমাদের কাছে প্রতিক্রিয়া এবং বৈশিষ্ট্য অনুরোধ জমা দিন।
• more_vert ব্যবহার করে DevTools সমস্যা রিপোর্ট করুন। আরও বিকল্প > সাহায্য > DevTools-এ DevTools সমস্যা রিপোর্ট করুন ।
• @ChromeDevTools- এ টুইট করুন।
• DevTools YouTube ভিডিওতে নতুন কী আছে বা DevTools Tips YouTube ভিডিওগুলিতে মন্তব্য করুন।

DevTools-এ নতুন কী আছে

DevTools সিরিজে নতুন কী কী বিষয় অন্তর্ভুক্ত করা হয়েছে তার একটি তালিকা।