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

Kayce Basques

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

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

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

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

চিত্র 1 । কনসোলে শীর্ষ-স্তরের await অপারেটর ব্যবহার করা

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

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

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

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

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

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

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

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

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

   

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

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

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

   

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

CSS গ্রিড হাইলাইটিং

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

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

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

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

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

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

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

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

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

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

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

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

<text> পাওয়া গেলে DevTools একটি বার্তা ফিল্টার করে:

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

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

ইউআরএল ফিল্টার

টাইপ করুন url:<text> ফিল্টার বক্সে শুধুমাত্র সেই বার্তাগুলি দেখানোর জন্য যা একটি স্ক্রিপ্ট থেকে উদ্ভূত হয়েছে যার URL-এ রয়েছে <text> ।

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

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

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

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

চিত্র 8 । একটি HAR ফাইল আমদানি করা হচ্ছে

অ্যাপ্লিকেশন প্যানেলে প্রাকদর্শনযোগ্য ক্যাশে সংস্থান

টেবিলের নীচে সেই সংস্থানটির পূর্বরূপ দেখতে একটি ক্যাশে স্টোরেজ টেবিলের একটি সারিতে ক্লিক করুন৷

চিত্র 9 । একটি ক্যাশে সম্পদের পূর্বরূপ দেখা হচ্ছে

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

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

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

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

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

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

চিত্র 10 । ক্রোম 61-এ কভারেজ ট্যাবের একটি উদাহরণ। লাইন 4 ব্যবহৃত হিসাবে চিহ্নিত করা হয়েছে, যদিও এটি কখনই কার্যকর হয় না

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

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

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

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

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

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

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

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

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