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

Kayce Basques

Chrome 62-এ DevTools-এ নতুন বৈশিষ্ট্য এবং পরিবর্তন আসছে:

• কনসোলে শীর্ষ-স্তরের await অপারেটরদের জন্য সমর্থন ।
• ভিউপোর্টের একটি অংশের স্ক্রিনশট এবং নির্দিষ্ট HTML নোডের স্ক্রিনশট ।
• সিএসএস গ্রিড হাইলাইটিং ।
• অবজেক্ট কোয়েরি করার জন্য একটি নতুন কনসোল API ।
• কনসোলে নেতিবাচক ফিল্টার এবং URL ফিল্টার ।
• নেটওয়ার্ক প্যানেলে HAR আমদানি করে ।
• প্রিভিউযোগ্য ক্যাশে রিসোর্স ।
• আরও অনুমানযোগ্য ক্যাশে ডিবাগিং ।
• ব্লক-স্তরের কোড কভারেজ ।

কনসোলে শীর্ষ-স্তরের অপেক্ষারত অপারেটররা

কনসোল এখন শীর্ষ-স্তরের await অপারেটরগুলিকে সমর্থন করে।

চিত্র ১. কনসোলে টপ-লেভেল await অপারেটর ব্যবহার করা

নতুন স্ক্রিনশট ওয়ার্কফ্লো

আপনি এখন ভিউপোর্টের একটি অংশের অথবা একটি নির্দিষ্ট HTML নোডের স্ক্রিনশট নিতে পারেন।

ভিউপোর্টের একটি অংশের স্ক্রিনশট

আপনার ভিউপোর্টের একটি অংশের স্ক্রিনশট নিতে:

1. পরিদর্শন করুন ক্লিক করুন অথবা Inspect Element Mode এ প্রবেশ করতে Command + Shift + C (Mac) অথবা Control + Shift + C (Windows, Linux) টিপুন।
2. কমান্ড (ম্যাক) অথবা কন্ট্রোল (উইন্ডোজ, লিনাক্স) ধরে রাখুন এবং ভিউপোর্টের যে অংশটির স্ক্রিনশট নিতে চান তা নির্বাচন করুন।
3. আপনার মাউস ছেড়ে দিন। DevTools আপনার নির্বাচিত অংশের একটি স্ক্রিনশট ডাউনলোড করে।

চিত্র ২. ভিউপোর্টের একটি অংশের স্ক্রিনশট নেওয়া

নির্দিষ্ট HTML নোডের স্ক্রিনশট

একটি নির্দিষ্ট HTML নোডের স্ক্রিনশট নিতে:

1. এলিমেন্টস প্যানেলে একটি এলিমেন্ট নির্বাচন করুন ।

   

   চিত্র ৩। এই উদাহরণে, লক্ষ্য হল নীল রঙের হেডারের একটি স্ক্রিনশট নেওয়া যেখানে " Tools লেখা আছে। মনে রাখবেন যে এই নোডটি ইতিমধ্যেই Elements প্যানেলের DOM Tree- তে নির্বাচিত।

2. কমান্ড মেনু খুলুন।

3. node টাইপ করা শুরু করুন এবং Capture node screenshot নির্বাচন করুন। DevTools নির্বাচিত নোডের একটি স্ক্রিনশট ডাউনলোড করে।

   

   চিত্র ৪. Capture node screenshot কমান্ডের ফলাফল

সিএসএস গ্রিড হাইলাইটিং

কোন এলিমেন্টকে প্রভাবিত করছে এমন CSS গ্রিড দেখতে, এলিমেন্ট প্যানেলের DOM Tree- তে থাকা এলিমেন্টের উপর কার্সার রাখুন। প্রতিটি গ্রিড আইটেমের চারপাশে একটি ড্যাশযুক্ত বর্ডার দেখা যায়। এটি কেবল তখনই কাজ করে যখন নির্বাচিত আইটেম, অথবা নির্বাচিত আইটেমের প্যারেন্টে display:grid প্রয়োগ করা থাকে।

চিত্র ৫। একটি CSS গ্রিড হাইলাইট করা

২ মিনিটেরও কম সময়ে CSS গ্রিডের মূল বিষয়গুলি শিখতে নীচের ভিডিওটি দেখুন।

হিপ অবজেক্ট অনুসন্ধানের জন্য একটি নতুন API

নির্দিষ্ট কনস্ট্রাক্টর দিয়ে তৈরি বস্তুর একটি অ্যারে ফেরত দিতে কনসোল থেকে queryObjects(Constructor) কল করুন। উদাহরণস্বরূপ:

• queryObjects(Promise) । সকল প্রতিশ্রুতি প্রদান করে।
• queryObjects(HTMLElement) । সকল HTML উপাদান ফেরত পাঠায়।
• queryObjects(foo) , যেখানে foo একটি ফাংশনের নাম। new foo() এর মাধ্যমে ইনস্ট্যান্টিয়েট করা সমস্ত অবজেক্ট ফেরত দেয়।

queryObjects() এর সুযোগ হল কনসোলে বর্তমানে নির্বাচিত এক্সিকিউশন প্রসঙ্গ। এক্সিকিউশন প্রসঙ্গ নির্বাচন করা দেখুন।

নতুন কনসোল ফিল্টার

কনসোল এখন নেতিবাচক এবং URL ফিল্টার সমর্থন করে।

নেতিবাচক ফিল্টার

<text> অন্তর্ভুক্ত যেকোনো কনসোল বার্তা ফিল্টার করতে ফিল্টার বক্সে -<text> টাইপ করুন।

চিত্র ৬। প্রথম স্টেটমেন্টটি কনসোলে one , two , three এবং four লগ করে। two লুকানো আছে কারণ -two ফিল্টার বাক্সে প্রবেশ করানো হয়েছে।

যদি <text> পাওয়া যায়, তাহলে DevTools কোনও বার্তা ফিল্টার করে:

• বার্তার টেক্সটে।
• যে ফাইলের নাম থেকে বার্তাটি এসেছে।
• স্ট্যাক ট্রেস টেক্সটে।

নেতিবাচক ফিল্টারটি -/[4-5]*ms/ এর মতো নিয়মিত এক্সপ্রেশনের সাথেও কাজ করে।

URL ফিল্টার

ফিল্টার বক্সে url:<text> টাইপ করুন যাতে শুধুমাত্র এমন স্ক্রিপ্ট থেকে আসা বার্তাগুলি দেখা যায় যার URL <text> অন্তর্ভুক্ত।

ফিল্টারটি অস্পষ্ট ম্যাচিং ব্যবহার করে। যদি <text> URL-এর কোথাও উপস্থিত হয়, তাহলে DevTools বার্তাটি দেখায়।

চিত্র ৭। URL ফিল্টারিং ব্যবহার করে শুধুমাত্র সেইসব স্ক্রিপ্ট থেকে আসা বার্তাগুলি প্রদর্শন করা যা URL-এ hymn অন্তর্ভুক্ত। স্ক্রিপ্ট নামের উপর কার্সার রেখে, আপনি দেখতে পাবেন যে হোস্ট নামের মধ্যে এই লেখাটি অন্তর্ভুক্ত রয়েছে।

নেটওয়ার্ক প্যানেলে HAR আমদানি

একটি HAR ফাইল আমদানি করতে নেটওয়ার্ক প্যানেলে টেনে আনুন।

চিত্র ৮। একটি HAR ফাইল আমদানি করা

অ্যাপ্লিকেশন প্যানেলে প্রিভিউযোগ্য ক্যাশে রিসোর্স

ক্যাশে স্টোরেজ টেবিলের একটি সারিতে ক্লিক করলে টেবিলের নীচে সেই রিসোর্সের প্রিভিউ দেখতে পাবেন।

চিত্র ৯। একটি ক্যাশে রিসোর্সের পূর্বরূপ দেখা

আরও প্রতিক্রিয়াশীল ক্যাশে ডিবাগিং

Chrome 61 এবং তার আগের সংস্করণগুলিতে, Cache API ব্যবহার করে তৈরি ক্যাশে ডিবাগ করা... মোটামুটি কঠিন। উদাহরণস্বরূপ, যখন কোনও পৃষ্ঠা একটি নতুন ক্যাশে তৈরি করে, তখন নতুন ক্যাশে দেখার জন্য আপনাকে পৃষ্ঠাটি বা DevTools ম্যানুয়ালি রিফ্রেশ করতে হবে।

Chrome 62-এ, ক্যাশে স্টোরেজ ট্যাব এখন রিয়েল-টাইমে আপডেট হয় যখনই আপনি কোনও ক্যাশে বা রিসোর্স তৈরি, আপডেট বা মুছে ফেলেন। উদাহরণের জন্য নীচের ভিডিওটি দেখুন।

নিজে চেষ্টা করে দেখতে ক্যাশে স্টোরেজ ডেমোটি দেখুন।

ব্লক-স্তরের কোড কভারেজ

Chrome 61 এবং তার আগের সংস্করণগুলিতে, কভারেজ ট্যাবটি ফাংশনের মধ্যে থাকা সমস্ত কোডকে ব্যবহৃত হিসাবে চিহ্নিত করে, যতক্ষণ পর্যন্ত ফাংশনটি কল করা হয়।

চিত্র ১০। Chrome 61-এ কভারেজ ট্যাবের একটি উদাহরণ। লাইন ৪-এ ব্যবহৃত হিসেবে চিহ্নিত করা হয়েছে, যদিও এটি কখনও কার্যকর হয় না।

Chrome 62 থেকে শুরু করে, Coverage ট্যাব এখন আপনাকে বলে যে একটি ফাংশনের মধ্যে কোন কোডটি বলা হয়।

চিত্র ১১। Chrome 62-এ কভারেজ ট্যাবের একটি উদাহরণ। লাইন ৪ অব্যবহৃত হিসাবে চিহ্নিত করা হয়েছে।

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

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

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

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

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

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

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