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

Kayce Basques

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

• একটি DOM নোড হাইলাইট করতে একটি লাইভ এক্সপ্রেশনের উপর কার্সার রাখুন।
• DOM নোডগুলিকে গ্লোবাল ভেরিয়েবল হিসেবে সংরক্ষণ করুন
• HAR আমদানি ও রপ্তানিতে এখন ইনিশিয়েটর এবং অগ্রাধিকার তথ্য
• প্রধান মেনু থেকে কমান্ড মেনু অ্যাক্সেস করুন
• পিকচার-ইন-পিকচার ব্রেকপয়েন্ট
• (বোনাস টিপস) কোনও এলিমেন্টের ইভেন্টগুলি কীভাবে চালু হয় তা দেখার জন্য কনসোলে monitorEvents() চালান।

এই পৃষ্ঠার ভিডিও সংস্করণটি পড়ুন, অথবা দেখুন:

একটি DOM নোড হাইলাইট করতে একটি লাইভ এক্সপ্রেশনের উপর কার্সার রাখুন।

যখন একটি লাইভ এক্সপ্রেশন একটি DOM নোডের মূল্যায়ন করে, তখন ভিউপোর্টে সেই নোডটি হাইলাইট করতে লাইভ এক্সপ্রেশন ফলাফলের উপর কার্সার রাখুন।

চিত্র ১. ভিউপোর্টে নোড হাইলাইট করার জন্য একটি লাইভ এক্সপ্রেশন ফলাফলের উপর ঘোরানো

DOM নোডগুলিকে গ্লোবাল ভেরিয়েবল হিসেবে সংরক্ষণ করুন

একটি DOM নোডকে গ্লোবাল ভেরিয়েবল হিসেবে সংরক্ষণ করতে, কনসোলে একটি এক্সপ্রেশন চালান যা একটি নোডের মূল্যায়ন করে, ফলাফলটিতে ডান-ক্লিক করুন এবং তারপর Store as global ভেরিয়েবল নির্বাচন করুন।

চিত্র ২। কনসোলে গ্লোবাল ভেরিয়েবল হিসেবে সংরক্ষণ করুন

অথবা, DOM Tree- এর নোডে ডান-ক্লিক করুন এবং Store as global variable নির্বাচন করুন।

চিত্র ৩। DOM ট্রিতে গ্লোবাল ভেরিয়েবল হিসেবে সংরক্ষণ করুন

HAR আমদানি ও রপ্তানিতে এখন ইনিশিয়েটর এবং অগ্রাধিকার তথ্য

আপনি যদি সহকর্মীদের সাথে নেটওয়ার্ক লগ নির্ণয় করতে চান, তাহলে আপনি নেটওয়ার্ক অনুরোধগুলি একটি HAR ফাইলে রপ্তানি করতে পারেন।

চিত্র ৮। একটি HAR ফাইলে নেটওয়ার্ক অনুরোধ রপ্তানি করা

ফাইলটি নেটওয়ার্ক প্যানেলে আবার আমদানি করতে, কেবল এটি টেনে আনুন এবং ছেড়ে দিন।

যখন আপনি একটি HAR ফাইল এক্সপোর্ট করেন, তখন DevTools এখন HAR ফাইলে ইনিশিয়েটার এবং অগ্রাধিকার তথ্য অন্তর্ভুক্ত করে। যখন আপনি HAR ফাইলগুলি DevTools-এ আবার ইম্পোর্ট করেন, তখন ইনিশিয়েটার এবং অগ্রাধিকার কলামগুলি এখন পূরণ হয়ে যায়।

_initiator ক্ষেত্রটি রিসোর্সটি কেন অনুরোধ করা হয়েছিল তার আরও প্রসঙ্গ প্রদান করে। এটি অনুরোধ টেবিলের ইনিশিয়েটার কলামে ম্যাপ করে।

চিত্র ৯। সূচনাকারী কলাম

আপনি Shift কী ধরে রাখতে পারেন এবং একটি অনুরোধের উপর কার্সার রেখে এর ইনিশিয়েটার এবং নির্ভরতা দেখতে পারেন।

চিত্র ১০। ইনিশিয়েটর এবং নির্ভরতা দেখা

_priority ফিল্ডটি ব্রাউজারটি রিসোর্সে কোন অগ্রাধিকার স্তর নির্ধারণ করেছে তা নির্দেশ করে। এটি অনুরোধ টেবিলের অগ্রাধিকার কলামে ম্যাপ করে, যা ডিফল্টরূপে লুকানো থাকে।

চিত্র ১১। অগ্রাধিকার কলাম

অনুরোধ টেবিলের হেডারে ডান-ক্লিক করুন এবং অগ্রাধিকার কলামটি দেখানোর জন্য অগ্রাধিকার নির্বাচন করুন।

চিত্র ১২। অগ্রাধিকার কলামটি কীভাবে দেখানো হবে

প্রধান মেনু থেকে কমান্ড মেনু অ্যাক্সেস করুন

DevTools প্যানেল, ট্যাব এবং বৈশিষ্ট্যগুলি দ্রুত অ্যাক্সেস করার জন্য কমান্ড মেনু ব্যবহার করুন।

চিত্র ১৩। কমান্ড মেনু

আপনি এখন প্রধান মেনু থেকে কমান্ড মেনু খুলতে পারেন। প্রধান মেনুতে ক্লিক করুন। বোতাম টিপুন এবং রান কমান্ড নির্বাচন করুন।

চিত্র ১৪। প্রধান মেনু থেকে কমান্ড মেনু খোলা

পিকচার-ইন-পিকচার ব্রেকপয়েন্ট

পিকচার-ইন-পিকচার হল একটি নতুন পরীক্ষামূলক API যা একটি পৃষ্ঠাকে ডেস্কটপের উপর একটি ভাসমান ভিডিও উইন্ডো তৈরি করতে সক্ষম করে।

Event Listener Breakpoints প্যানে enterpictureinpicture , leavepictureinpicture এবং resize চেকবক্সগুলি সক্রিয় করুন যাতে এই picture-in-picture ইভেন্টগুলির মধ্যে একটি চালু হলেই বিরতি দেওয়া যায়। DevTools হ্যান্ডলারের প্রথম লাইনে বিরতি দেয়।

চিত্র ১৬। ইভেন্ট লিসেনার ব্রেকপয়েন্ট প্যানে পিকচার-ইন-পিকচার ইভেন্ট

(বোনাস টিপস) কোনও এলিমেন্টের ইভেন্টগুলি কীভাবে চালু হয় তা দেখার জন্য কনসোলে monitorEvents() চালান।

ধরুন আপনি একটি বোতাম ফোকাস করার পর এবং R , E , D টিপে তার চারপাশে একটি লাল বর্ডার যুক্ত করতে চান, কিন্তু আপনি জানেন না কোন ইভেন্টে শ্রোতাদের যুক্ত করতে হবে। কনসোলে সমস্ত এলিমেন্টের ইভেন্ট লগ করতে monitorEvents() ব্যবহার করুন।

1. নোডের একটি রেফারেন্স পান।

   

   চিত্র ১৭. নোডের রেফারেন্স পেতে স্টোরকে গ্লোবাল ভেরিয়েবল হিসেবে ব্যবহার করা

2. monitorEvents() এর প্রথম আর্গুমেন্ট হিসেবে নোডটি পাস করুন।

   

   চিত্র ১৮। monitorEvents() এ নোডটি পাস করা হচ্ছে

3. নোডের সাথে ইন্টারঅ্যাক্ট করুন। DevTools নোডের সমস্ত ইভেন্ট কনসোলে লগ করে।

   

   চিত্র ১৯। কনসোলে নোডের ইভেন্টগুলি

কনসোলে ইভেন্ট লগ করা বন্ধ করতে unmonitorEvents() কল করুন।

unmonitorEvents(temp1);

যদি আপনি শুধুমাত্র নির্দিষ্ট ইভেন্ট বা ধরণের ইভেন্ট নিরীক্ষণ করতে চান, তাহলে monitorEvents() এর দ্বিতীয় আর্গুমেন্ট হিসেবে একটি অ্যারে পাস করুন:

monitorEvents(temp1, ['mouse', 'focus']);

mouse টাইপটি DevTools কে মাউস-সম্পর্কিত সমস্ত ইভেন্ট, যেমন mousedown এবং click , লগ করতে বলে। অন্যান্য সমর্থিত টাইপগুলি হল key , touch এবং control ।

কনসোল থেকে কল করতে পারেন এমন অন্যান্য কার্যকরী ফাংশনের জন্য কমান্ড লাইন রেফারেন্স দেখুন।

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

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

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

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

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

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

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