এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

JS পাথ কপি করুন

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

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

JS পাথ কপি করুন

চিত্র 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 এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
আরও বিকল্প ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ।
@ChromeDevTools- এ টুইট করুন।
আমাদের DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷