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

Kayce Basques

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

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

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

কর্মক্ষমতা মেট্রিক্স কল্পনা করুন

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

চিত্র 1 । টাইমিং বিভাগে প্রথম অর্থপূর্ণ পেইন্ট

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

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

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

JS পাথ কপি করুন

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

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

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

DevTools আপনার ক্লিপবোর্ডে নীচের মত একটি অভিব্যক্তি অনুলিপি করে:

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

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

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

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

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

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

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

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

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

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

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

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

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