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

Kayce Basques

উপাদান এর শৈলী অনুলিপি

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

অনুলিপি শৈলী.

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

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

লেআউট স্থানান্তর কল্পনা করুন

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

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

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

একটি বিন্যাস স্থানান্তর.

চিত্র 2. একটি বিন্যাস পরিবর্তন।

ক্রোমিয়াম সমস্যা #961846

অডিট প্যানেলে বাতিঘর 5.1

অডিট প্যানেল এখন Lighthouse 5.1 চালাচ্ছে। নতুন অডিট অন্তর্ভুক্ত:

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

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

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

লাইটহাউস 5.1 এর নোড এবং CLI সংস্করণে 3টি নতুন প্রধান বৈশিষ্ট্য রয়েছে যা চেক আউট করার যোগ্য:

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

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

আপনি যদি আপনার OS-এর অন্ধকার থিম ব্যবহার করেন, তাহলে DevTools এখন স্বয়ংক্রিয়ভাবে নিজস্ব গাঢ় থিমে স্যুইচ করে।

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

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

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

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

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

নেটওয়ার্ক প্যানেলের সাইজ কলাম এখন বলে (prefetch cache) যখন প্রিফেচ ক্যাশে থেকে কোনো রিসোর্স লোড করা হয়। প্রিফেচ হল একটি নতুন-ইশ ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য যা পরবর্তী পৃষ্ঠা লোডের গতি বাড়ানোর জন্য। আমি কি ব্যবহার করতে পারি... রিপোর্ট করে যে এটি জুলাই 2019 পর্যন্ত বিশ্বের 83.33% ব্রাউজারে সমর্থিত।

আকারের কলামটি দেখায় যে সংস্থানগুলি প্রিফেচ ক্যাশে থেকে এসেছে৷

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

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

ক্রোমিয়াম সমস্যা #935267

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

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

একটি বস্তু পরিদর্শন করার সময়, কনসোল এখন '#রঙ'-এর মতো ব্যক্তিগত ক্ষেত্রগুলি দেখায়।

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

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

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

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

নতুন বিজ্ঞপ্তি এবং পুশ বার্তা প্যান।

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

ক্রোমিয়াম সমস্যা #927726

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

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

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

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

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

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

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