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

Kayce Basques

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

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

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

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

ভিউপোর্টে নোড হাইলাইট করার জন্য একটি লাইভ এক্সপ্রেশন ফলাফলের উপর হোভার করা।

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

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

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

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

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

অথবা, DOM Tree- এর নোডটিতে ডান-ক্লিক করুন এবং গ্লোবাল ভেরিয়েবল হিসাবে Store নির্বাচন করুন।

DOM Tree-এ গ্লোবাল ভেরিয়েবল হিসেবে স্টোর করুন।

চিত্র 3 । DOM Tree-এ গ্লোবাল ভেরিয়েবল হিসেবে স্টোর করুন

এইচএআর আমদানি ও রপ্তানিতে এখন সূচনাকারী এবং অগ্রাধিকার তথ্য

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

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

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

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

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

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

সূচনাকারী কলাম।

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

এছাড়াও আপনি Shift ধরে রাখতে পারেন এবং এটির সূচনাকারী এবং নির্ভরতা দেখার অনুরোধের উপর হোভার করতে পারেন।

সূচনাকারী এবং নির্ভরতা দেখা।

চিত্র 10 । সূচনাকারী এবং নির্ভরতা দেখা

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

অগ্রাধিকার কলাম।

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

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

কীভাবে অগ্রাধিকার কলাম দেখাবেন।

চিত্র 12 । কীভাবে অগ্রাধিকার কলাম দেখাবেন

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

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

কমান্ড মেনু।

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

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

প্রধান মেনু থেকে কমান্ড মেনু খোলা।

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

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

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

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

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

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

(বোনাস টিপ) কোনো উপাদানের ইভেন্ট ফায়ার দেখতে কনসোলে মনিটর ইভেন্টস() চালান

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

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

    নোডের একটি রেফারেন্স পেতে 'গ্লোবাল ভেরিয়েবল হিসাবে স্টোর' ব্যবহার করে।

    চিত্র 17 । নোডের একটি রেফারেন্স পেতে গ্লোবাল ভেরিয়েবল হিসাবে স্টোর ব্যবহার করে

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

    ইভেন্টস() এ নোড পাস করা।

    চিত্র 18 । monitorEvents() নোড পাস করা

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

    কনসোলে নোডের ঘটনা।

    চিত্র 19 । কনসোলে নোডের ঘটনা

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

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

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