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

Kayce Basques

এলিমেন্টের স্টাইল কপি করুন

DOM Tree- এর একটি নোডে ডান-ক্লিক করে DOM নোডের CSS আপনার ক্লিপবোর্ডে কপি করুন।

চিত্র ১. উপাদান শৈলী কপি করুন।

অনুপ্রেরণার জন্য অ্যাডাম আরগাইল এবং ভিসবাগকে ধন্যবাদ।

লেআউট পরিবর্তনগুলি কল্পনা করুন

ধরুন আপনি আপনার পছন্দের ওয়েবসাইটে একটি সংবাদ নিবন্ধ পড়ছেন। পৃষ্ঠাটি পড়ার সময়, বিষয়বস্তুটি এদিক-ওদিক লাফালাফি করার কারণে আপনি আপনার স্থান হারাচ্ছেন। এই সমস্যাটিকে লেআউট শিফটিং বলা হয়। এটি সাধারণত তখন ঘটে যখন ছবি এবং বিজ্ঞাপন লোড হওয়া শেষ হয়। পৃষ্ঠাটিতে ছবি এবং বিজ্ঞাপনের জন্য কোনও স্থান সংরক্ষণ করা হয়নি, তাই ব্রাউজারকে তাদের জন্য জায়গা তৈরি করার জন্য অন্যান্য সমস্ত সামগ্রী নীচে স্থানান্তর করতে হবে। সমাধান হল প্লেসহোল্ডার ব্যবহার করা।

DevTools এখন আপনাকে লেআউট স্থানান্তর সনাক্ত করতে সাহায্য করতে পারে:

1. কমান্ড মেনু খুলুন।
2. Rendering টাইপ করা শুরু করুন।
3. Show Rendering কমান্ডটি চালান।
4. লেআউট শিফট রিজিওনস চেকবক্সটি সক্রিয় করুন। আপনি যখন কোনও পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করেন, তখন লেআউট শিফটগুলি নীল রঙে হাইলাইট করা হয়।

চিত্র ২। লেআউটের পরিবর্তন।

ক্রোমিয়াম সমস্যা #৯৬১৮৪৬

অডিট প্যানেলে লাইটহাউস ৫.১

অডিট প্যানেল এখন লাইটহাউস ৫.১ চালাচ্ছে। নতুন অডিটগুলির মধ্যে রয়েছে:

• একটি বৈধ apple-touch-icon প্রদান করে । একটি iOS হোমস্ক্রিনে একটি PWA যোগ করা যেতে পারে কিনা তা পরীক্ষা করে।
• অনুরোধের সংখ্যা এবং ফাইলের আকার কম রাখুন । ডকুমেন্ট, স্ক্রিপ্ট, স্টাইলশিট, ছবি ইত্যাদির মতো বিভিন্ন বিভাগের জন্য মোট নেটওয়ার্ক অনুরোধের সংখ্যা এবং ফাইলের আকার রিপোর্ট করে।
• সর্বোচ্চ সম্ভাব্য প্রথম ইনপুট বিলম্ব । ব্যবহারকারীর প্রথম পৃষ্ঠার ইন্টারঅ্যাকশন এবং সেই ইন্টারঅ্যাকশনের প্রতি ব্রাউজারের প্রতিক্রিয়ার মধ্যে সর্বাধিক সম্ভাব্য সময় পরিমাপ করে। মনে রাখবেন যে এই মেট্রিকটি আনুমানিক ইনপুট লেটেন্সি মেট্রিককে প্রতিস্থাপন করে। সর্বোচ্চ সম্ভাব্য প্রথম ইনপুট বিলম্ব আপনার পারফরম্যান্স বিভাগের স্কোরের সাথে সম্পর্কিত নয়।

চিত্র ৩। নতুন অডিট প্যানেল UI।

Lighthouse 5.1 এর Node এবং CLI সংস্করণগুলিতে 3টি নতুন প্রধান বৈশিষ্ট্য রয়েছে যা দেখার মতো:

• পারফরম্যান্স বাজেট । পৃষ্ঠাগুলির সংখ্যা এবং ফাইলের আকার কত বেশি হওয়া উচিত নয় তা নির্দিষ্ট করে সময়ের সাথে সাথে আপনার সাইটের পতন রোধ করুন।
• প্লাগইন । আপনার নিজস্ব কাস্টম অডিট দিয়ে লাইটহাউস প্রসারিত করুন।
• স্ট্যাক প্যাক । নির্দিষ্ট প্রযুক্তি স্ট্যাকের জন্য তৈরি অডিট যোগ করুন। ওয়ার্ডপ্রেস স্ট্যাক প্যাকটি প্রথমে পাঠানো হয়েছিল। রিঅ্যাক্ট এবং এএমপি স্ট্যাক প্যাকগুলি তৈরির কাজ চলছে।

OS থিম সিঙ্ক হচ্ছে

আপনি যদি আপনার অপারেটিং সিস্টেমের ডার্ক থিম ব্যবহার করেন, তাহলে DevTools এখন স্বয়ংক্রিয়ভাবে তার নিজস্ব ডার্ক থিমে চলে যাবে।

ব্রেকপয়েন্ট এডিটর খোলার জন্য কীবোর্ড শর্টকাট

ব্রেকপয়েন্ট এডিটর খুলতে সোর্স প্যানেলের এডিটরে ফোকাস করার সময় Control + Alt + B অথবা Command + Option + B (Mac) টিপুন। লগপয়েন্ট এবং কন্ডিশনাল ব্রেকপয়েন্ট তৈরি করতে ব্রেকপয়েন্ট এডিটর ব্যবহার করুন।

চিত্র ৪। ব্রেকপয়েন্ট এডিটর ।

নেটওয়ার্ক প্যানেলে প্রিফেচ ক্যাশে

নেটওয়ার্ক প্যানেলের আকার কলামে এখন (prefetch cache) লেখা আছে যখন prefetch cache থেকে কোনও রিসোর্স লোড করা হয়েছিল। Prefetch হল পরবর্তী পৃষ্ঠা লোড দ্রুত করার জন্য একটি নতুন ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য। আমি কি ব্যবহার করতে পারি... রিপোর্ট করে যে জুলাই ২০১৯ পর্যন্ত এটি বিশ্বব্যাপী ৮৩.৩৩% ব্রাউজারে সমর্থিত।

চিত্র ৫। আকার কলামটি দেখায় যে prefetch2.html এবং prefetch2.css (prefetch cache) থেকে এসেছে।

এটি ব্যবহার করে দেখতে Prefetch ডেমো দেখুন।

ক্রোমিয়াম সমস্যা #৯৩৫২৬৭

বস্তু দেখার সময় ব্যক্তিগত বৈশিষ্ট্য

কনসোল এখন তার অবজেক্ট প্রিভিউতে প্রাইভেট ক্লাস ফিল্ড দেখায়।

চিত্র ৬। বাম দিকের Chrome এর পুরাতন সংস্করণটি বস্তুটি পরিদর্শন করার সময় #color ক্ষেত্রটি দেখায় না, যেখানে ডানদিকের নতুন সংস্করণটি দেখায়।

অ্যাপ্লিকেশন প্যানেলে বিজ্ঞপ্তি এবং পুশ বার্তা

অ্যাপ্লিকেশন প্যানেলের ব্যাকগ্রাউন্ড সার্ভিসেস বিভাগটি এখন পুশ মেসেজ এবং নোটিফিকেশন সমর্থন করে। পুশ মেসেজ তখন ঘটে যখন কোনও সার্ভার কোনও পরিষেবা কর্মীর কাছে তথ্য পাঠায়। বিজ্ঞপ্তি তখন আসে যখন কোনও পরিষেবা কর্মী বা পৃষ্ঠা স্ক্রিপ্ট ব্যবহারকারীকে তথ্য দেখায়।

Chrome 76 এর ব্যাকগ্রাউন্ড ফেচ এবং ব্যাকগ্রাউন্ড সিঙ্ক বৈশিষ্ট্যগুলির মতো, একবার আপনি রেকর্ডিং শুরু করলে, এই পৃষ্ঠায় পুশ বার্তা এবং বিজ্ঞপ্তিগুলি 3 দিনের জন্য রেকর্ড করা হয়, এমনকি পৃষ্ঠাটি বন্ধ থাকা অবস্থায়ও, এমনকি যখন Chrome বন্ধ থাকে।

চিত্র ৭। অ্যাপ্লিকেশন প্যানেলে নতুন পুশ বার্তা এবং বিজ্ঞপ্তি প্যানেল।

ক্রোমিয়াম সমস্যা #৯২৭৭২৬

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

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

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

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

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

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

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